Unifying iOS and Android design foundations across 4 lines of business, from fragmented local styles to a scalable, token-driven system.
Design System
Web App
iOS Native
ROLE
Sole designer
TIMEFRAME
July 2025 to present (ongoing)
TOOLS
Figma, Figma Variables, Figma Site, iOS 26, Material 3
READING TIME
6-8 mins
AT A GLANCE
DESIGN ADOPTION
Activation increase
DELIVERY QUALITY
0 Detached
styles or components in design handoff delivery
THEMING
1 click. 2 modes.
Light/dark and iOS/Android switching without manual overrides
LIGHT
DARK
VARIABLE SYSTEM
280+
variables built on 86 CDS primitives replacing 640+ local styles shared across 2 apps
COVERAGE
2 APPs. 5 LOBs.
Group Benefits, Group Retirement,
Individual Insurance, Individual Benefits
Bank
CONTEXT
A finance app with a vision but no visual language.
Gilded helps people visualize their financial future through projections and life-planning simulations. The founder, a finance influencer, had a clear vision and audience, but the product didn't yet reflect it. The brand existed only as a logo, a colour palette, and a vibe, none of it represented in the actual product
What existed
A partial web app, with UI screens designed by a contracted agency using local styles and a visual identity that didn't match the brand. New features had been built entirely by engineers with no design input. The marketing site was engineer-built. iOS wasn't in the picture at all.
My role
As the sole designer, embedded with a small team of highly technical engineers building sophisticated financial models, I owned everything, from the visual system, the product experience, the brand expression, and the move to native iOS. Working at 10 hours a week, with a weekly sync with the CTO.
THE Problem
The product asked users to think like accountants.
Two core experience problems were holding the product back. The onboarding flow created too much friction: it asked users to enter income, expenses, assets, and liabilities up front, with a mental model and copy that were technical and hard to parse for someone who just wanted to understand their financial future.
Navigation was the second problem. To adjust the settings or data behind a financial plan, users had to dig inside the plan itself, where everything was crammed together. There was no way to find plan-specific settings easily, and no way to compare two plans on the same graph.
Visual system
From a logo to a full design language
Starting from a logo and palette, I built the complete visual system that now defines Gilded across every surface. A token structure built with Figma variables powers theming, including the dark mode recently launched in the web app and built into the iOS app from the start. The brand identity is now consistent across web, iOS, and marketing for the first time.
Variables defining the system
Custom icons
Web components
Modes via token structure
Before: agency screens with local styles and off-brand typography and colour.
After: a unified visual language built on Gilded's brand, with a token structure powering light and dark modes.