Conrad Connect was born in 2016 with the aim to provide an IoT platform for smart living. Over the following 4 years we integrate more then 120 Brands and thousands of devices in order to allow users to create automations, visualise data in practical dashboards or extend devices capabilities through services.
As lead designer on this project, I was responsible for designing user task flows, created wireframes, prototypes, and mocks for many pages across the marketing site. I worked closely with stakeholders such us managing director, product owner, head of marketing to design a registration-oriented experience that successfully increased registration rates.
Requirement & Scope
At the begin of 2021 major improvements were made on the technology that allowed us to drastically reduce the subscription fee.
Business team decided to clearly differentiate the B2C offer from the main B2B content but yet having one website for both. The distinction should have happened through a different "look & feel", new pricing models with the end goal of increasing the number of registrations.
The scope focused on creating inclusion through friendly mood and illustrations, and comprehensive and exhaustive content. In order to achieve that explanatory videos and gif were added to the scope.
Users & Audience
Through Google Analytics we discovered the main audience for our product are male between 25 and 54 years; more precisely the range 25-34 with 26%, 35-44 with 19% and 45-54 with 17%. Moreover the data shows women visiting our pages are 22.5% and most of the visitors don't belong or don't have affinities with the IoT or tech in general.
Competitor analysis
This task was necessary in order to understand what other platform were and weren't doing. We took as example not only market leaders as "IFTTT", "Home-assistant" and "Home connect plus" but also other platform with a specific B2C target such as "MEGA", "Workflow", "Integromat". Regarding the general look & feel we already had a clear idea on the direction however through this analysis we understood the type of content was more useful: visualise our product with real screens was the key.
Information architecture
The definition of IA was mainly a matter of rearranging the information used in the previous version of the website. We considered only what was relevant for the user in order to understand and learn how to use the platform. For this purpouse the section "Resources" contains relevant links to more technical content such as the "Help center" or video tutorials.
Design Process
One of the requirement was to have one website containing B2B and B2C. For this reason we decided to make this division clear through a new layout based on the same grid, brighter colors and a different navigation menu. The user can access the to the new content trough a "switcher". Once the main variation were decided I created the lo-fi wireframe trying to keep a similar structure also for the subpages. This decision would have helped developer team to speed up the process.
Once the Lo-Fi wireframes were finalised I added fidelity as needed to present to stakeholders for feedback. I aimed to create a modern aesthetic with bright colors, real images from our platform, and an atypical layout structure. This structure was inspired by the need for the new pages to show the USPs of our prodcut . The grid-based, modular structure scales well across devices, content could be easily changed or moved and key sections could be updated with content inspired by stakeholder and user suggestions.
Product Tour
In addition to designing the main page, I worked on many of Conrad Connects’s feature product pages on their marketing site. The goal of these pages was to showcase Conrad Connects’s platform in order to convert visitors into registered users. This was accomplished through the use of big, beautiful imagery (product shots and illustrations), compelling copy, social proof, and simple CTAs.
Pricing Page
The pricing pace was included in the requirement since the beginning of the project and I carefully designed a page that would help the user to make an informed decision. This was accomplished with the toggle between monthly and yearly price and practical tooltips on specific words as reminder of what was about.