Leading HelloFresh's design system transformation from fragmented tooling to a unified foudatiom serving multiple brands and markets

Recipe card for 4 different brands

Overview

When I joined as Design Systems Lead, the company was experiencing rapid growth but faced challenges with inconsistent design practices across markets. Multiple parallel systems for multiple different brands had evolved independently, leading to duplicated efforts and inconsistent user experiences. Our team was tasked with unifying these systems while maintaining the flexibility needed for local market and brands adaptations.

Source: HelloFresh Group

Context

HelloFresh, a global meal-kit company operating across multiple markets, faced significant challenges with their design infrastructure:

  • Multiple parallel systems with varying maturity levels
  • Inconsistent tooling and documentation standards
  • Different theming technologies
  • Limited cross-team collaboration
  • Low adoption rates of existing systems
  • Duplication of efforts across teams

A fragmented system of tools and processes

1. Tool Migration & Consolidation

  • Migrated all design assets to Figma as unified platform
  • Created new file structure and version control system
  • Established clear project hierarchy for production and experimental work
  • Implemented new bug tracking and enhancement workflow

New file organisation
Migration to Figma
Overview of visual results. Illustrator: Rodrigo Fortes
Screenshot of the web platform
Mobile App

2. System Architecture and techincal implementation

Developed a three-tier complexity and control architecture:

Foundations & Base Components

  • Strict standardization
  • Maximum reusability
  • Context-agnostic design

Modules/Sections

  • Brand-specific patterns
  • Built using foundation components
  • Balanced standardization with flexibility

Custom Components

  • Highly specific use cases
  • Minimal standardization
  • Careful implementation

Technical Implementation

  • Standardized design tokens for foundational elements
  • Implemented styled-system for themeable components
  • Created flexible block components supporting multiple style properties
  • Developed comprehensive documentation system

Tonal scales for the different brands
Button component explainer
Source: Figma blog post on Zest, HelloFresh's Design System

3. Building Scalable Habits

Implemented comprehensive adoption strategy:

  • Created interactive onboarding documentation
  • Established Design Lab for support
  • Developed custom Figma plugins for automation
  • Set up regular workshops and tutorials
  • Created video content for asynchronous learning
  • Implemented automated reporting systems

Goal
Tools
Screenshot taken from our internal documentation

Results

Adoption Metrics

  • Web Components: 10,304 average weekly insertions
  • Apps Components: 7,824 average weekly insertions

Coverage increases:

  • Homepage: 94.36% (+18%)
  • Menus and Recipes: 87.66% (+12%)
  • Account Settings: 66.64% (+3%)

User Satisfaction

  • Quarterly sentiment surveys showed improvements in:
    • Quality perception
    • User confidence
    • Development speed
    • Ease of contribution
    • System completeness

Business Impact

  • Reduced development time for new features
  • Decreased technical debt
  • Improved cross-team collaboration
  • Significant reduction in design inconsistencies
  • Lower maintenance costs through consolidated tooling

Client

HelloFresh

HelloFresh SE is a Berlin-based publicly traded meal-kit company and the largest meal-kit provider in the United States, with operations across Europe, North America, and Oceania.

My Role & Team

Design Systems Lead

Led a Design Operations team of 4 designers responsible for the Visual Language, UI components, documentation, and tooling across all HelloFresh Group brands and platforms.