Starbucks Pro
Design System
The Intention:
Unify IoT equipment interactions to streamline the overall café experience.
For two years, I worked closely with Starbucks, leading interaction design for a future-focused approach to crafting drinks. Our small design team at Tactile worked directly with Starbucks stakeholders, product owners, engineers, industrial designers, and baristas to create a comprehensive design system for equipment interfaces. One of my projects was presented directly to the CEO.
By integrating insights from these diverse teams, we created tools that seamlessly bridged user needs with operational goals. My work ensured our designs were both functional, intuitive, and could scale to future needs and hardware.
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
Tactile’s expertise in designing both the physical and digital interfaces for Starbucks store equipment enabled us to develop a cohesive design system.
Despite our extensive work on Starbucks interfaces, an official design system had not been established. Many of the interfaces relied on third-party equipment suppliers, who often lacked a full understanding of the stores' comprehensive needs.
This gap presented an opportunity to collaborate with internal teams and suppliers to establish a system that would ensure consistency and meet the practical demands of the store environment. Our approach not only addressed these challenges but also laid the foundation for a more cohesive user experience across all touchpoints.
Kick Off With Research
A Tactile UX Researcher held virtual interviews with Starbucks employees about current and future equipment and in-store experiences. Our entire team frequently consulted with the Starbucks Operations group, whose insights helped us improve our designs. All gathered information was synthesized and used across different device UI projects.
Audit & Create User Flows
While creating UX/UI designs for a device, my team and I reviewed existing interfaces and mapped out user flows for new products. We collaborated with developers to identify any technical limitations or issues. I drew on interactions from similar devices and consulted with baristas and the Operations team to determine the best ways to use the products.
Wireframes for new device
Assess Use of Screens
When creating a hardware prototype, it can be faster to program interactions with a screen. Yet my role involved working with the Starbucks team to decide if screens, or their sizes, could be distracting or make the work environment feel cluttered.
Options for how two baristas could share a screen
My sketchbook of design considerations around physical and digital interactions
Our Tactile team explored thoughtful use of animation to convey actions
Optimizing Interaction Patterns
The Starbucks Professional Design System was built on practical interactive elements and easy-to-understand patterns. This system makes devices easier and more pleasant to use for Starbucks team members. For the visual design, we chose a simple color scheme of black and white with copper accents. The copper color reflects the high-quality materials found in upscale Starbucks Reserve stores, giving baristas a sense of pride in their craft.
Tested at Tryer
We mainly worked with Starbucks in their Tryer Lab, testing new devices and systems with baristas. We regularly tested each part of the design with the new devices. Throughout the year, my team and I worked closely with product owners, hardware engineers, industrial designers, developers, and suppliers to build a practical and robust system.
The Results:
Tactile created a holistic, clear and user-friendly design for all connected devices. This Starbucks Pro Design System makes all devices consistent experiences and therefore easier to use and engaging for store staff. It also simplified new product development, leading to a more unified future for equipment.
My Thoughts for the Future:
A design language system should be more than just a static collection of components. It needs to be flexible and adaptable for future devices. It should also give product owners the confidence to ask important questions and innovate efficiently. While our work mainly focused on screen interfaces, future efforts should include interactions beyond screens. This could involve using CMF (Color, Material & Finish) and lighting design to improve legibility and affordance for all interactions.
A Background on Starbucks IoT
Tactile created a web-based IoT Dashboard for Starbucks, allowing real-time tracking of equipment data from stores across the country. To show shareholders how IoT is integrated at Starbucks, I wrote and made a video animation highlighting the dashboard and its advantages.
The process for crafting the video
We had a few weeks to make the video for the Shareholders meeting. I worked with the Tactile UX Director and our stakeholder to collect and organize content, improving the text and visuals into storyboards. After the client approved the storyboards, I guided our illustrator to develop a matching illustration style. Once finished, I combined all the elements into a video using After Effects.
