Next Gen Design System

Transforming HR at Starbucks: Building a Component Library for Efficient Development & internal Starbucks applications.

Overview

In my time as a lead digital product designer at Starbucks, I led the design and development efforts of a data-driven component library for internal applications in the Data & Analytics Organization apart of Starbuck’s Technology. During this time, I was responsible for the entire lifecycle of the component library, from design conceptualization to implementation, maintaining documentation, and collaborating closely with other design teams, development teams and internal Starbucks business stakeholders.

The objective was to standardize UI components, improve consistency across platforms, and empower development teams to build efficient, user-friendly internal tools.

 

  • Consistency Across Apps: Establish a unified visual language and design system for internal applications used in HR, finance, and business operations.

  • Efficiency & Reusability: Create reusable components to streamline the development process and reduce redundant code across teams.

  • Ease of Maintenance: Develop and release the project as a standalone library that can be easily integrated and updated by multiple contributors.

The Challenge

Organizational Inconsistency: Many of the teams in our organization worked with similar technology stacks but developed apps with various approaches that lacked visual consistency, leading to a disjointed user experience.

Code Redundancy: Similar frontend code was being developed and deployed independently by different teams, and most of the frontend code was not regularly maintained.

Personnel Fragmentation: Development teams were somewhat fragmented and siloed in their day-to-day work and areas of expertise.

Solution

Integrated Styles & Design Language

Collaborated closely with other design and development teams to ensure that the component syntax and core colors, styles, and typography aligned with any existing conventions.

We also met regularly and presented to the brand design teams to ensure our component library followed the already established Starbucks Creative Expression guidelines.

Reusable Components

Established a core set of the most common user interface components that built off of some of the existing frontend standards in our organization plus a suite of components borrowed the MUI component library.

We introduced a number of new components including calendars, datepickers, tables, and navigation variations that weren’t previously standardized across existing internal applications.

Reusable Components

Successfully deployed and made regular updates to the component library and installed and used it in a number of internal applications used for reporting, financial tracking, resource management, and business operations.

The component library was initially used by a handful of teams before gaining wide adoption across a number of teams and apps.

Note: screenshots are approximations of final application designs.

Results & Impact

Success Metrics

User Adoption: Positive feedback from business stakeholders and other engineering teams resulted in a swift adoption of the new component library.

Duplicated Code Reduction: The library included 40+ new reusable components and was integrated into 15+ internal applications.

Developer Efficiency: The release of the component library introduced new resources and a shared mode of working for 8+ engineering teams within our organization.

Impact

The implementation of the component library resulted in a more streamlined, consistent, and user-friendly approach to application development within the Data & Analytics Organization.

Users of the applications that installed the library were impressed with the sleek look and feel and appreciated the improvements to overall user experience.

Onward

Reflections

The creation of this component library for internal apps at Starbucks was a transformative project for me and our team that showcased the impact of standardization and data-driven design on user experience and development efficiency. As the project lead, this experience reinforced our commitment to creating solutions that bridge the gap between design, development, and user needs.

  • Navigating Large Enterprise: This project provided a great understanding of the scope of working with multiple engineering teams and internal users in a global enterprise
  • Collaboration Takes You Places: Working with a number of other design and development teams showed me the power of collaborating with others
  • Stand on the Shoulders of Giants: Relying on proven existing technologies is a great way to move fast and prevent yourself from reinventing the wheel unnecessarily

Future Recommendations

For future projects, I recommend ongoing collaboration and feedback with end-users to adapt the component library to evolving needs. It would also be a good exercise to think outside of the box after initial components have been developed to identify opportunities for other reusable code to include in a library.

Technology Highlights

Trusted Framework

Along with most of the rest of the frontend teams in our organization, we built our component library to be compatible with the component-based React framework

Researched and Tested Components

We relied on a lot of the functionality provided by MUI to reduce overall dev time and decision-making around naming conventions and some software architecture

Effortless UI Development

Storybook provided the team a powerful platform for documenting functionality and behavior of the components while also serving as a dedicated environment for testing and development

Consistent Design Assets

All components were designed and maintained in Figma to ensure that every one relied on the same on-brand design assets and was easily updated when changes were required