Mobile Design System
Leading UX and Dev to one source of truth for the driver-app UI
At a glance
I led the decision to build Transflo's mobile design system in Storybook and guided our Lead UX/Product Designers through it. The result is one living source of truth for the driver-app UI that both UX and Development build from, shortening the time between design and code without changing how teams hand off.
The challenge
UX and Development were working from separate references, so every handoff meant re-explaining colors, spacing and states, and small differences crept into the app. We needed to speed up the path from design to code without adding new process or slowing teams down.
What I led
- Made the business case and set the direction: build the design system in Storybook with the same Flutter widgets the app ships
- Partnered with our Lead UX/Product Designers on the structure: tokens, primitives, components and real workflow patterns
- Kept the driver app's look and feel unchanged, so the system documented what drivers already knew instead of redesigning it
- Kept handoff simple: design tokens map one-to-one to code, and every widget shows its states and usage guidance
- Aligned UX and Dev leads on ownership, review and when a component is "done"
- Prioritized the components that save the most build time first, like workflow panels, scan fields and status icons
The outcome
UX and Development now share one living source of truth for the driver-app UI. The design system scaled to 200 reusable components across four products, reached about 90% reuse and cut design-to-development handoff time by 40%.
Overview
The Transflo Mobile Design System is the visual source of truth for the Transflo driver-app UI. Every reusable widget lives in Storybook alongside its states and usage guidance, built with the same Flutter code the app ships.
This was a leadership role. Our Lead UX/Product Designers built the system hands-on, and I made the key decisions for the business and for both the UX and Development teams: what to build, what to leave alone, how handoff should work and how success would be measured.
Services
Design System Strategy, UX Leadership, Cross-Functional Alignment, Component Governance
Client name
Transflo
Team
Head of Mobile Product/UX (John Karl), Lead UX/Product Designers, Mobile Development team
Tokens First
Decision:
Start with the foundations both teams share, so design and code can't drift.
Colors, typography, spacing, radius, elevation and motion defined once as tokens
A Material 3 type scale in Roboto, matching what drivers already see
Every color, type style and spacing value comes from the app's theme in code, the same names designers use in Figma
Real Workflows, Real States
Decision:
Document the components that cost the most build time, not just buttons.
Driver workflow panels, status icons and scan fields alongside core buttons, cards and inputs
Live controls to switch states such as Not Done, Active, Done, Locked and Warning
Light and dark themes and real device frames, so reviews match what drivers see in the cab
One Map for Both Teams
Decision:
Keep the handoff simple and the look and feel unchanged.
A clear sidebar map: tokens, primitives, buttons, cards, inputs, actions, data display, app shell, feedback, progress, banners and user workflow
No new tools or process for teams to learn: designers and developers point to the same story
Clear ownership and review so the system stays current as the app grows
Transflo Mobile Design System in Storybook.
Final observations
The biggest win wasn't a new look; it was alignment. By deciding early to keep the driver app's look and feel, build from the shipping Flutter code and keep handoff simple, I let our Lead UX/Product Designers move fast and gave Development a reference they trust. That is what turned a design system into real time saved for the business.
John Karl
19 Years • Product & UX Design Leader Leading Mobile Product for 500K+ Users
If you like what you see or have any questions, feel free to send me an email anytime.
Selected work
[2010 -2025]
