Conrad Connect
Corporate website for an innovative IoT platform which helps the users to unlock the full potential of their smart devices.
UX RESEARCH, UX/UI DESIGN
Year
2018-2019
Role
UX/UI & Visual Design
Introduction

Conrad Connect is an IoT platform from Conrad Electronic SE, an important retailer of electronic products in Germany. The platform unlocks the full potential over 3k smart devices, apps and services like Google Home, Garmin or Spotify. The devices can communicate with each other by cloud computing and thereby multiply their possibilities and overall usefulness.

Problem

The main issue was a low performance of marketing pages and problems with them as the main channel letting users know about the platform. There was not a clear web structure and the interface was not user-friendly. The visuals were based on Shutterstock pictures. Also, the website was not fully responsive and this lead to a really big problem since 65% of users had access to the website from their mobile devices.

Design goals

  • Define clear navigation to improve the user experience
  • Responsiveness: a new mobile version of the website
  • Design of new intuitive UI elements
  • Make from scratch conceptual illustrations and icons

Business goals

  • Increase the number of registrations
  • Improve the conversion rate
  • Improve SEO ranking
Benchmarking

First of all, I started making an exhaustive analysis of our main competitors. In the first phase, I have started a general analysis to understand what are the main criteria our competitors were focused on to convince a big number of possible potential users to register and use their platforms. The second phase consisted of a specific analysis to know how competitors solve certain design concerns. In this specific analysis, I mainly focused on the design in general terms: the user interfaces, UI elements, and use intuitiveness.

The analysis and the benchmark helped to familiarize with the current market of IoT platforms for smart devices, discover the business opportunities and the differentiation with the competence. It was also really useful in terms of interface design because I could discover how similar functionalities have been solved at the level of interaction and design and how the IoT market follows similar patterns.

Understand our users

Once I have made conclusions of the analysis and shared them with my colleagues, together with the marketing team we spent a week interviewing five active users that met the requirements of our target. The marketing team had access to crucial data which provided the age range, gender, and location of our users. This data helped us to choose accordingly our 5 active users to interview them. The questions were focused on what our selected users were expecting of the website, in what context they felt the need to open the website, what steps they were followed by using the website and the level of technological knowledge. Thanks to the interviews we could obtain a general picture of our users and understand their interests, motivations, and expectations while using Conrad Connect.

Based on the interviews, we developed four personas that represented the characteristics we found in our users during the interviews. These personas helped me as a guide during my work process while making design decisions.

One of the personas we developed was Matthias, a 38 years old man who represents a group who uses the platform to connect their smart devices to the platform to control all of them from the same place.

Thanks to this Personas, I could go deeper and understand the needs, the attitudes and behaviors of the potential users and what they expect from the website. Also, I could understand their behavior patterns and this helped me to define context scenarios for each persona and map their journeys while using the website.

Solution

Firstly, we decided about the content and sections that the website must show up to fulfill our goals. Once the marketing team decided the final content that the new website would present, I started to define the website navigation. For this, I built this site map below.

Once I defined the structure of the website and I saw how the content would fit in every page, I defined different users flows with the help of the Personas we developed previously. The user flows I mapped helped me to understand the user behaviour while using the website and how this one can fulfill their needs depending on the context.

Design execution

After the structure of the website has been defined, I started to sketch the first wireframes. Since 65% of users had access to the website from their mobile devices, I started sketching the mobile version. The next step was to proceeded design the desktop version. Working first on the mobile version, I made sure the responsiveness of the website would perfectly work.

Once I finished the first low-fidelity wireframes and we validated them with the marketing team through clickable prototypes, I started to design an improved user interface. I defined the essential visual characteristics of the website such as typography, corporate colors, icons, and UI components. I also created all the conceptual vector illustrations to avoid Shutterstock pictures and make the website more visual with understandable information.

Validation

Because of our time limits, we couldn’t test the redesigned website with real users. Our Customer Support team tested the website during a half week under our observation. We gave them a set of tasks to evaluate if the website can fulfill the user needs and business goals. The main task was to finally register at the platform since the main goal of the website was to increase the number of registrations. I could see how the Customer Support team could effectively solve the task that was given. The first input they had was to register on the platform.

After this process of validation, we made sure that the conversion rate/performance of the new website would be much better and the number of registrations would increase.

Final Product

After the validation process, I adjust and made some changes until I arrived to the final product. The new website has clear and intuitive navigation, which allows the users to have a successful experience. Also, the new user-friendly interface and the visuals help the users to understand much better what the platform is about and consequently register if they haven’t done it before.

Outcomes

The new website has had a positive impact on how users make use of it and has been reflected in the business results.

66.72%
increase number of users
69.98%
being new users
60011%
higher sessions
2.88%
less bounce rate
59.69%
increase registration
Team
UX/UI & Visual Design
Digital Marketing Specialist
Product Marketing Strategist
Back-end & Front-end Development
Mercedes EQC
A mobile app that shows the users how the new e-vehicle Mercedes EQC can fit their daily life habits.
UX RESEARCH, UX DESIGN