ALEX CLAYTON

GEBL

Alex Clayton's UX design work on Whirlpool global experience brand language redesign.

 
 

+

TIME

2015 — 2018

 
 



 
 
 

+

Challenge

Global Experience Brand Language (GEBL) was a large-scale brand definition project. The challenge was to create a consistent UI experience across an entire suite of Whirlpool brand products throughout the world. 

The suite of products were announced at CES 2018.

 
 
 
GEBL Suite.png
 
 



 
 
 

+

ROLE

As one of the lead UX designers, I collaborated in an agile, feature-driven development process along with other UX designers, graphic and motion designers, software engineers, and project stakeholders. Together, we developed a full suite of kitchen appliances from idea to production.

 
 



 
 
 

+

PERSONA

 
 
 
 

The Whirlpool persona leads a busy life filled with work, events, and family activities. Removing and preventing new distractions and being forgiving if mistakes are made is crucial to making their lives better.

In all that they do, caring for their family is one of the things they value most. Since they don't have a lot of time to spend cooking, they typically aren't experts with their kitchen appliances. 

Our design needed to be intuitive and reduce steps in a delightful way so they can spend their free time with their family.

 
 



 
 
 

+

 

HARDWARE & TECH

While scoping designs for new hardware and technologies, I was simultaneously determining button configurations and layouts. The number of buttons placed externally directly impacted the overall navigation of the product and the importance of the LCD screen.

 Above in black: 4.5" full color, full touch LCD screen. Above in blue: 3.5" 16 color, full touch LCD screen. Additionally, some products contain a proximity sensor and utilize external capacitive buttons in a 6 button layout (shown above) or 4 button layout that excludes the two outermost buttons.

The concepts above placed more emphasis on interacting with buttons on the control panel which required fewer steps on the LCD.

With input from stakeholders, the finalized direction was to put more emphasis on the LCD and minimize external buttons. This constraint really helped the project move forward to focus on the LCD information architecture.

The hardware and technology includes:

  • Proximity sensor

  • WiFi + app connectivity

  • 3.5" limited-color LCD

  • 4.5" full-color LCD

  • 4 or 6 external capacitive touch buttons (product dependent)

 
 



 
 
 

+

LCD INFORMATION ARCHITECTURE

My team and I iterated through hundreds of ideas and concepts to define the architecture of the LCD screen while keeping focus on simplicity in accessing core content. Much of our initial efforts were spent on the home screen of the product and defining how to utilize the external buttons.

 
 
 

Throughout the project, one of my key tasks was prototyping.

Simpler prototypes helped communicate ideas to stakeholders while more in-depth ones were created for usability studies. In one study, I created 18 in-depth prototypes using Proto.io based on the three leading concepts shown above. 

GEBL Testing

With additional iteration, testing, and stakeholder reviews, we finalized a high-level button and LCD home screen architecture. Every product would have a Home, Favorites, and Settings button and allow for a fourth product-dependent button. We continued to iterate on LCD concepts and ideas. I created these using Principle and few examples are shown below.   

Mode Change
Oven Light
Tumbler to Keypad
BLDS button
Control Lock From Clock
Progress Bar Drag

With research findings and stakeholder input, we created sketches of the final directions we moved forward with for home screen on the refrigerator, microwave, and oven.

 
Fusion Fridge.png
Fusion Microwave
Fusion-07.png
 

With our initial direction, we created an oven hero flow to demo to stakeholders and developers.

 
 
 
 



 
 
 

+

DOCUMENTING FOR DEVELOPMENT

We pushed ourselves to constrain designs across each product for consistency to ensure a cohesive mental model for users. An added benefit was that this helped reduce software development time.

Using product feature requirements, we created user flows based on the finalized high-level architecture. The user flows were built by connecting screen templates (CVTs).

 
 
User Flow
 
 

Above shows a very simple user flow and definition for a part of the kitchen timer. This flow uses two CVTs — Kitchen Timer Status CVT and Parameter NumPad CVT — and shows what should happen when the kitchen timer is tapped while in this view.  

CVTs are built on blocks. Each block had its own definition — including whether it was interactive and what types of elements it should contain.

 
Documenting CVTs
 

Above shows how a CVT is broken down into blocks — listItemTitleStatic and kitchenTimer — which would each have their own definitions. Blocks are built of elements. These elements defined smaller details if necessary.

 
Documenting Blocks
 



 
 

+

SCREEN DESIGNS

The clock screen is one of the most seen screens and is shown when the product is idle. Below is an example on a refrigerator with a proximity sensor. In the far view, notification items are hidden for a clean look — showing just the clock and date. As the user approaches, any necessary notifications will appear.

 
 

The home screen provides simple access between manual and assisted modes.  

 
Home Screens
 
Favorites

Saved favorites can be accessed through the favorites menu and are organized by time of day. This is done by tapping the icons at the top.  

Here, users can also view history, see suggestions, and create favorites from scratch.

 

In the tools menu, users are presented with quick access to the most common tasks at the top. Other less common tasks are found by scrolling down.

Tools.jpg
 

Below is an example flow of programming a microwave to cook for 4 minutes from idle.

 
 



 
 

+

PRODUCT IMAGES

 
Refrigerator Render
 
 
Range Render
Microwave Render
Oven Render