Starbucks Pro
Design System

The Goal:

Create a cohesive design system for Starbucks’ in-store equipment, unifying digital and physical interactions to streamline the café experience.

For two years, I led interaction design as part of Tactile’s small design team, working directly with Starbucks stakeholders, product owners, engineers, industrial designers, and baristas. Our work bridged user needs with operational goals and culminated in a scalable design system for equipment interfaces and with one of my projects presented directly to the CEO.

My Role

Senior UX Designer
Interaction Design
Visual Design
Art Direction
Motion Design

The Tactile Team

Tactile – Seattle
Marcus Pape – UX Director
Ben Mabry – UX Designer
Nick Ricci – UX Designer
Christie Tarazon – UX Researcher

Awards

International Design Excellence Awards
Digital Interaction: 2023 | SILVER

Diagram illustrating the menstrual cycle phases.

Closing the Gap

Although Starbucks invested heavily in digital tools, its equipment interfaces were inconsistent and often built by third-party suppliers unfamiliar with store realities. Without a design system, baristas faced fragmented experiences across devices.

We partnered with internal teams and suppliers to create a unified system that aligned with Starbucks’ brand standards and met the practical demands of the café environment.

Our Approach:

Research First

A Tactile researcher interviewed baristas and operations staff to understand current pain points and future needs. And our entire team consulted directly with the Starbuck Operations group, who’s goal was to support baristas and team members at stores. These insights informed every device project.

A person sitting at a desk participating in a video call on an Apple computer, with another person visible on the screen.

Audits & User Flows

We audited existing interfaces, mapped user flows for new devices, and collaborated with engineers to address technical constraints. I frequently consulted with baristas and the Operations group to validate interactions.

Wireframes for new device

Screens or No Screens?

Part of my role was helping Starbucks determine when a screen improved usability, and when it created clutter or distraction in the café.

Diagram showing five concepts for device screens: no screen with red laser indicating focus, combined screens labeled 1+2, split screens labeled 1 and 2, and dual screens labeled 1 and 2.

Options for how two baristas could share a screen

Hand-drawn sketches and notes in a notebook about UI design, including layout ideas, labels, wireframes, screen types, and testing concepts, on a wooden table.

My sketchbook of design considerations around physical and digital interactions

Our Tactile team explored thoughtful use of animation to convey actions

Interaction Patterns &
Visual Design

The Starbucks Professional Design System was grounded in intuitive patterns and practical components. We paired a black-and-white base with copper accents inspired by Starbucks Reserve materials, giving baristas a sense of pride and consistency across devices.

A series of copper distillation apparatuses in a bar or restaurant setting.

Tested at Tryer

We iterated closely with baristas at Starbucks’ Tryer Lab, testing prototypes and refining designs in collaboration with engineers, product owners, and suppliers.

A young woman in a green apron and a man in a dark blazer are smiling and talking inside a coffee brewing lab with the sign 'BETA LAB' in the background.
Screenshots of a beverage customization and ordering app showing various steps including selecting flavors, customizing ingredients, dispensing, timing, and viewing order details.

The Results:

The Starbucks Pro Design System delivered:

  • A unified experience across all connected devices

  • Faster development cycles for new equipment

  • More intuitive, consistent tools for baristas

The work not only simplified operations but also set the foundation for a more cohesive future across digital and physical touchpoints.

Looking Ahead:

A design system should be flexible, not static. Future iterations can expand beyond screens to include CMF (Color, Material, Finish) and lighting design to create a richer language for affordance, legibility, and delight in every interaction.

Self-service coffee ordering kiosk with digital menu screen, surrounded by black coffee dispensers labeled 'Cinnamon Dolce' and 'Hazelnut'.
Multiple digital screens displaying a mobile app interface with a dark theme, showing various features such as a main menu, recipe options, and a beverage order screen, with icons, text, and images of food items.

Extending Starbucks IoT: Dashboard & Video Storytelling

The Dashboard

Alongside in-store applications, Tactile created a web-based IoT dashboard that tracked equipment data across Starbucks cafés nationwide. This gave Starbucks real-time visibility into performance and maintenance needs, helping operations teams act quickly at scale.

The Video

To highlight these innovations at the annual Shareholders Meeting, I wrote and produced an animated video that explained how IoT is woven into Starbucks stores.

Working with the Tactile UX Director and our client, I gathered content, refined the script, and translated it into storyboards. After approval, I guided our illustrator in defining a visual style, then combined all assets into a finished piece using After Effects.

The result was a clear, engaging story that showcased IoT’s value — both for Starbucks leadership and for shareholders — while reinforcing the company’s vision for technology-driven store experiences.

Multiple screenshots of the Starbucks Siren Sense mobile app interface with graphs, user login, and control panel screens displayed.

< Back to Portfolio

More Works:

A woman with short blonde hair and a brown sweater is seated comfortably in an airplane's business class seat, smiling and relaxing while watching a screen.
An off-road vehicle driving through desert terrain, kicking up dust, with sunlight illuminating the scene.