UX CASE STUDY
ecobee
Dashboard Redesign
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.
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
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.
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 View Activated
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 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.
