Transforming HR at Starbucks: Building a Component Library for Efficient Development
Developing a design system and component library for internal Starbucks applications
Project Overview
In my time as a software engineer at Starbucks, I led the development of a data-driven component library for internal applications in the Business Intelligence & Data Services organization. The objective was to standardize UI components, improve consistency across platforms, and empower development teams to build efficient, user-friendly internal tools.
My Role
As a senior application developer and the project lead, I was responsible for the entire lifecycle of the component library, from design conceptualization to implementation, maintaining documentation, and collaborating closely with other design and development teams and internal Starbucks business stakeholders.
Objectives
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.
Challenges
- 1
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.
- 2
Code Redundancy: Similar frontend code was being developed and deployed independently by different teams, and most of the frontend code was not regularly maintained.
- 3
Personnel Fragmentation: Development teams were somewhat fragmented and siloed in their day-to-day work and areas of expertise.
Solution
Key Contributions
Integrated Styles & Design Language
I worked closely with other design and development teams to ensure that the component syntax and core colors, styles, and typography aligned with any existing conventions.
I 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
I 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.
I introduced a number of new components including calendars, datepickers, tables, and navigation variations that weren't previously standardized across existing internal applications.
Release & Integration
I 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.
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
Tried & 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
Results & Impact
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 4+ 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 Business Intelligence & Data Services 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.
Reflection
The creation of this component library for internal apps at Starbucks was a transformative project for me that showcased the impact of standardization and data-driven design on user experience and development efficiency. As the project lead, this experience reinforced my commitment to creating solutions that bridge the gap between design, development, and user needs.
Lessons Learned
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.
PREVIOUS PROJECT:
TPC
E-Commerce Rebrand
NEXT PROJECT:
WA Department of Health
Vaccine Locator