Creating a Design System that Revamps Panera's Digital Ordering Experience

Design System

Visual Design

Strategy

Documentation

Token Management

ROLE
‍UX Designer (Contract)

PLATFORM
‍App, Mobile Web, Desktop Web, Kiosk

TEAM
‍‍Design Systems Lead + Me
XFN: UX, Eng, PM, Brand

TIMELINE
‍Jul 2025 - Feb 2025 (Updated: Dec 2025)

overview

Panera Bread is replatforming their in-store kiosks which presented an opportunity to address years of accumulated design debt across their digital ecosystem

Web

Catering

In-store kiosk

App

While a pattern library existed, there wasn't a true design system behind it

Spacing, hierarchy, interaction logic, and visual treatment varied from surface to surface, causing the same components to behave differently across platforms. The entire experience felt dated and fragmented.

Current pattern library with components without loose usage guidelines, no foundations, and unorganized components

discovery: cross functional workshops

I facilitated sessions with designers and PMs to inventory existing components across all platforms

A product card workshop I led

👀

Goals: Review the current state, gather feedback across the experiences, understand the current system inconsistency and historical context behind designs, and separate what was actionable now from what belonged in a future state

audit: pattern analysis

I catalogued variations of shared components across platforms to identify inconsistencies and gaps in documentation

For example, we uncovered 20+ product card implementations that deviated from the pattern library: each with different padding, color usage, and interaction states, and many undocumented entirely. This audit made differences visible and clarified which variants and platform-specific requirements needed to be formalized in the system.

Initial Product Card Audit of what's currently live

prioritization + strategy

I worked with my lead to prioritize components based on replatforming timeline, engineering needs, and frequency of use in key user flows

Slide from progress update to our business stakeholders (Dec 2025)

We landed on a phased approach starting with foundational elements (typography, colors, spacing, etc.) before moving to an initial set of high-impact components selected in close collaboration with the kiosk replatforming team.

design + documentation

For each component, I made sure to follow this 4 step method during exploration

1. Modernization with Purpose

I researched current best practices and identified opportunities to improve usability while maintaining brand recognition. Throughout the process, I grounded decisions in the needs of our core audience, Panera customers who tend to skew older, using research as inspiration while thoughtfully choosing patterns that would feel familiar, accessible, and easy to use.

E.g. sifting through different DS documentations to understand the current state that we can borrow from

2. Cross-Platform Thinking

I designed responsive components for mobile, web, and kiosk, accounting for differences in input, screen size, and context. I audited each component to distinguish necessary platform-specific variations from inconsistencies, and documented present-state requirements versus future enhancements to align with engineering timelines.

E.g. in ingredient customization selector, pill button sizing and icon scale were intentionally adjusted to support both min and max screen sizes while preserving usability and visual consistency

3. Accessibility-First

I ensured all components met accessibility requirements from the outset, including color contrast ratios, keyboard navigation, focus management, and screen reader compatibility. I audited existing user flows to identify compliance gaps and documented required updates to support underserved use cases and prevent retroactive fixes.

E.g. carefully selecting colors on digital for accessibility that still reflected the brand identity

4. Living Documentation

I created and maintained documentation in ZeroHeight, defining usage guidelines, do’s and don’ts, and anatomy breakdowns, with supporting code references in Storybook for engineering handoff. I continuously iterated on the documentation based on team feedback to keep it accurate and usable.

I created over 50+ visuals to help visualize common mistakes teams can make when using the DS

user validation + testing

Creating reusable components was only valuable if they actually improved the customer experience. To validate our work, I partnered closely with the kiosk replatforming team

Redesign & Collaboration

We rebuilt key ordering screens using the new design system!

We applied the improved foundations and interaction patterns to create more intuitive flows.

This collaboration ensured components weren't just theoretically reusable, but actually solved real user problems in context.

New designs using our foundations + components, designed by the kiosk replatforming team

User Researcher Partnership

Coordinated testing sessions in Nov/Dec (strategically timed to validate designs before the February 2026 rollout)

We tested redesigned screens to ensure:
• Visual hierarchy guided users through ordering flows
• Interaction patterns felt intuitive and reduced ordering friction
• Accessibility improvements (contrast, readability, touch targers) performed in real-world conditions

Our talented researcher conducted usability testing some key kiosk user flows at one of our cafes

Iteration based on Insights

Testing revealed many recommendations, for example, that the floating cart icon wasn't as visible as we expected, and so that added an iteration to our sprint.

These insights fed back into the component library. It allowed our team to iterate based on real insights.

Slide of recommendations from usability testing presented to stakeholders

collaboration + adoption

Throughout this process, I worked very closely with the design team, eng, and brand:

Design Team Collaboration

Presented component explorations to the wider design team weekly to gather feedback, validate direction, and ensure system decisions supported product needs

Design share speaking about the new color palettes we created for the subscription service team

Engineering Partnership

Held weekly office hours with frontend engineers to align on feasibility, clarify implementation details, and educate the team on design tokens, ensuring components were practical, buildable, and ready for adoption.

Brand Alignment

Worked with brand team to ensure components reflected Panera's visual identity evolution while improving usability

Contrast checker I created using Claude to easily distinguish AA color pairings for our Brand team

impact

Not only did we deliver foundational system in time to support the February 2026 kiosk rollout deadline, this work also achieved:

50k

Design Cost Savings

Design: 30% reduction in time on task
Dev: expected integration early Q1 2026

~40%

Design Efficiency

4 designers experiencing <50% WCAG guidelines inherited

2.6m

Annual Cost Savings

Design: ~12hr decrease in time per component
Dev: ~14-34hr decrease time per component

reflection

What I Learned

Honoring a design system doesn’t mean staying inside it

I came into this role believing my goal was to replicate Panera’s current visual language. With encouragement from my amazing lead (shoutout Mau!!) I reframed that mindset. I used the system as a foundation while confidently exploring new patterns and pushing for what I believed was better design.

Design systems demands constant refinement

I learned that a design system is never a “checked-off” task. I initially expected to complete a batch of components and move on, bure rhe reality required continuous iteration: adapting to feedback, evolving requirements, and real usage over time.

Balance modernization with familiarity

Improving usability while respecting existing mental models required intentional tradeoffs and customer validation. Partnering closely with our researcher was critical in validating component decisions before scaling them!

next steps

What's next?

I am leading the delivery of the V2 component set, developing educational resources on design tokens to drive adoption, and expanding documentation for patterns and components. I am also researching recommendations to modernize and streamline the Panera digital ecosystem through our DS, focusing on expressing warmth, lightness, simplicity, and ease of use.

Creating a Design System that Revamps Panera's Digital Ordering Experience

Thanks for being here. ٩(｡•́‿•̀｡)۶