Dashboard
Smart thermostat
Dashboard
Smart thermostat
companion app
Sign up
​
Dashboard
Listview
Project Overview
​
Salus manufactures smart home automation products, including thermostats and related heating/cooling controls.
​
The client’s goal was to enter the US consumer market with a newly branded habi product range.
​
To support the successful launch of the habi brand and new wifi thermostat, the client wanted to refine the user experience and UI design of the thermostat and mobile companion app. ​
Key Responsibilities
​
-
Recruiting staff
-
Managing the design team
-
Providing design direction
-
Guidance and mentoring
-
Stakeholder collaboration
-
Identify business requirements
-
Coordinate user research
-
Plan and run usability tests
-
Input into design solutions for Wireframes and UI components
8 / 2018
End
Research
​
With a dedicated researcher joining the team, we conducted primary and secondary research to understand the problem space better.
An external agency had previously created personas for the habi range, which we utilise for this project.
​
Personas included three households with couples and families, all owners of a Salus smart thermostat.
​
Each household had specific needs, such as saving energy, security or the convenience of controlling
their house remotely.
​
Sure, here's a shortened version:
Discussions with client's engineers and research helped identify key questions, such as:
How to simplify a complex technical system into user-friendly applications for accomplishing tasks delightfully?
How to create valuable experiences for different personas within the same household?
How to explain complex concepts like 'House Rules' and 'One Touches' in an easy and inclusive manner?
User task analysis/flows/user journey mapping
​
While identifying core screens for the thermostat and companion app, we studied the IA to determine and document user interactions and journeys.
​
The system's complexity required many meetings with the client to understand how each feature works and how they are connected. One of the senior UX designers was tasked to create flow diagrams which we reviewed and further developed into annotated wireframes.
Thermostat UX
Identifying what works&what doesn't
​
Ongoing usability testing helped validate viable solutions whilst allowing us to iterate and further improve the consumer's experience.
​
We couldn't conduct the usability test using the actual thermostat's display. This was due to incompatibility with the device's OS and our prototype.
Our solution was to use an iPhone 8, which is almost the same size and easily attached to the wall.
Thermostat UI
Companion app UX
Companion app UI
6 / 2018
Start
Design Process
Objectives
​
To define a visual design treatment that matches the new habi brand and can be applied across the mobile app and thermostat.
​
In addition, Sales wanted us to refine the user experience of the app and thermostat to deliver a more premium experience; the initial setup and onboarding experience have been identified as key focus areas.
Approach​
​
Our senior UX designer and I worked closely with
the head of engineering to identify the feasibility of
the product launch.
​
Working collaboratively in a cross-functional team, we combined our knowledge to solve critical UX problems and simplify core concepts.
The usability study revealed an issue with the UI involving circular dial movements to increase temperature. With the device wall-mounted, participants found the circular hand motion awkward and fiddly due to lack of support/leverage for the hand.
Outcomes
Solutions
​
We developed a new tabbed navigation structure consisting of 5 main areas:
1. Dashboard
An overview of the features available to give users ultimate control over their homes via
the hub (thermostat).
2. Devices
A place to manage, edit and add new devices.
​
3. House Rules & 'One Touches'
'If this, then that' scenarios allow users to customise their home and help them increase comfort, heighten security and make eco-friendly decisions. Users can set up automated rules like 'When the bedroom door opens, turn the hallway light on between 12 pm - 5 am.
​
4. Alerts
An area for all alerts and reminders.
5. Help
An interactive section with videos, FAQ and chat integrations to help users with the setup and options
to learn about the app's capabilities.
Learnings
Connected smart device experiences​
​
Creating seamless smart device experiences requires thoroughly understanding the intricate
relationship between hardware and software components.
By applying design principles strategically and incorporating user feedback throughout the process, we created an experience for the user that delivers effortless interactions which are relevant, easy to use
and tailored to their needs.
​
We frequently got together to discuss and ideate on questions such as:
​
How can the user set up a routine that includes turning on/off multiple devices in different rooms at specific times?
How can we make the system work properly when other household members overwrite these routines?
Inspired by these learnings, I decided to do a research project to identify ways to prototype connected devices experiences more effectively.
Resources
Team
1x UX Researcher
3x UX Designers
1x UI Designer
2x Developer
1x PM
Tools
Sketch
Invision
Axure
Photoshop
Confluence