ecobee.com — Powered by Shopify

Company: TWG
Role: Product Designer
Timeline: Aug 2019 - May 2020

Overview:

ecobee came to TWG at a time of growth and expansion for their brand, business and product offering. The goals of this project were to design an online flagship shopping experience that catered to a new persona group, lay down the foundation of a new visual direction that would differentiate ecobee from their competitors, and build a scalable design system and component library for the ecobee design team to build upon.

*All visual direction imagery in this case study are for placement only. Original 3D renderings by Umberto Daina.

Discovery:

The project began with a deep discovery that allowed us to get an in depth understanding of the company, its products, services and product ecosystem. Through a series of initial user interviews in collaboration with our User Research team, we were able to understand the motivators behind what led to making a smart home purchase. Whether their purchase was driven by achieving peace of mind, savings, or running into an experience that led them to want to change something in their home, customers who buy smart home products use them in many different ways based on their own households. We gauged how they shopped, compared, and did their own product research before purchasing in order to inform a user experience that met those needs.

Site map.png

Visual direction exploration:

During our engagement, ecobee was in the midst of a series of changes. They were executing on a full rebrand, and they were launching a series of new smart home products. With these occurring changes, the goal of reimagining ecobee’s visual direction was to differentiate them from their competitors in the growing smart home market. We collaborated as a team and spent time conceptualizing the initial frame work of a new visual direction that would tie all of their products into an approachable and refreshing new look.

*All visual direction imagery in this case study are for placement only. Original 3D renderings by Umberto Daina.

Tonal Harmony.png

Global styles:

Style Guide.png

Homepage:

At the top of the funnel, we set out to design a homepage that could communicate the value proposition of ecobee products to potential customers in a natural and digestible way, with a clear entry point to shopping and discovering ecobees entire suite of products.

Product Navigation:

Within the ‘Products’ dropdown of the global navigation, we introduced category pages that would serve as a place where ecobee could seemlessly scale their product offering online.

Home Nav Open.png

All Products:

All Products.png

Categories:

Category pages were designed to fit the needs of customers who were researching, comparing and learning about ecobee’s products. We placed entry points to product detail pages in multiple areas of the screen as the user scrolled through the content to allow them to seamlessly move deeper through the purchase funnel.

Category Page.png

Product Detail:

The Product Detail pages are home to all detailed product information. The content starts off broad by covering a general product overview, and gets more specific as you scroll further down the page where users can read into technical specs, followed up by customer reviews. An Add to cart call to action was placed within the fixed sub navigation in order to give users the ability to move forward in the funnel when they were ready to make a purchase.

PDP .png

PDP 2.png

Cart:

The new cart offered an opportunity to contextually up sell a product or service based on what’s in a users cart before they proceed to checkout.

Responsive mobile experience:

ecobee mobile.png