Privacy Policy

Sense App

Design an integration process for smart home devices

PROJECT: Sense App

ROLE: UX, UI, Visual Design

DURATION: Sep 21 - Mar 22

Project Goal

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.

Phone-Mockup-Splash-Screen-Sense-App

User Research

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.

Pain Points

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

Persona-Image-1-1

PRIMARY

Name: Joseph
Age: 55
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.

USER STORY

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.

Persona-Image-2-1

PRIMARY

Name: Josh
Age: 32
Occupation: Plumber

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.

USER STORY

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.

Sense-Guard-Image-Full-Width-2

Paper Wireframes

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.

Paper-Wireframes

Digital Wireframes

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.

Digital-Wireframes

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

Affinity-Map

Insights Priorization

Priority 0

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.

Priority 1

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.

Priority 2

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.

Before-2 After-2

From Paper to Digital

Based on the test findings I iterated on the wireframes and created a high-fidelity prototype (see link below).

Styleguide

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.

Styleguide

Accessibility Considerations

Color Contrast

I made sure that the contrast ratio is at least 4,5:1 which means AA status according to WCAG compliance.

Button Placement

Main CTAs are placed so that users can operate them with one hand.

Screen Reader

The app is screen reader friendly. All images and videos have captions.

Takeaways

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!

Instagram
Dribbble
Behance
Linkedin

©2022 Dino Franke

View