top of page

UX CASE STUDY

ecobee
Dashboard Redesign
iPad_ecobee_2.png
thermostat2.png

The Ecobee thermostat system is designed with "features that bring you comfort at home and control from anywhere." It allows for a wide variety of customization and personalization of settings. The system can be accessed by multiple methods, including a smartphone app, existing smart home system, or a dashboard on an Android or iOS device. After exploring the existing dashboard interface, I realized there was room for improvement. The design lacks an overall cohesiveness and the graphics could better reflect the sleekness of the modern brand aesthetic.

Screen Shot 2022-01-19 at 6.50.55 PM.png
Screen Shot 2022-01-19 at 6.51.12 PM.png

Original Dashboard

Original Settings Pop-Up Screen

PROBLEM
How might the dashboard be streamlined and modernized for a better user experience?

The existing dashboard design is a visually unappealing collection of variously sized gray boxes with labeled categories. The largest box in the top left corner mimics the well-branded thermostat appearance, but the rest of the design style doesn't reflect the Ecobee brand effectively.

DESIGN
SOLUTION
With simplification and graphic refinement, the dashboard interaction would be noticeably enhanced.

The sections of the dashboard and the information they contained should be rearranged and given a better organized hierarchy. The dashboard should be simplified, and some settings should actually be grouped together. The color scheme should reflect the Ecobee brand better.

Upon clicking a category, the information appears in a pop-up box that covers the screen. To avoid the use of a pop-up box and remain on the Home Screen, I felt there should instead be a zone dedicated to thermostat data that would be populated according to the selected category button. 

Redesigned Dashboard

default_mockup.png

Zone 1

Zone 2

Zone 3

In the redesign, I created three main zones to organize the controls. In Zone 1, I moved the basic categories from the original menu in the upper right corner into a panel on the left side of the screen. Beneath this I put the "Quick Changes" controls so that they would be quickly accessible. To the right of this panel, in Zone 2, I placed the thermostat controls with a scrollable list underneath the various sensors in a typical home.

On the righthand side of the dashboard is Zone 3, which features a large panel at the top where content from the various categories appears. Upon launch, the default view for this screen would be the thermostat information details for the selected room sensor in Zone 2. Underneath is a grid of buttons for the major categories: System & Settings (combined from original dashboard), Home IQ, Weather, Schedule, Alerts & Reminders, and Vacation.

system_mockup.png

This image shows the System & Settings category selected, and the screen above populated with details for that section. The user can toggle between System details and Settings information as seen in the image below. 

System View Activated

settings_mockup.png

Settings View Activated

Home_IQ_mockup.png

This image shows the screen information when the Home IQ category is selected. Three charts are visible with buttons to view additional details underneath each.

Home IQ Category View

schedule_mockup.png

Schedule Category View

When the Schedule category is selected, the main screen is populated with the user's temperature schedule and controls to adjust them. A weekly calendar with icons helps the user visualize how their settings are configured by time of day.

ecobee_stock_mockup.png

Ecobee has a great system of products for home climate control. I believe my upgrades to their dashboard controls would enhance the user's experience and create a more streamlined interaction with the product.

bottom of page