THE INDUSTRIAL DESIGN PROBLEM

Emerson’s older generation thermostats utilized the traditional white plastic design styling of the past. For this product, they wanted to set a new standard to bring themselves into a modern aesthetic. Competition looked more like high-end electronics inspired by smartphones and Emerson knew that this design had to make a big splash in the market.

INDUSTRIAL DESIGN PROCESS

Image boards were generated to ensure we were targeting the high-tech feel that the Emerson team desired and that were independently unique from the competition. Initial 2D concept sketches explored a wide variety of executions, materials, and constructions for Emerson to evaluate. Modern high-tech aesthetics could be expressed via simplified, minimized forms, or through high-end metallic materials and colors. Several rounds of exploration yielded a few key directions to explore further in 3D, rendering, and prototypes.

THE INDUSTRIAL DESIGN SOLUTION

After several rounds, the final industrial design direction took inspiration from several concepts:

• A softer, pillowed exterior to communicate friendliness and ease of use.
• An edge-to-edge clear cover, which is more challenging and costly to produce, but creates a minimal and clean aesthetic.
• A clear cover, back-painted black, inspired by modern technology.
• A back glow light for installation and aesthetic visual presence on the wall.

UX/UI REQUIREMENTS

Introducing the largest color touchscreen LCD on the market provided the opportunity for potentially new interactions and features, which included:

• Temperature progress bar that estimates time to temperature
• Easier scheduling on the device screen
• Settings: Wi-Fi, brightness and HVAC system type control
• Notifications and status updates
• Automatic upgrades
• Traditional settings including: current temperature, mode selection, and fan selection

EMBEDDED INTERFACE CONCEPTS

With these requirements in hand, exploration started with evaluating design system elements like typography for both the temperature and other complimentary visual elements. These concepts explored various UI styles for the main screen, temperature progress bar, set temperature, and overall Emerson Sensi brand language. Variations included:

• Bright, friendly, and colorful expressions
• Serious, reserved, and sophisticated
• Flat vs. dimensional

EMBEDDED INTERFACE COMPONENTS & SCREENS

The final implementation included a variety of elements from various concepts, including a subtle gradient graphics approach, a progress / set temperature bar, a menu which provided access to enhanced features like back glow and brightness, and more. A component library could be used across the embedded and mobile app interfaces.

ANIMATION / UX MOTION SAMPLES

This animation file was generated to exemplify simple transitions that assist users with the mental model of where elements exist:

• Menu drawer comes in from the top.
• Mode / Fan drawer comes from the bottom.
• Dissolve animations are used within a specific menu domain. Slide animations can be overused and are reserved for first-layer interactions.

MOBILE APP REQUIREMENTS

Sensi had a strong reputation for ease of use on their previous thermostats and looked to build on that via:

• Improving installation with additional detail, illustrations/visualization, and simplification
• WiFi setup simplification
• Improved scheduling

A user flow diagram was generated for the installation, taking note of detailing additional steps that could assist with improved clarity and use such as: the removal of jumper cables, the addition of a c-wire install kit, and more.

INSTALLATION WIREFRAMES

Quick wireframes were generated from the user flow diagram for heuristic evaluations. The installation process was documented, wireframed, tested with hardware, updated, and refined several times. The primary purpose of these early wireframes were to identify additional detailed steps that may have been missed as part of the install process.

HEURISTIC EVALUATION

This evaluation was on the current Sensi app, identifying pain-points with the current UI. The evaluation discovered:

• Most buttons were 44x44pt, the minimum touch target size recommended by iOS guidelines.
• Typography is often 15pt for required information, smaller than 17pt as recommended.
• Color contrast is in violation of WCAG AA standards.
• Inconsistent use of modals.
• Valuable features hidden behind modals and menus.

IMPROVEMENT SUGGESTIONS – STARTUP

As part of the heuristic evaluation, concepts of improved layouts were generated that examined:

• Utilization of the hardware as the indication of what thermostat the user will be editing
• UI aesthetic consistency between the embedded interface and the mobile app, like the mode buttons and icons.
• Utilization of touch targets larger than the existing app (44pt with no margins)
• A menu restructure where “advanced features”, such as “cycle rate”, “A/C protection” and other predictive/preventative controls are one click away, as opposed to being buried in a settings menu.

AWARD WINNING SUCCESS

This thermostat became and continues to be a best-seller for Emerson in the marketplace, earning praise and accolades, from Frost.com:

“Based on its recent analysis of the global smart thermostats market, Frost & Sullivan recognizes Emerson with the 2019 Global Customer Value Leadership Award for the best-in-class installation, top-rated user experience, and energy and cost savings enabled by its flagship Sensi™ product line. The award-winning solution provides homeowners with complete control over their home’s comfort, from wherever they are, through seamless smartphone integration and best-in-class service.”

Video credit to the Emerson/Sensi team: