GE Appliances
Cafe Specialty Drip Coffee Maker


In the summer of 2019, while interning in GE Appliances, I participated in the design of the Cafe coffee maker. As a UX design intern, I built a functional prototype with JavaScript for usability testing led by the UX research team. I also collaborated with the industrial design lead and a senior industrial designer who are in charge of the design of the coffee maker for design consultation and consolidation on design decisions.

Product Page →

Team:
Lauren Platts (Industrial Designer)
Emily Wise (Industrial Designer)
Joel Persinger (Human Factors Researcher)
Johnny Gong (Me, UX Design Intern)

Role & Duration
Prototyping, Testing, Design Proposal
1 month

Tool:
Sketch, Figma, HTML/CSS/Javascript

Goals

1. Quickly build a digital high-fidelity functional prototype to test the usability of the physical user interface of the coffee maker within a month.

2. Pinpoint usability issue as well as other user experience pain points to facilitate design iteration along with the prototyping and testing.

Final Prototype

The final prototype used in the usability testing, which I built independently, is shown below.

This is an interactive prototype if you are browsing with a PC/laptop. To simulate knob rotation interaction, you may press "A" on your keyboard for rotating counterclockwise or press "B" for clockwise, and "C" for pressing the knob. Since the prototype is built merely for testing purposes, it only works within limited capabilities. Please refresh if wonky situations happen (e.g. overlapping text).

Original Design

The original interface design wireframe is shown below. The whole interface is composed of a seven-segment display, LCD for time, temperature, strength, and other settings, three buttons — Brew Cycle, Temperature, and Auto On — and a knob for starting brew and cancel.

Original UI Design (Fully Illuminated interface)

Prototyping & Testing Setup

The usability testing was scheduled three weeks after the prototyping task was assigned to me. Within this short time limit, our researcher discussed with me to confine the testing of how people would interact with the coffee maker in the following four user flows:

  1. Set up brew cycle and brew coffee
  2. Set up a clock for the machine
  3. Set up an auto-brew program
  4. Descale

I first translated the user interface into a flowchart for examining potential usability issues (e.g. dead end) and creating the structure for the programming and defining the variables for the prototype. It also gives me the tool for me to communicate with the industrial designer and user researcher about potential design problems through the lens of user flow:

User Flow Chart, Three iterations (Click here to view in a new page)

The overarching goal of the testing is to see the success rate of each task and the perceived difficulty level — how people interpret the elements of the prototype and act upon them. In other words, we aim to test the role and the look & feel of the coffee maker.

Outcome & Impact

After three rounds of iterative design, prototyping, and testing, we enormously improved on the usability and experience of the interface. The final prototype I built is the refined product interface that is ready to hit the market.

We gauged pass/fail rate (detailed data unreavled) at the first test which shed light on the second and third iterations
SUS score of the first iteration/test and the second iteration/test
Average time on task drops after second iteration (A: Brew, B: Cancel, C: Descale, D: Set Clock, E: Auto Brew)
Perceived difficulty drops after second iteration (A: Brew, B: Cancel, C: Descale, D: Set Clock, E: Auto Brew)

Reflection | What I Learned

Cross-functional Collaboration

It was my first time working closely with two industrial designers and a human factors researcher. It was delightful to learn how industrial designers view usability and understand user experience design workflow and also how human factors metrics should be applied to testing and improving usability and experience.

Hybrid prototyping

Using a digital screen to simulate the interaction of a physical interface is mind-blowing. Beyond the screen, there are a lot of factors that may influence the interaction and usability of the product. For example, the texture of the knob may act as a signifier for rotation which lacks in digital screen UX. In this project, the physical model of the interface had been already tooled. Therefore it didn't leave much room for the change of the screen. In this situation, We have to think about how to improve the interface with the existing design features (the number and position of the buttons). In other words, the challenge becomes how we can enhance the experience by changing the user flow and text on the interface with no change in the physical control elements. It was an exciting and mind-blowing experience.