Case study · Design systems · fromAtoB
One design system, three platforms.
Rebuilding a sprawling, undocumented style guide into a governed system the whole team could build from, spanning web, iOS, and Android.
I drove the architectural decisions behind fromAtoB's first real design system, owned its color and accessibility audit end to end, and co-built its component library, 47 documented components, with the design team. The system was in active production when I left, after cutting design handoff from 45 minutes to 10 and consolidating a sprawling style guide (28 colors, 64 text styles, 80 components) into a documented, governed set roughly half the size.
The piece I'm proudest of is the component library. The design team built it together, and it's the part of the system people used every day.
The problem
The style guide existed. The system didn't.
fromAtoB already had a style guide. On paper. In the live product, it had stopped meaning anything.
Colors, fonts, and styles that weren't in the guide had crept into shipping screens, so the product looked inconsistent across web, iOS, and Android, and inconsistent within each one. The same error message used dark red with white text in one place and light red with dark text in another, depending on which designer had built it.
The guide itself was part of the problem. Designers wanted to use it, but the components were buried in Sketch and nobody could find them, so they rebuilt from scratch and the drift got worse. Across six designers and three platforms, every new screen made the inconsistency a little harder to undo.
My role
Who did what.
A full redesign of web, iOS, and Android ran in parallel with the design system underneath it. My work centered on the system. On a team of six designers, I want to be exact about what was mine and what was ours.
The color audit and accessibility pass, including the full inventory of what was shipping, the consolidation from 28 colors to 17, and the WCAG contrast work that moved the primary CTA from failing to AA.
The two architectural calls that shaped the system, building on Material instead of from scratch and staying in Sketch instead of migrating to Figma mid-flight.
The component library of 47 documented components, built with the design team.
Recommendations into the design principles workshops. The sessions themselves were a team effort.
Key decisions
Build on Material Design, not from scratch
We could have designed a system from first principles. I made the case against it. Engineering had already built much of the product on Material, so anchoring the design system to the same foundation meant the design and the codebase shared a vocabulary from day one, with less translation and less drift.
Less distinctiveness in the primitives, which we bought back through a brand layer of color, type, and principles on top.
Stay on Sketch instead of migrating to Figma
The tempting move was to do everything at once. Redesign the product, build the design system, and migrate to Figma. I made the call to stay. Chasing three changes at once tripled the risk to the one that mattered, which was shipping the system. The team already worked in Sketch, so we stayed and put the effort into the foundation.
The most senior call I made on this project was knowing what not to do.
Staying on aging tooling to protect the launch.
Inventory reality before designing the ideal
Before designing anything, I audited what was in the product. I ran the audit myself. I captured every screen across web, iOS, and Android, pulled every color and style into one table (name, HEX, where it was used, a real example from the product) and only then designed the consolidated set.
That's how 28 colors became 17 and 80 components became 47. Every cut had a screenshot behind it, which made them easy to defend to marketing and engineering.
Weeks of inventory work before any visible design, which paid for itself the first time the cuts had to survive review.
How it came together
Foundation first, then the library.
1 The audit doubled as a contrast pass
Testing the live palette against WCAG contrast ratios surfaced failures, including the primary CTA, the control users press most in a booking flow, which was failing outright. My rework moved it from failing to AA.
That matters on a travel product. fromAtoB's travelers include the people a 4.5:1 ratio exists for.
2 Forty-seven components, documented in every state
With the foundation locked, the design team and I built the component library, with 47 components covering every interaction state (enabled, hover, pressed, focus, disabled) in light and dark. Each one was documented so a designer could find it in Sketch and use it without rebuilding it. A working rebuild of that standard lives in the Garage, where one token table drives a live text field and generates its own state sheet, so the spec and the artifact can't drift apart.
3 Old vs. new, tested with users
Our researcher ran 30-minute usability sessions with nine employees, comparing old and new with a focus on type and color. The output was a prioritized list of fixes that went straight back into the system.
Impact
The redesign the system shipped into moved the product numbers too, with booking conversion up 28%, checkout time down 10%, and abandonment down 18% in the 60 days after launch. Those are team outcomes (six designers and a rebrand), but the checkout and search simplification I worked on sits behind two of them, and the system is what let three platforms ship the changes consistently.
When I left in December 2020, the system was in active production, still being built out and already paying off.
What I'd do differently
I'd have instrumented adoption from day one. We measured handoff time because it was easy to measure. Adoption, how many designers were building from the shared library, was the number that mattered, and I never measured it. A simple count from week one would have let me show the system's value instead of describing it.