Walgreens Design System
Task
At Walgreens, design operates at the intersection of healthcare, retail, logistics, and physical environments. Scale isn’t theoretical—it’s measured in millions of daily transactions, thousands of stores, and moments where clarity and trust directly impact real people. That reality shaped my role in building Walgreens 2.1, the design system that unified digital and in-store experiences across web, mobile, kiosks, and B2B platforms at Walgreens. This work wasn’t about visual consistency alone—it was about systemic impact, operational leverage, and designing platforms that could evolve for years.
Walgreens 2.1 needed to support:
- Consumer retail and regulated pharmacy workflows
- End-to-end payments and checkout systems
- Photo product creation and fulfillment
- In-store physical kiosks
- Internal and B2B partner tools
- Web apps and native mobile apps
My role sat at the intersection of system design and product execution, leading high-impact verticals while contributing directly to the core design language.
I led design across payments and the product suite for the Photo and Pharmacy verticals, two of the most business-critical and complex domains at Walgreens.
This included ownership of:
- Checkout and payment architecture
- Insurance-aware pharmacy transactions
- Multi-tender and partial payment flows
- Cross-channel fulfillment (ship, pickup, in-store)
Rather than treating payments as isolated screens, I approached them as end-to-end systems—from intent to confirmation—ensuring consistency across web, mobile, and kiosks.
Walgreens’ in-store kiosks introduced constraints that directly influenced the design system:
- Touch-first, no-keyboard interactions
- Accessibility across age groups and abilities
- High-glare, noisy retail environments
- Session recovery and timeout safety
Designing for kiosks forced clarity. Those learnings fed back into mobile and web patterns, strengthening the system overall.
Walgreens 2.1 also needed to scale beyond consumer UX into B2B and internal tools:
- Higher data density
- Administrative workflows
- Operational controls and reporting
The challenge was ensuring that the same system could serve different mental models without fragmenting. This required abstraction at the component and token level—classic principal-level system thinking.
For Product Listing Pages (PLP) and Product Display Pages (PDP), the work went far beyond layout and merchandising.
These surfaces became the foundation for a complete re-architecture of the payment and pricing model, including:
- Unified pricing logic across channels
- Promotion, discount, and insurance visibility
- Eligibility and availability signaling before checkout
- Early validation of payment constraints (especially pharmacy)
By redesigning PLP/PDP alongside payments, we reduced downstream friction and ensured that what users saw matched what they could actually purchase—a critical trust factor in healthcare retail.
Systemized Outcomes
- Standardized PLP/PDP components across categories
- Reduced checkout abandonment caused by late-stage payment errors
- Faster launch of new product types and fulfillment models
| Primary #A32A33 |
◯ |
|
Crimson
| Beige #DED5D0 |
◯ |
|
Clay
| Grey #F4F2EF |
◯ |
|
Neutral
| Primary Black for Text #413D3C |
◯ |
|
Charcoal
Beyond interaction patterns, I contributed to modernizing the visual language:
- A redesigned icon system for scalability and accessibility
- Updated graphics and illustrations aligned to healthcare trust
- Clear visual hierarchy for dense retail and pharmacy contexts
These assets were systemized—not decorative—ensuring consistency across hundreds of teams and touchpoints.
At the core of Walgreens 2.1 was a comprehensive component library covering:
- Commerce and transactional components
- Forms, validation, and error states
- Navigation and wayfinding
- Accessibility-first interaction patterns
Each component was designed with real operational constraints in mind: performance, compliance, and long-term maintainability.
Typeface
Tiempos Headline
Usage
Headlines
Instead of utilizing contrast purely for the purpose of mitigating who are excited about unique ideas and help digital companies.
Typeface
Inter
Usage
Subheadlines
Usage
Paragraphs
With more than 16+ years of experience, our team has become a leader in digital design and innovations.
While not all metrics were public, the impact of Walgreens 2.1 was measurable and sustained:
- Reduced design and engineering rework through shared components
- Faster time-to-market for new product and payment features
- Improved checkout completion rates through earlier payment validation
- Greater cross-channel consistency, reducing customer confusion
- Improved accessibility compliance across digital and physical touchpoints
Most importantly, the system became a platform for continuous evolution, not a static UI kit.
