Business Context
Delivery Hero operates a global food delivery platform serving millions of users across 70+ countries. Years of rapid growth had left the frontend fragmented — each product squad maintained its own component library with divergent patterns, inconsistent accessibility, and duplicated effort. The CAPE Design System was built to unify the experience, but adoption stalled because teams couldn't afford to pause feature work for migration.
Technical Challenge
Design and execute a migration strategy that could be adopted by 4+ product squads without blocking feature delivery. The challenge was that each team had different tech debt levels, different component abstractions, and different testing maturity — a one-size-fits-all approach wouldn't work. I needed to make migration feel like a gradual improvement rather than a disruptive rewrite.
Approach & Decisions
I developed a three-pronged migration framework: automated codemods for mechanical transformations (prop renames, import swaps), a component-by-component migration playbook that teams could follow at their own pace, and a shared testing harness that validated visual and behavioral parity between old and new components. I built custom jscodeshift transforms that handled 70% of the migration automatically — teams only needed manual intervention for components with complex state or custom styling overrides. For testing, I established a dual-layer strategy: React Testing Library for component-level behavioral tests and Playwright for cross-browser E2E regression suites. Each squad got a migration dashboard showing their progress, remaining components, and test coverage gaps. One decision I reconsidered: I initially planned to migrate all teams simultaneously, but after the first sprint I switched to a sequential rollout — letting the first squad's migration inform playbook improvements before the next team started.
Outcomes
All 4 product squads successfully migrated to CAPE within 6 months. Design debt was reduced by 60%, test coverage reached 90% across migrated components, and onboarding time for new engineers dropped from 2 weeks to 3 days thanks to the unified component API. The codemods saved an estimated 800+ hours of manual refactoring.
System Design
Key Technical Decisions
Migration Approach
Sequential squad rollout with playbook iteration
Simultaneous migration across all teams, Big-bang cutover
The first squad's migration revealed 15+ edge cases not covered in the initial playbook. Sequential rollout let us fix these before subsequent teams hit the same issues, reducing total migration time by an estimated 30%.
Automation Strategy
Custom jscodeshift codemods for mechanical transforms
Manual migration only, AI-assisted code rewriting, Find-and-replace scripts
jscodeshift operates on the AST level, making transforms reliable and reviewable. Simple find-and-replace couldn't handle JSX prop changes safely, and manual migration would have taken 4x longer. The codemods handled 70% of changes automatically with zero false positives.
Testing Strategy
Dual-layer: React Testing Library + Playwright
Snapshot testing only, Manual QA, Visual regression only
Snapshot tests break on any change, creating noise during migration. RTL behavioral tests verified that components worked correctly regardless of internal implementation, while Playwright caught cross-browser regressions that unit tests couldn't detect.
Before & After
Component Consistency
4 squads maintained 4 separate button implementations with different APIs, accessibility levels, and visual styles.
Single CAPE Button component used across all teams with consistent props, built-in a11y, and theme support.
New Engineer Onboarding
New engineers needed 2 weeks to understand team-specific component patterns and testing approaches.
Unified CAPE components and shared testing patterns reduced onboarding to 3 days, with the migration playbook doubling as documentation.
Want results like these
for your product?
Let's collaborate to build fast, accessible, and high-converting digital experiences that drive real business impact.
Let's Talk
Currently available for select consulting engagements and full-time roles.