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.

05_ecobee3-0-2

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.

eco-01
ecobee_UI_2

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. 

Ecobee wireframes

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.

01_slider-exploration-1
01_slider-exploration-2

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.

 

ecobee-explorations_1440

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.

 

04_visde_v03_Default-01-FOCUS
04_visde_v03_Black-03-FOCUS
04_visde_v03_Black-04-FOCUS

A taste of motion

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

wall – 1440

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. 

02_13-0729_visual-design-explorations_v05-04
02_13-0729_visual-design-explorations_v05-06
02_13-0729_visual-design-explorations_v05-05
Harmony – selected

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?

06_Typeface benchmark-2
06_Black tones benchmark-2

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

03
05a
05b
06
04
02

"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. 

04_Harmony-Spec-Doc-1
04_Harmony-Spec-Doc-3
04_Harmony-Spec-Doc-5
04_Harmony-Spec-Doc-8

Ready to ship

One year went by until the ecobee 3 was finally ready for prime time.

05_ecobee3-4
05_ecobee3-1
05_ecobee3-2
05_ecobee3-0

Launch

The ecobee 3 launch was a success. The device was very well received and Ecobee did manage to establish themselves as a contender to Nest.

06-1
06-2
amazon
011
033
022

No images added yet.

Add images
IMG_3516

The ultimate seal of approval: the in-store shopping experience with an approving daughter :)

.