Design an integration process for smart home devices
PROJECT: Sense App
ROLE: UX, UI, Visual Design
DURATION: Sep 21 - Mar 22
GROHE Sense is an app that primarily allows users to make their homes secure from water damages with smart water controlers. I’d like to understand what specific challenges our users might face and figure out how they can connect devices with just a few clicks.
Challenges and Target Users
Users often fail to connect their smart water devices to their home network due to a complicated integration process.
Target users are home owners, house managers and plumbers.
I conducted a primary research. I interviewed users, made surveys and acompetitive audit as well as a usability study to understand how users are using the product to this point. My assumptions changed in away that some biasses could be dispelled, like e.g. that older people haveproblems with modern technology.
1. Register an account
Users don’t understand why they should register for an account. How can we skip this step in the process?
2. Find a device
Users have to identify the right device by finding the serial number. How can we make this easier?
3. Connect the device
Users have to leave the app and open the system settings to select the device’s hotspot. Then they have to return to the app. Is it possible to shorten this path?
4. Connect to Wi-Fi
Users have to provide their Wi-Fi credentials in order to connect the device to the cloud. How can we make the connection fast and easy?
Meet the users
Occupation: Sales Manager
Joseph lives in a small town with his wife and two dogs. This year he decided to modernize his house and protect it against water damage. For this purpose, he bought a smart water controller, which he would like to install himself. He has some crafting skills but isn't very knowledgeable about new technologies.
As a homeowner with little technical skills
I want to have a clear set of instructions and guidance steps
so that I achieve device integration with the best experience possible.
Josh is a passionate plumber. He goes to work early and comes home in the afternoon. In his spare time he plays online games and works with computers. He is the only one in his company who is familiar with smart home products. This makes him a valuable employee for his boss.
As a plumber who’s working mainly on-site
I want to have a hazzle-free device integration
so that I can finish installations quickly.
Before moving onto high fidelity wireframes and mocks, I wanted to get a feel for what the core of the app would look like when put in front of me.
I replaced the old integration flow with the new QR code scanning function. The user flow outlines how the user navigates from choosing a device to connecting to a Wi-Fi network.
User Testing Results
ROUTE 1 - FINDINGS
1. Users had no issues to find device
2. Some users don’t know why to name devices
3. Some users have trouble to find the QR code
ROUTE 2 - FINDINGS
1. Somer users where skeptical whether to allow camera access
2. All users were able to scan the code
3. Some users had trouble to find their wi-fi credentials
1. Based on the theme that: some participants had some trouble selecting the right product, an insight is: to add serial numbers for better reference.
2. Based on the theme that: some participants had some trouble choosing a name for the device, an insight is: to mark input fields as optional.
3. Based on the theme that: one participant had concerns if scanning fails, an insight is: to create an alternate path for connection.
4. Based on the theme that: some participants had trouble with their wi-fi passwords, an insight is: to add a modal to inform users that they have their wi-fi credentials ready before starting the integration process.
1. Based on the theme that: one participant needed help to open the connection mode, an insight is: to show an animation instead of a static image.
1. Based on the theme that: one participant needed help to open the connection mode, an insight is: to link to a FAQ page and customer support page.
From Paper to Digital
Based on the test findings I iterated on the wireframes and created a high-fidelity prototype (see link below).
Utilizing a soft gradient consisting of cool and calm colors felt like the perfect fit for the Sense app’s branding. The blue helps evoke a happy feeling out of users and paired with the fuchsia it creates a nice balance between calm and energetic. The main typeface for the app is Linotype Univers. This is the brand’s corporate typeface. The condensed weight is solely used for numbers and data.
I made sure that the contrast ratio is at least 4,5:1 which means AA status according to WCAG compliance.
Main CTAs are placed so that users can operate them with one hand.
The app is screen reader friendly. All images and videos have captions.
I learned a lot, e.g. how important research is as it builds the foundation on every decision that’s made later in the project. I learned how biases can influence user testing and how to overcome them. I also learned how important accessibility and inclusion are, and that many apps ignore this.
Be sure to check out the process for the app’s creation below!
©2022 Dino Franke