The Ecobee 3

Creating a compelling visual language for a charismatic IoT device

Creating a visual language that combines with a charismatic product and contribute to positioning the Ecobee 3 Smart Thermostat as a contender to Nest

A Canadian maker of Smart thermostats, Ecobee's challenge was to position their flagship product as a contender to the market leader, Nest.

Nest revolutionized the smart thermostat industry.
Ecobee took notice and approached world-renowned industrial design firm LUNAR with a simple and ambitious charter: to reinvent the industrial design of their flagship thermostat, the "ecobee".
My role: create a visual language that would seamlessly integrate and celebrate the new design.

Getting Started

From an industrial design perspective, the original ecobee was a simple thermostat that came in an outdated beige PC-era box with exposed mounting brackets.
From a UI perspective, skeuomorphism – a design concept quickly falling out of favor – was used extensively.

Contributing to the reinvention of a physical product is a rare opportunity for a digital designer. I was really thrilled to join the highly talented LUNAR team.

Industrial design explorations were already well under way. It was really inspiring to get a feel for the end device, being able to touch and manipulate the prototypes. Although I frequently navigate between UI and UX as a hybrid designer, UX flows articulating the main use cases for the product had already been developed. The project's budget and schedule had been extended by several months to accommodate for these UX explorations. Understandably, the client was at that point starting to put more pressure on the team, eager to see the wireframes translated into a compelling visual language that matched the device's reimagined aesthetics.

Exploring

First step: wireframes deep-dive. Fundamental to understand the unique flows, product mechanics, IA, screen information density and balance. Personality and tone can already be detected here.

The temperature slider seemed to have a lot of potential as a signature element. It's prominently displayed on the idle screen, has the potential for a very distinct visual identity, and is the primary pattern users interact with.

What should be this pattern's UX personality? Should I make it playful and loud? Modern and subdued? What UI would best convey simplicity when adjusting the higher/lower temperature range?

Getting a feel for potential design directions with quick-and-dirty explorations. Always best achieved at the sketch level, before investing any time in an application.

The ecobee promise: "Save money and make life simpler".

"Peggy" our primary persona was not a tech-savvy person, was adverse to tech complexity, and "needed things to be simple".

"Simplicity" was therefore logically established as a guiding principle across the industrial and UX designs.
The visual language explorations heavily leaned on flat design principles to align with this core attribute.

Leveraging key templates to explore aesthetic variations with typography, color, white space, and iconography.

The brand requirements for developping the visual language were fairly high level : no formal set of brand attributes was in my designer "starter kit", but a general tone framework requiring the UI to be "modern, inviting and inspiring". Simplicity was well established as a cornerstone attribute though. The Ecobee promise was to "Save Money and Make Life Simpler.
"Peggy" our Primary Persona was not a tech-savvy user. She was adversed to tech complexity, needed things to be simple, as she "had enough to do in her life".

Focusing on key templates to explore aesthetics variations with typography, color, spacing and iconography.

The brand requirements for developping the visual language were fairly high level : no formal set of brand attributes was in my designer "starter kit", but a general tone framework requiring the UI to be "modern, inviting and inspiring". Simplicity was well established as a cornerstone attribute though. The Ecobee promise was to "Save Money and Make Life Simpler.
"Peggy" our Primary Persona was not a tech-savvy user. She was adversed to tech complexity, needed things to be simple, as she "had enough to do in her life".

Focusing on key templates to explore aesthetics variations with typography, color, spacing and iconography.

Blend in?

How will the UI live inside the physical product? Should the UI stand out or blend in?

Evaluating candidate UIs within the prototype context.

A taste of motion

Mid-process motion prototype to help the client get a feel for the anticipated micro-interactions.

Visual language explorations: an immersion.

Candidates

Three visual brand candidates emerged from a long series of explorations and were presented to the client during our weekly reviews.
Each option was earmarked with a unique attribute, making it easier for the Lunar and client teams to remember and reference.

Style tiles (design compositions communicating the essence of a visual brand) were created to encapsulate the tone and visual characteristics of the three candidates.

Despite the initial disapproval of the client towards dark UIs, the unifying impact of the "HARMONY" visual language with the physical device appeared instantly.

How dark should we go? How dark can we go? Benchmarking a range of background darkness values

Typeface benchmark: how legible will the type be 10 feet away from the device?

The "Harmony" visual language extended to the iPhone Set Up experience.

"The Ecobee’s iPhone app is practically identical in its interface, a nice touch because it limits the learning curve."

– TIME Magazine

Hand off

Documenting the key elements before handing them off to the client's design team: the HARMONY styleguide.
The styleguide was specifically crafted for the internal Ecobee design team in Toronto, charged with taking the key templates to the next level and finalizing the complete experience.