Services provided
- UX Design
- UI Design
- Visual Identity Design
Let’s get Cozy!
With smart devices on the rise, there’s no doubt that applications for controlling them will take center stage. When given the opportunity to design an interface for one of these intelligent little life-enhancers, my enthusiasm was set to “Thrilled”:
The challenge
Design a native app (either iOS or Android, or both) for a smart device. The app should allow the user to easily adjust the temperature, lights, and music in their home or office. You may select the designed feature set and user flow based on the user demographic of tech-savvy, relatively affluent professionals.
Shopping around
While immediately diving into the pixels is tempting, especially on a project like this, we had some ground work to do. To begin, we needed to answer a few questions. Some of the larger questions were:
1
What is the scope of this project?
2
Should this application control heat, music AND lights? Or just a subset of the three?
3
What parts of a smart-device app deliver the most friction?
4
Where can we innovate?
After thinking through the initial reach of the project, we decided to focus on a smart thermostat, keeping the functionality scoped to controlling the temperature in one’s home. This allowed us to get more granular with our solution and focus on a single facet of the technology.
To start, we began sketching out some ideas. We worked not to get boxed-in by any existing product offerings. It seemed that one of the biggest points of friction in thermostat control is getting the schedule dialed in. We set our sights on designing a system that required little-to-no setup.
Our initial concepts included an apple watch component, which would measure body temperature and automatically regulate your home’s temperature in whichever zone you were in. Ultimately though, this proved to be too complex and led to more questions like:
1
What if there’s more that one person in the house?
2
How would the zones anticipate your arrival and know to warm up or cool down?
3
Why would someone want to wear this all the time?
4
What if they need to take it off?
To refine the idea, we thought about keeping the wearable concept, but limiting the amount of time someone would need to wear it. We thought through a technology where the user would only need to wear the device for a couple weeks while the system collected habits and could then maintain itself.
With more deep thinking, we realized that a wearable was just too cumbersome. Also, monitoring body temperature is the only thing a wearable would be beneficial for, with that feature off the table, we could simply use a device and wall unit to collect data and set up a schedule. We had reached a few conclusions:
1
Onboarding should be easy
2
To achieve this, Machine learning should be core to the app’s functionality
3
The app should have a “human” touch, with a delightful user experience at it’’s core
As we thought deeper, an emerging trend came to mind; “assistant” and “chat bot” interfaces. With impressive machine learning improvements over the last decade, we can now deliver “human-like” interactions by way of an artificial chat interface. This eliminates the need for a complicated setup flow and heavy UI elements. Users can simply “chat” with the app to get things done. With that, came our solution:
The app will allow users to interact with their thermostat through a chat interface. The app will respond to commands and notify by way of a simple messaging channel.
Armed with a direction, we were ready to begin implementing the concept.
Time to buy
With an understanding of how the app will work, we needed to put ourselves in a client's shoes and retrieve more information about the product. The more understanding we have, the more we are setup for success in solving the client’s problem. Here’s what we got back:
How does the app work?
The app is called “Cozy”, we want it to be different from what people are used to. So often, working with a thermostat can cause headaches. We want Cozy to let users to manage their smart device directly through a chat interface. The app will respond in a friendly way and execute. No complicated configuration and setup.
While the “Chat” component of the app should be the main focus, we want to allow for a more traditional interface too. Perhaps users can toggle between the chat and a setting page, where they can manually adjust things. While users should be able to adjust any setting by requesting it through the chat, we would also like them to have complete control by through a settings place too.
The thermostat should learn from user behavior and take care of everything for them. Nest currently does something similar with it’s learning capabilities. We will have all the nest technology wrapped up in a “Cozy” assistant personality.
We are having another firm handle the design and functionality of the hardware. You are only responsible for the native application, as this will be the user’s main touch point. We plan to launch with IOS and then quickly develop an android app once we’re off and running.
Competition: Who are your competitors in this space (urls)?
https://nest.com/
https://yourhome.honeywell.com/en/products/wi-fi-thermostats
https://sensicomfort.com/
What is your target market? List of audiences/targets/ current and future
We’d like to target tech-savvy people who appreciate the bleeding edge of technology and are always up-to-date with the latest trends.
Describe your best customers’/users’ relationship with the app
We would like the app to foster a feeling of “Trust” with our customers. After answering a few questions, Cozy should take it from there. We want users to feel like the app is always ready to listen but doesn't require any special treatment. “Obedience with initiative”.
Who is your user?
While the brand is targeted toward tech-savvy people, we feel our users to be anyone who wants to experience a modern way to control their smart devices. Perhaps even those who would rather “talk to someone” than sift through a complicated interface to find what they are looking for.
Current value proposition: What are you “selling”?
We’re selling the future of “easy-to-use” smart home technology
If you could get your users/visitors to do only one thing, what would it be?
Buy a Cosey and LOVE it
Apps and features: What apps have the look and feel that are relevant to what you want to achieve (do not need to be in your space):
Google assistant Carbon healthcare Slack Nest App
Personification: If your app were a person, alive or dead, real or fictitious, who would it be? And why?
Abraham Lincoln An honest, hard working presence whom will always make the right choice under any circumstance. Also, interesting with heaps of experience. We want Cozy to make users feel at ease with an “I’ve got this” ora.
Brand pyramid: (3 to 5 answers per category please)
Personality: (e.g. dedicated, modern, sleek):
Lively Honest Attentive Obedient
Functional Benefits: (e.g. information, guidance, analysis):
Information Guidance Analysis Maintenance Troubleshooting
Features/attributes: (e.g. facts, user generated, web based)
Mobile app Free with purchase Non-intrusive
Preparing to turn up the heat
While researching other assistant and thermostat apps, we came across some fantastic interfaces.
We noticed however that many of the thermostat apps were full of confusing knobs and dials. Many of the apps used a "notched" treatment to indicate the current temperature. We found it hard to understand what the notches represent and use seemed to vary between products.
We felt that the thermostat visualization should remain simple with the temperature immediately visible. For the chat UI, a traditional approach seemed the best place to start.
Lighting the fire
Prepared with all the information needed to start working on the app, we began mapping out the flow.
The flow assumes that the hardware is already installed and functional. We decided to focus on the high-level onboarding flow and the broad sections of the app being the chat, schedule and settings. One thing we noticed quickly was that most of the on-boarding could take place through an initial chat conversation. The conversation should map to any settings that require more information to be configured correctly.
Wire it up
With a logical (high level) flow in place, we began putting together some wireframes for each of the screens needed to articulate the functionality of the product.
Once an account has been created, users must pair their thermostat with the app. We aimed to make this process as simple as possible with a “Pair manually” fallback.
Once users complete a simple onboarding flow, they are dropped into the main hub of the app, the chat log. We designed the chat page to feel familiar to anyone who has used a chat app before.
It’s here users will meet their Cozy for the first time and get everything configured. During the initial setup, Cozy is aiming to:
1
Introduce users to the chat-like functionality by interacting with the UI
2
Set your current mode hot vs. cold
3
Set your base temperature
4
Set your away temperature
5
Inform you that Cozy will create a schedule for you automatically
6
Give you an overview of some of the commands you can use
We've mapped out the initial on-boarding conversation here:
After interacting with Cozy for the first time, users should have all their settings configured and have a good idea how to communicate with it.
If desired, users need never leave the chat place, as any setting and scheduling decision can be made by simply chatting with Cozy. That said, we designed a settings place where users can manage all of their configuration options and manually control the thermostat if needed. This can be accessed from the primary navigation in the chat navigation controller.
We also designed a scheduling interaction where users can manually create or adjust their heating/cooling schedule either based on Cozy’s suggestions or start from scratch.
To adjust their schedule, users can tap into a day of the week and then drag the temperature balls left/right for temp and up/down for time. Tapping the screen will add a new ball and tapping an existing bal will allow users to remove it. Long pressing a ball will bring up the configuration UI (screen 3)
We looked to nest for inspiration here. Though nest has a horizontal orientation. The way Nest handles the interaction is clever as it allows temperature adjustment to take place through dragging the ball up and down (more expected) and time adjustment with left and right. However, we felt that turning the phone to landscape mode can be a hassle and having temp along the X-axis may prove just as intuitive.
Also, nest forces users to first enter an “Edit” mode for adding and removing balls. We felt this was unnecessary and could be eliminated. Simply tap to create, tap to remove, long-press to edit.
Design
After exploring a number of design treatments, we landed on a minimal approach so the content could shine. We kept the UI fairly “system” so as to maintain familiarity to native users.
Many of the apps we looked at during our research phase looked beautiful, but did not feel all that usable. We choose to place native functionality high on the priority list.
Heating up and cooling down
We worked to create a design system where the current mode (hot/cold) could radiate through without being overwhelming. The idea here is that the “Feel” of the app can change while the UI elements do not feel unfamiliar as a result of the shift.
Type
Continuing with the “system” approach, we choose Apple’s default SF font family for all UI fonts. To keep the app from feeling too “sterile” however, we used added “Museo Sans” for displaying numbers. The Museo font family is modern and clean yet friendly and approachable. These attributes compliment the personality of the app well.
When porting the design of the app to Android OS, Roboto may be used in place of SF so as to remain familiar to the Android user base.
Meaningful color
While it would have been easy to pepper this app with a barrage of colors, we choose to create a simple color system that would be:
1
What is the scope of this project?
2
Incorporate proper use-cases for each color selection
Assigning meaning to color and keeping the palete simple will make things easier as the brand and product begin to expand.
Meet Cozy ...
In order for our design to succeed, we needed to develop a simple brand component as a baseline for the personality of the app. We created a simple mark that could also act as the avatar for the Cozy chat bot.
We designed the mark to work on light and dark in warm, cool and neutral forms.
Make it human
The chat interaction being core to the experience, we mocked up exactly how this piece should function.
Messaging
Typing something like “Set temperature to 70” could be seen as a more demanding interaction than simply turning a dial. Because of this, we designed the keyboard to offer smart suggestions based on the context of the conversation, as we want making adjustments to be as frictionless as possible.
A note on the thermostat UI
Many of the thermostat visuals we came across included notches. While these look nice, we found them to be unnecessary, and frankly difficult to understand, when displaying the temperature with only “up” “down” controls. We landed on a design for the thermostat component with an emphasis on simply adjusting temperature.
Just enough control
While chat is the center of the action, we included a settings place for users to maintain ultimate control over their device. This also provides a configuration overview at a glance.
We also included a way for users to view and maintain their schedule. While Cozy will set this up for you, sometimes seeing and managing the configuration is important.
Thermo-stats
We designed Cosey to provide stats directly in the chat place. Common commands and an overview of your thermostat are a good place to start. The sky is the limit with the amount of overview cards we can offer in the future
Fire it up
With our initial design decisions in place, we linked the screens together into a complete flow. It was helpful for us to visualize the experience from start to finish.
Preventing burn-down
These designs act as a solid base to begin testing assumptions. That said, the result is just that: A starting point. Only when we put the app in the hands of real users will we understand if the concept is a success.
Once launched, it is important that we are receptive to feedback of all kinds with a framework for testing metrics and measuring success.
(not the) End.
This is a great start to the Cozy product and we designed the app with the future in mind. Some of the things next on the Cozy roadmap:
