Starbucks
Design System
Unify equipment interactions to streamline the overall experience.
The Intention
Awards
International Design Excellence Awards
Digital Interaction: 2023 | SILVER
For two years at Tactile, my main client was Starbucks. Much of my time was towards a project helping Starbucks develop the future of café equipment — a project I can’t show here. Yet in tandem with that work, I helped our larger Tactile team bring a new design system to life for Starbucks by working on specific new equipment.
In a typical Starbucks store, there can be 15-20 pieces of IoT-enabled equipment. Some of that is custom built by Starbucks. Other items (like ovens) are built by external vendors with a custom interface. So in order to streamline the overall experience for those working in stores, Starbucks asked Tactile to craft a common UX strategy and UI design system for all connected behind-the-counter equipment, now and into the future.
My Role
Senior UX Designer
UX Design
Visual Design
Art Direction
Motion Design
Extra Credit
Tactile – Seattle
Marcus Pape – UX Director
Ben Mabry – UX Designer
Nick Ricci – UX Designer
Christie Tarazon – UX Researcher
Sample Project #1:
Starbucks Pro — Design System
For some years Tactile has been crafting both physical industrial design and digital interfaces for in-store equipment — leaving us well positioned to take up the challenge of a design system.
Even though we had been crafting Starbucks interfaces for some time, no design system had been officially established by Starbucks. Many interfaces relied on third-party equipment suppliers, who may not understand the full extent of the store needs.
Research
A Tactile team member conducted virtual one-on-one interviewers with Starbucks employees, covering existing and upcoming equipment and in-store experiences.
During the design process, we also utilized the Starbucks Operations group — a team which is a treasure trove of information that we constantly asked advice from and input on our developing designs.
Auditing and User Flows
When developing UX / UI patterns for a device, we had to either audit existing equipment interfaces or develop new user flows for untested devices. Many of the devices I helped with were entirely new products where I had to leverage interactions of similar devices, or ones in which I had conversations with baristas and the Operations group to find the right way to engage the device.
Should Devices Include Screens?
When developing a prototype, many times it’s faster to program interactions with a screen, especially if there are complex interactions. Yet part of my role is to help determine with the Starbucks team when screens (or which size screens) may become distracting — or even visually clutter the work environment.
My sketchbook of design considerations around physical and digital interactions
Standardizing Interaction Patterns
The resulting Starbucks Professional Design System is crafted from a foundation of highly functional interactive components and visually intuitive patterns. This system helps Starbucks and their partners realize a more accessible, enjoyable, and effective device experience.
While approaching visual design for the system, we employed a minimal color strategy of black and white plus copper accentuations. The simple use of the copper color gives all baristas a sense of craft pride by referencing physical materials seen in the higher-end Starbucks Reserve stores.
Tested at Tryer
Most of our work with Starbucks is within their Tryer Lab — a place where new devices and interactions can be tested with baristas. Over the span of a year, we worked with a variety of stakeholders to develop a system that was practical, not theoretical. While building out the System, we were constantly testing elements with new devices in development.
The Results:
Tactile delivered a holistic and intuitive design language for all of connected equipment. The resulting Starbucks Pro Design System improves device usability by reducing steps and streamlining the engagement experience for store members. It also helps optimize the Starbucks product development process. Our work with Starbucks helps pave the way for a more coherent and connected equipment future.
Expanding Steps:
A design language system must be more than a static library of components. It should be living and flexible to engage devices that don’t yet exist. And at the same time, it should give product owners confidence to ask the right questions to develop something new.
At this stage of deployment, the focus has been on screen-based elements. Yet Tactile looks forward to helping Starbucks expand the System to include non-screen based interactions. Which may include helping Starbucks develop a CMF (Color, Material & Finish) and lighting design that aids in all interactions, including screen-based ones.
Sample Project #2
The Background on Starbucks IoT
Tactile first designed a web-based IoT Dashboard for Starbucks where they could see live equipment data from stores across the country. To present how IoT works for shareholders, I wrote and created a video animation highlighting both the dashboard and how IoT integrates into Starbucks ecosystem.
Video Storyboards