Ocado

Ocado - Creating a Component Library for Salt Design System

My role: Product Design, User Research

Company: Ocado

Product: Ocado App and website

Platform: Web, Android, iOS

Year: 2022

CREATING OCADO'S DESIGN SYSTEM

Ocado, a global leader in online grocery retail, needed a scalable, consistent, and efficient design system to streamline product development across its expanding network of retailers. Before the introduction of a unified system, design components were inconsistent, lacked standardization, and required extensive manual work for updates. This led to inefficiencies, longer design cycles, and misalignment across platforms.

As the lead designer on this initiative, my goal was to create Ocado’s first modular design system, ensuring consistency, improving collaboration between design and engineering, and reducing time-to-market for new features.

OBJECTIVES

Standardize UI Components
Develop a single source of truth for design across all Ocado platforms.
Improve Efficiency & Collaboration
Reduce design and development time by 30% through reusable components and clear documentation.
Enhance Scalability
Ensure that Ocado’s design system can support new retailers and future platform updates without breaking consistency.
Improve Accessibility & Usability
Create components compliant with WCAG 2.1 AA standards to enhance user experience for all customers.

THE PROBLEM

The lack of a centralized design system resulted in:
Inconsistent UI components across web and mobile platforms.
Time-consuming design and development workflows, requiring repeated component recreation.
Scalability challenges, making it difficult for Ocado’s partners to customize the platform efficiently.

How might we create a scalable design system that standardizes components, reduces redundancies, and accelerates design and development workflows?

Discovery

Prioritisation & Planning

Iteration & Testing

Discovery

1/4

METRICS

NORTH STAR METRIC:

Improve design-to-development efficiency by reducing component creation and update time.

SUPPORTING METRICS:

Leading Metrics:

Component Reusability: Increase adoption of system components by 80%.
Design Consistency: Reduce UI discrepancies by 90% across platforms.
Time Savings: Decrease time spent on new feature design by 30%.

Lagging Metrics:

Developer Handoff Efficiency: Reduce front-end UI implementation time by 40%.
Retailer Adoption: Ensure that 100% of Ocado’s partners adopt the design system for branding consistency.

DEFINING CORE COMPONENTS &TOKENS

Established foundational tokens for typography, color, spacing, and elevation.

Created scalable, responsive components with Variants, Auto Layout, and Constraints in Figma

Headers
Footers
Buttons
Cards
Alerts
Progress
Navigation bars
Notifications
FOPs
Much more...

TESTING & ITERATION

Conducted usability testing on the design system's documentation and component implementation to validate ease of use.
- Iterated based on feedback, refining accessibility and performance optimizations.

DOCUMENTATION

Integrated the design system with Tokens Studio and Storybook to bridge the gap between design and development.

Conducted internal workshops and onboarded teams on using the new system effectively.

Documentation

1/5

ROLLOUT

DEVELOPER COLLABORATION & ROLLOUT
- Integrated the design system with Tokens Studio and Storybook to bridge the gap between design and development.
- Conducted internal workshops and onboarded teams on using the new system effectively.

RESULTS

OUTCOMES
- Improved Efficiency:
  - 30% reduction in design time for new features.
  - UI discrepancies decreased by 90%, ensuring brand consistency.
- Seamless Theming & Customization:
  - The design system now supports all of Ocado’s future grocery partners, reducing future design debt.
- Scalability & Future-Proofing:
  - Ocado’s partners could now apply their branding in minutes rather than days.
- Faster Development Cycles:
  - Ocado’s partners could now apply their branding in minutes rather than days.
  - Developers spent 40% less time implementing UI changes due to well-documented, ready-to-use components.

WHAT I LEARNED

REFLECTION & LESSONS LEARNT
- Collaboration is Key:
  - Early involvement of engineers, designers, and stakeholders ensured seamless adoption and fewer revisions.
- Scalability Requires Planning:
  - Creating atomic design principles and design tokens allowed the system to evolve without breaking.
- Education & Documentation Matter:
  - Workshops and clear documentation were crucial for adoption, ensuring teams could effectively use the system.
- Iterate Based on Real Use Cases:
  - Continuous feedback and usability testing helped refine the design system before full rollout, making adoption smoother.