We implemented a design system across two code bases, a code sandbox, and Figma. The goal was to establish clear guardrails and standards for craft, while we scaled the design team from one to three.
At Series A, product-market fit came from shipping fast. With growing pains, systems means going even faster, but with more precision.
No more frankensteined UI, QA bottlenecks, or subjective design debates.
Catalyzed by a company rebrand, we were given brand guidelines: a royal purple, gold, and sky blue.
Catalyzed by a company rebrand, we were given brand guidelines: a royal purple, gold, and sky blue.
Plus a satirical tone to the content. I was challenged with implementing this into a trustworthy fintech app.
Every payment earns you something
Pay the bills you already have and collect rewards on every one of them.
Rewards are issued by the card network, not by Chexy.
Tokens are a vocabulary; components are what a team reaches for.
We now spend less time redesigning core components every new feature. A third the time on visual QA. And continue to improve our system with new enhancements. The best part is our non-technical team can now prototype an experiment without the coordination costs.
The brand personality lives in the highs, the lows, and moments in between.
We now have more time to give care to those moments.
A well-oiled marketing engine
Choose a colour, a title and optional partner mark. This works for our same-day turnaround times. Now, personalized promotional cards drive an 18-26% clickthrough.
You’re in with 400 entries. Invite friends to add more.
The lints are the gatekeeper
Handoff.md sets the defaults in the repo, so every new sandbox starts with the right type, colour and components. Lints stop anyone breaking them. Weekly design reviews catch what’s missed and get the team fluent in it.
Running list of decisions to carry into the Linear tickets. Add to it with every related PR.
- Success screens drop the single Amount recap. Apply this to the DS success template and the real app’s success screens.
- Activity card padding: PaymentActivity’s last row has no bottom padding, leaving 16px under it instead of 28px.
- “Returned” status label: now an approved label (check:statuses). It’s money a bank sent back, which isn’t a refund.
Three weeks to launch
Months of groundwork came first: the product sandbox I had started long before this, which meant the three weeks weren’t starting from zero. The rebrand itself came with organizational buy-in.
Three weeks to launch
I studied Airbnb, Uber and Wise. AI carried the implementation spread in code — without it, end to end across two codebases, the sandbox and Figma could not have happened with such velocity.