We built a shared design system across React and React Native to align the product team. The goal was to establish clear guardrails so PMs and engineers could prototype independently while we scaled the design team from one to three.
Without a single source of truth, we dealt with inconsistent UI, visual QA bottlenecks, and too much time spent debating subjective design choices.
Approach
By introducing shared architectural patterns across two codebases, the team shifted from chaotic execution to unified velocity. The system serves as cross-functional leverage rather than a bottleneck. It sets strict taste guardrails that empower product managers and engineers to build quickly while elevating the overall craft.
Every payment earns you something
Pay the bills you already have and collect rewards on every one of them.
Brand personality lives in the seconds between screens.
A marketing engine
Bill reminders, partner promos and rewards offers are the same hero and rail in four colourways, so a campaign ships by choosing a fill, a title and a partner mark rather than by drawing a new surface each time. Personalized promotional cards drove ~18% clickthrough, and can be toggled throughout the dashboard, payment, and other relevant flows.
You’re in with 400 entries. Invite friends to add more.
Scale
To support fast-growing surfaces like wallets and checking accounts, the system was built to adapt rather than stay rigid. I applied a fluid workflow tailored to problem ambiguity: paper for strategic discovery, Figma for wireframing, and AI for research distillation and motion prototyping in code. By treating the design system as flexible infrastructure, we created a foundation that effortlessly absorbs new business lines.