Coffee Machine UI

Client: Shark/Ninja

Capabilities Performed

Graphic Design
UI/UX Design
Prototype Design
Hardware Design

A stainless steel Ninja coffee machine and espresso maker placed on a kitchen countertop with bottles, flowers, and a window in the background.

Part 1: Visual Design Explorations

Part of my participation in this project was to explore various visual designs for this product, from digital screen UI elements, iconography, physical button layout, and physical affordance characteristics.

Control panel for a coffee brewing machine with options for coffee type, strength, temperature, shots, volume, foam, and milk additions

Array of camera shot selection sliders with different toggle styles, including dark and light modes, on a black background.

A digital user interface for a coffee machine with options for drink type, strength, temperature, and shots, featuring illustrations of different coffee styles like espresso, latte, cappuccino, and cold brew, with a large orange 'start' button at the bottom.

Screen of a coffee brewing machine with options for beverage type, temperature, shots, froth type, and milk type, including a start button in the center.

Part 2: Prototyping

Building the Components

In order to help the team stress test various interaction models for the product, I built a series of prototypes in Figma to simulate the identified set of use cases. To most efficiently test and iterate on these interaction models, it was key for me to start by building a flexible and extensible set of interactive components. These components allowed me to quickly respond to feedback from team for new learnings.

Diagram of a control interface, including sections labeled Coffee-Settings, Drinks, Dial-Display, Froth-Settings, and Progress. The diagram displays various icons and controls for customizing coffee machines or beverage dispensers, with detailed sub-sections and buttons visible.

Screenshot of a user interface settings menu for a feature called 'Froth-On-Off,' which includes options for enabling it, selecting milk type, recommended status, and Froth-Type with various states and icons.

Screenshot of a dark-themed coffee setting interface with options for adjusting strength, shots, temperature, self-service, and customization, displayed with dotted and solid circles and sliders.

Screenshot of a digital interface for managing froth settings in a brewing or beverage application. It shows various sections with icons and labels, including options for milk type, froth dots, froth settings, and other customization controls, all outlined with purple dashed borders.

Creating the Prototype

Once I had the components for the prototype built, the next priority was to align with the team on the primary use cases that we wanted to test. Knowing these primary flows would allow me to focus on building the functionality that would best help us learn how to support the target customers.

A black screen displaying a detailed text document with instructions related to testing drink customization options such as cappuccino and cold brew, including steps for selecting drinks and using LED indicators and icons for recommendation types.

A screenshot of a complex digital flowchart or diagram with multiple interconnected nodes and pathways, labeled with terms related to coffee brewing processes.

Increasing the Simulation

Because this product UI included a direct touch interface, it was key to get as close to that interaction as possible. Using an iPad and the Figma app, the team was able to more realistically test our prototypes, versus having to interact with them on a computer/non-touch interface.

A desk setup showing a desktop monitor, a laptop, and a tablet device, all displaying control interfaces for coffee brewing machines.

See it in Action

A black and white digital coffee machine with various buttons and options for brewing different types of coffee, adjusting strength, temperature, and shot settings.