No images added yet.
Add imagesCreating 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.
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.
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.
Ready to ship
One year went by until the ecobee 3 was finally ready for prime time.
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.
No images added yet.
Add imagesThe ultimate seal of approval: the in-store shopping experience with an approving daughter :)
.