2024 · [SHIPPED] · Senior UX/UI Designer and Front-End Developer
End-to-end design system leadership for a multi-brand mobility platform.
01 The challenge
Far more than screen redesign: multi-brand token governance, atomic architecture, React Native components, a full booking flow audit, pixel-accurate Figma-to-code handoffs and every piece of brand communication for the company.
02 What shipped
Multi-brand system governance
Atomic design system from Foundations to Patterns, migrated to a three-level token architecture with automatic brand switching.
Booking flow audit
Around 44 booking screens audited against the official journey checklist; the missing update, cancel and extend journeys designed from scratch.
React Native migration checkpoint
Four codebases unified into one app, with Daniel as the human checkpoint the AI build pipeline consults when a component does not exist yet.
Payments verified against production
14 payment error states rebuilt pixel-perfect for Android and iOS from real production recordings.
Design-to-code in production
A partnership landing hand-built in HTML/CSS/JS from a Figma API extraction pipeline, QA automated with Playwright.
03 How it was built
04 What we learned
A pipeline reported a component as ready when its code never reached main. Caught by reading the git history, closed with a follow-up PR.
Before rebuilding 35 screens from scratch, a mature production library was found and migrated instead, keeping proven work.
05 Try it live
Working pieces from this project, rebuilt as demos you can use right here.
01
Migration pipeline
Replica of the AI assisted build pipeline. Work packages move through tests and implementation; missing components escalate to a human.
Launch Mobility
launch.internal/pipeline
iterations 0 · ready 0/5
Queued
WP-1Button set
WP-2Booking card
WP-3Payment sheet
WP-4Rating stars
WP-5Spinner
Tests
Implementation
Escalated
Done
▸ pipeline idle · press Run
Anonymized replica of the Launch Mobility build pipeline. A human checkpoint resolves what the AI cannot.
02
Fleet map
Real time fleet visibility, the concept behind the booking flow. Pick a vehicle to follow it.