Role
Design System Architect
Timeline
3 Months
Platform
Desktop / Mobile
Tools
Figma
Claude
NotionOverview
The Challenge
At Ackee, most new mobile projects began with a wireframing phase — but each designer approached it differently, creating inconsistency in handoffs, review quality, and client communication. I was tasked with creating a shared wireframe design system: a common visual language and component library that every designer at Ackee could use to wireframe mobile projects, regardless of their individual style.
Research & Discovery
Key Findings
80% of mobile screens across Ackee's project history used the same 30 core component patterns — a focused library could cover almost everything
The biggest time sink was not component creation, but aligning on annotation and label conventions between designers and developers at review
A two-tier colour system — neutral greys for wireframe elements plus one accent for interactive states — provided maximum clarity with minimal visual noise
Design Process
How We Got There
I began with the primitive token layer: a spacing scale (4 → 64px), a type scale (10–32px), and a nine-step neutral colour ramp (white to near-black). From primitives, I derived semantic tokens — background, border, text, interactive — applied consistently regardless of the specific component. Every component auto-layouts and updates cleanly when a primitive token changes.
The library was organised into six categories: Navigation, Layout, Forms, Data Display, Feedback, and Media. Each component included defined variants (default, filled, disabled, error) and was fully auto-layouted. A ready-made annotation layer let designers document specs without building a separate red-line file, cutting review preparation time significantly.
Final Design
The Solution
120+ components across six categories
fully token-driven and auto-layouted for fast customisation
Adopted by the full Ackee design team within two weeks of launch, covering all new mobile project starts
Estimated 2–3 days saved per project in wireframe setup and alignment time across the team
