Starbucks Pro Design System
Starbucks approached Tactile to help them unify and streamline the product experience for their lineup of cafe equipment – think espresso machines, ovens, and sauce dispensers.. For about a year, I led this design effort.
In coordination with several ongoing equipment development projects and employing systems-level design thinking, the result is a powerful toolkit to help Starbucks realize a more intuitive, enjoyable and effective device experience, balancing the needs of baristas, product owners, and third-party external vendors.
Impact
Streamlined product development, improved accessibility and usability for Starbucks’s baristas.
Duration
12 Months
Contribution
Lead Designer
UX & Interaction Design
Visual Design
Prototyping & Deployment
Tactile has been a helping Starbucks build physical and digital experiences for their cafés for a number of years. Now was our chance to bring it all together – unifying user experiences across devices with a design system.
With disparate product teams and third party vendors collaborating virtually to develop this equipment, the creation of a design system was a huge opportunity for Starbucks to make foundational improvements to usability and the development process as a whole.
Having had a hand in Starbucks’s product development for several years, my team was well positioned to take on a full equipment design system.
Research
Discovery Interviews
16 Stakeholders, 11 Teams
The goal of these interviews was to understand the current landscape of devices and processes, as well as gather any intel on team needs/wants/areas of opportunity within Starbucks today.
Each interview covered questions on current equipment design, product development and the day-to-day barista experience in the stores. Through this process, I documented and uncovered common themes which would inform design principles and target our design effort in subsequent phases.
Crafting Design Principles
Once the interviews were complete, we evaluated the feedback to identify common themes of both problem areas, and things that Starbucks devices are already doing well. These themes acted as insights to help direct our explorations and focus our efforts on the most relevant areas that need design.
The resulting design principles responding to requests of a more intuitive and universal control set, aiding in comprehension of system states and available functionality. By leveraging available smart-technology and automation, we wanted the design system to free up the barista’s attention to focus on craft and customer interactions.
Phase 2
Existing Device Audit & Deep Dive
In this phase, I took a closer look at the most important elements across the digital UIs found on partner devices today. The goal of this exercise was to gain a clear understanding of existing features, patterns, and functions that would ultimately guide in the creation of new design system components. It was also important to evaluate the existing device UI against the new Design Principles to find what is being done well and what we can improve upon.
Construction begins on the library of common components – units gathered in the research and audit phases that appear most often in the existing device ecosystem. I recognized that not every potential use case could be accounted for and that some devices would likely require some unique components that deviate from the foundational set. These unique components would later be committed to the design system based on extensibility and utility.
Phase 3
Wireframing and normalization of common UX patterns.
The set of foundational UX components and UI patterns would act as a basis for all devices, drawing on common features and functionality within the ecosystem.
I began by creating device agnostic wireframes that described generic pattern behaviors for things like alerts and sequenced tasks. Each pattern was documented in a living file that was incrementally updated and refined as I began to validate in active projects and with Starbucks operations stakeholders.
Providing Status Boosts User Confidence
In order to ensure devices were intelligent, I focused my design efforts on status wherever relevant. I found through ad-hoc testing at Starbucks lab, that small bits of additional context or state changes greatly reduced partner mindshare and minimized screen diving.
Core System Layouts
The normalization of functionality generated five distinct layouts which makeup the foundation of the design system. These layouts were based on sequenced features with many steps, menu access, the need for control over settings, notifications, and a Home Screen that becomes a canvas for any unique controls if required.
Ease Alert Fatigue, Focus On Craft
One the main themes from conversations with Starbucks baristas is alert fatigue. Their workstations are complex and segmented, with each device demanding attention. In order to reducing this overwhelming feeling, I was careful to implement a set of notification behaviors that scale based on severity, employing minimal colors that are highly meaningful. Busy baristas can glance over their shoulders and quickly comprehend if there’s a critical error at their station.
Focus on Component Accessibility
To align with industry standards and Starbucks’s corporate goals, accessibility was at the forefront of all design decisions. I was methodical in choosing a high-contrast color palette, readable type ramp, and clearly defined interactive elements to ensure ease-of-use for all levels of experience, abilities, and store environments.
The system’s signature color, copper, was inspired by materials and finishes found in Starbucks’s Cafés. A multipurpose color used to gently call attention to highlighted elements, selected states, and status changes without distracting from core functions.
Representative device illustrations and iconography were developed for the system to aid partners in daily tasks, while conserving space and making the UI more intuitive & delightful.
Validation at the Tryer Lab
Much of what we developed with Starbucks was tested in their Tryer Lab – a place for experimentation, discovery, and validation with Starbucks baristas. While developing the UX patterns for the design system, we worked with the Lab to ensure our solutions responded to real barista needs, solving real problems they face everyday.
Scalability + Optimization
The design system has been optimized to scale elegantly across a variety of configurations and screen sizes – meeting the needs of existing devices today, while remaining flexible enough to accommodate future implementations.
