Ecobee Smart Thermostat
Redesigning a non-conventional screen, exploring digital thermostat design
Role
Solo product designer
What I Did
User Research, Prototyping for unconventional screen
Time
Tools Used
May 2023 (2 wks)
Figma, Photoshop
Background
In today's world, the lines between physical and digital interactions are increasingly blurred. We often toggle through digital and physical spaces with ease, encountering screens in different contexts to do tasks, get information, and to entertain. Our digital products might work well for some people, but not others—and some just haven't been adapted well for a particular situation or problem.
Inspired by project brief from (AVPS WashU SP 2023)
Overview
Beyond Web and Mobile
Revise an existing screen-based product to make an improved experience via a visually engaging graphical user interface, or GUI. The key parameter is this: it must be an unconventional screen size/application.
*(In other words, no desktop/laptop browser-based websites or mobile aspect ratios)
Why a smart thermostat?
I first began brainstorming different ideas for this redesign ranging from gas station screens, ATMs, and digital ovens. But, I kept going back to my friend’s new thermostat that was put in after her building did renovations over winter break, an ecobee 1st generation. While over at her place, she told me about how frustrating the new thermostat was to use.
ecobee: A Pioneer in Home Technology
Developing in 2007, ecobee rose as the pioneer of the smart thermostat industry and movement under the leadership of Stuart Lombard. Lombard, wanting to manage and reduce his family’s carbon footprint and energy expenditure, switched from a manual thermostat to a programmable one, only to discover that his total energy usage remained high.
This frustration led to the creation of the ecobee company and progressed the idea of the home viewed as a system, interconnected by technology.
Studies have found that programmable thermostats scheduling causes confusion for users leading to increased energy consumption and higher electric bills. Other users simply do not engage with the feature, resulting in no changes in energy usage.
Reducing the complexity of creating manual temperature setpoints makes users life easier and hits their energy saving goals.
ecobee3 (1st generation)
ecobee introduced the ecobee Smart as its first energy-saving Wi-Fi enabled thermostat in 2008. The thermostat is controlled by using the built-in touchscreen, web portal, or app available for Android and iOS mobile devices. The company is currently on its 8th model, with 4 models available to buy new (ecobee4, ecobee Smart Thermostat with Voice Control, ecobee Smart Thermostat Enhanced, ecobee Smart Thermostat Premium).
This case study focuses on the temperature setting main screen of the ecobee3 1st generation which was released in 2022.
Model Specs
Research + Competitive Analysis
What’s behind this niche industry standard?
To understand the industry standards for smart(digital) thermostat and the utilitarian design aspects common across all thermostat, I looked at the best selling thermostats as determined by Best Buy, Home Depot, and The New York Times.
Using a competitive analysis chart I examined the common and differentiating factors of the most popular digital thermostat.
10+ user interviews later
During the interviews, I asked questions to gauge their understanding of smart thermostats, how they operate, and the design standard in the current market. I provided a brief history and top level breakdown of the device.
Through informative interviews and observation, I sought to define
What are your initial thoughts about the ecobee thermostat design?
What gaps are present in the product?
to clearly understand the problem landscape.
Problem
Every element is competing for attention
1. The spinner is very elaborate and inefficient for users with hearing impariments
2. Heating and cooling settings confuse users and are hard to view from far away
3. Users are overwhelmed at the array of options available on the screen
Prototyping
Test, Test, Test.
I created 15 different lo-fi wireframes to explore different methods of temperature scaling and controls as well as button placement and typography. By designing and A/B testing multiple options, I was able to find a design that balances the necessary complexity and information with a pleasurable user experience
Accessibility benefits everyone
Working with an irregular shape has challenges in wanting to display temperature change and range with no linear elements but also wanting to be less abrupt vertical lines when when everything else has a curve or roundness (icons, numbers, screen shape).
I experimented with line weight, font size, button spacing and sizing, and modes of displaying temperature range, while also keeping in mind W3C accessibility guidelines for Non-Web Information and Communications Technologies (WCAG2ICT).
A refined ecobee
Managing cognitive overload
Reducing the number of icons on the temperature setting screen to include the most important and frequented items + Only included indoor temperature as the default to minimize confusion
Keeping spinner design but reduce the number of increments (dots) and create an illusion of the 3D spinning motion with a gradient of color and size
Color communicates a wealth of information
Color theory acts as another language, a mode of communication that can transcend meaning across culture, but the two selected colors: #56C2FF (light blue) and #FFA216 (yellow-orange) represent opposites of cooling and warmth, night and day.
In wanting to increase the visual stimulus, adding vibrant yet minimal amounts of color creates a cohesive visual language
Prioritizing readability and visual hierarchy
A more bold proportional sans-serif to ease the strain on users eyes when viewing the thermostat as well as draw the to the most important information on the screen:
Current temperature
Set & Scheduled temperatures
Questions & Settings
Refined color options with higher contrast ratios to reduce strain and improve visual language.
UI Component Library
Design System
Temperature Scheduling
Temperature Out of Range
About and Settings
Results
Small details can define the interactions experience
I gained more appreciation for the iterative process when conducting my usability tests for my final designs given that the final prototype utilized the element of most complexity but with more visual refinements that make the user experience more enjoyable.
My previous impression of redesigns made me hesitant to go back to the original temperature setting method, but repeating the testing process over and over gave me more confidence in my design decisions.