Designing for Scalability: Taco Bell's First Atomic Design System
In 2022, I was brought in as one of Taco Bell’s first two in-house product designers to tackle a foundational challenge: the lack of a unified design system. Before this initiative, the company relied on a fragmented ecosystem of outdated tools—Photoshop, Adobe XD, Sketch—used inconsistently across third-party agencies. This patchwork led to inefficiencies, design inconsistencies, and long revision cycles 😬
Working closely with my direct manager, engineers, and fellow product design lead Kyle Conrad, we shaped Taco Bell’s first Atomic Design System. We aligned on schedules and priorities to centralize and standardize UI patterns across iOS, Android, responsive web, and kiosk platforms—enabling smoother handoffs, faster production, and consistent brand execution.
Discovery & Audit
I kicked off the project with a comprehensive design audit across all platforms—mobile app, web, and kiosks. The goal was to surface inconsistencies, uncover design debt, and assess how well (or poorly) existing patterns held up against best practices.
Key Actions:
• Migrated Sketch and XD files into Figma for a centralized design workspace.
• Identified components that violated 8px spacing rules, broke accessibility standards, or varied inconsistently across platforms.
• Cataloged visual elements and design patterns to establish a baseline for systematization.
This audit laid the groundwork for componentization and helped highlight where custom components or redesigns would be necessary.
System Design & Strategy
I applied Atomic Design principles to break UI elements into a hierarchy of atoms, molecules, organisms, and templates. This modular approach allowed for maximum reusability and easy scaling across multiple screen sizes and platforms.
Key Design Moves:
• Defined and built scalable UI components—buttons, inputs, modals, cards—with a mobile-first mindset.
• Developed platform-specific libraries (iOS, Android, web, and kiosk) while preserving a cohesive design language.
• Integrated shared design tokens (colors, typography, icons) to maintain brand consistency.
Centralized System Creation in Figma
The new design system lived entirely in Figma, giving the team a single source of truth and eliminating the confusion of platform-specific file versions. I created master libraries and reusable templates for mobile and kiosk platforms.
Key Features:
• Component libraries for app, web, and kiosk UIs.
• Shared styles and variables for colors, typography, spacing, and icons.
• Scalable layout templates for common flows (e.g., login, add-to-cart, checkout).
To support adoption, I hosted lunch & learn sessions to walk teams through the new workflow and toolsets.
Collaboration, Documentation & Enablement
I worked closely with engineers and product managers to ensure accuracy in implementation. Regular design reviews and spec reviews helped ensure fidelity to the design system. At the same time, I built out clear and comprehensive documentation to ensure long-term adoption and cross-functional alignment.
Key Contributions:
• Aligned with dev teams on token implementation and accessibility considerations.
• Validated that live builds mirrored the Figma components pixel-for-pixel.
• Partnered with stakeholders across marketing, content, and loyalty to address edge cases and platform-specific needs.
• Created component usage guidelines (e.g., when to use each type of CTA button).
• Documented style specs (e.g., mobile-safe character counts, video, and image exports).
Outlined best practices for accessibility, naming conventions, and version control.
These resources empowered designers, developers, and content teams to work independently and confidently within the system.
Results
The Atomic Design System streamlined Taco Bell’s digital design process and delivered measurable impact:
• 1.2k+ components created across all platforms
• 552K+ instances used in the past year
• 12k+ instances used every week
•Faster production cycles with reusable components
•Improved design-to-dev handoffs and fewer implementation discrepancies
•Enhanced platform consistency, eliminating outdated or redundant patterns
•Greater autonomy for cross-functional teams with well-documented guideliness
This design system helped Taco Bell scale design operations, reduce technical debt, and create more delightful user experiences—whether on your phone, the web, or a kiosk at the store.
