Buttons that looked like trim
The narrow metal bars blended into the machine’s finish. Their appearance gave little indication that they were pressable controls, and the icons above them had no text labels.
KitchenAid Espresso Machine Redesign
A course project examining how a KitchenAid espresso machine communicates its controls and operating states. An interactive browser prototype demonstrates the proposed interface.
Usability Analysis · Norman’s Design Principles · Prototyping · HTML/CSS/JavaScript · Vercel
- Problem
- The machine’s controls were difficult to distinguish from its decorative trim. Some settings required instructions from the manual, while indicator lights changed meaning depending on the operation.
- Process
- Daily use and a review of the manual informed an analysis using six of Norman’s design principles. The findings guided a redesign of the control panel.
- Result
- An interactive prototype with labeled controls and visible temperature settings. It simulates machine states, including a low-water warning that blocks operation.
01Problem
What was difficult to use
Using the machine regularly drew my attention to four areas where the interface provided little guidance.
Indicators that depended on context
Blinking lights could indicate preheating or a cleaning step waiting for input. Understanding the signal required knowing which operation was underway.
An unclear operating sequence
The panel gave little guidance on the relationship between choosing a mode, selecting one or two shots, and starting the operation. Button placement did not make that sequence apparent.
Hidden temperature settings
The manual explains how to adjust temperature by selecting Espresso and holding the Mode button for three seconds. The panel itself did not indicate that this setting was available.
"They needed a way to designate which parts could be touched, slid upward, downward, or sideways, or tapped upon."
— Donald Norman, The Design of Everyday Things (2013), p. 34
02Process
Reviewing the controls with Norman’s principles
The framework helped turn observations from daily use into specific design questions.
- Signifiers
- What indicates that a surface can be pressed, and what does each control do?
- Affordances
- How do the physical shape and placement of the controls support pressing them?
- Feedback
- What tells a person that an action was accepted or an operation has finished?
- Mapping
- How does the arrangement connect each control to its function?
- Conceptual model
- Can a person understand the relationship between selecting a mode and starting it?
- Constraints
- Which actions should be unavailable in a given machine state?
03Redesign
Making controls and machine states visible
The proposal retains the machine’s red finish and horizontal bar controls. Changes focus on making those controls recognizable and explaining what the machine is doing.
- Narrow bars that resemble decorative trim
- Icons without text labels
- Temperature adjustment accessed through a long press
- Indicator meanings that depend on the current operation
- One control cycles between espresso, steam, and hot water
- Controls presented without explicit functional groups
- Thicker bar-style buttons with a more distinct control surface
- Icons paired with labels such as Power, Single, and Double
- A visible Temp button with Low, Medium, and High indicators
- Separate labeled indicators for Preheating, Ready, Brewing, Steaming, and Cleaning
- Separate Single, Double, Steam, and Clean selections in the prototype
- Groups labeled Setup / Power, Mode Selection, and Start / Stop
The original machine already has a Start/Cancel control. In the redesign, grouping and labels make the selection-and-execution sequence more explicit. Selecting a mode highlights it; Start / Stop remains locked until a mode is selected.
I had to watch the indicator lights to know when preheating was complete. In the prototype, three long beeps mark readiness or completion. Two short beeps accompany cancellation or an attempt to use a locked control.
The prototype also includes a simulated Low Water state. A separate yellow indicator blinks, and all controls except Power are locked until that state is cleared.
04My Role
My role and AI collaboration
This project was built in collaboration with AI; the design decisions, content, and direction are mine. I used the machine, chose which problems to address, and decided how the redesigned panel should respond. AI assisted with the written analysis and with building the browser prototype.
05Outcome
What the prototype demonstrates
The deliverable is an HTML/CSS/JavaScript prototype that runs in a browser. It demonstrates the proposed control behavior through simulated heating and operating states.
The prototype provides a way to review the sequence from powering on to selecting and running a mode. Its simulated low-water state also makes the proposed lockout behavior available to inspect.
An evaluation with first-time users would be needed to establish whether the redesign is easier to understand. That evaluation could focus on four tasks:
-
01
Select and start a mode. Choose a single or double shot and distinguish selection from starting the operation.
-
02
Adjust temperature. Find the setting and change it while the machine is ready.
-
03
Interpret machine status. Identify whether the machine is preheating, ready, or running.
-
04
Respond to low water. Recognize the warning and understand why the controls are unavailable.
A browser prototype cannot establish how the physical buttons feel or validate the appliance’s safety behavior.
06Reflection
What peer review changed
Peer review led me to make the comparison between decorative trim and pressable buttons more explicit. Readers could then connect the analysis to a visible feature of the machine.
The project also helped me separate two questions: whether a control supports an action, and whether its appearance communicates that action. Keeping those questions distinct made the reasoning behind the redesign more precise.