Building design from the ground up
How I created process and structure at 2021.AI: a design system and guidelines that make handover smooth, and a research practice to keep improving the product.
ROLE
Senior Product Designer
TEAM
Design intern, PM, developers
TIMELINE
2024 — now
READ TIME
4 min read
CONSTRAINTS
Only designer
Users are hard to recruit
Two products, one codebase
Regulated domain
CHALLENGE
No design system, no shared process, no hand-off between design and development, and users who are hard to reach.
SOLUTION
One design system for both products, a written hand-off process, and a research practice that uses AI to prepare between real conversations.
IMPACT
336 tokens and 28 component specs in use, 1,940 hard-coded colours replaced, and a research plan with owners and dates.
Key decisions
Four decisions that built the design function
01
Rebuild the system around three files
THE PROBLEM
Colours were typed in by hand, components had names like “Property 1”, and Governance, MLOps and the code each had their own version of the same thing.
WHAT I DECIDED
The library holds only what designers build with. Guidelines, specs and foundations live in their own files, and designers and developers use the same names.
01 · Components
02 · Guidelines & specs
03 · Foundations
ONE FILE PER JOB
PUBLISHED LIBRARY
UI Component Library
Foundations, plus Global, Governance and MLOps components. Nothing else, so it stays fast.
📚 Docs & Guidelines
Rules, specs, changes log and the hand-off guide
🎓 Designer walkthrough
49 slides of onboarding
💻 Developer walkthrough
37 slides on tokens, components and hand-off
🗂️ Product file template
The starting point for every new feature
02
Make hand-off a process, not a conversation
THE PROBLEM
There was no agreed way for work to move from design to development.
WHAT I DECIDED
Developers only see work once it’s Ready for dev, every feature has one ticket, and design QA happens before every merge.
03
Ground the roadmap in evidence
THE PROBLEM
Product decisions rested on a handful of client conversations, and compliance and risk teams are hard to recruit.
WHAT I DECIDED
I turned what we knew into hypotheses, planned discovery with our first public-sector clients, built one research home for product, sales and customer success, and used AI to prepare between real conversations.
🔎 Desk research
Summarising AI regulations and governance frameworks into what each role actually needs to do.
🧑💼 Personas & interviews
Drafting provisional personas and running simulated interviews to surface questions and assumptions.
🧩 Synthesis
Clustering notes from client sessions and workshops into themes I can act on.
✏️ Prototype variations
Generating alternative flows to explore quickly before committing to one in Figma.
04
Propose where GRACE should compete
THE PROBLEM
To prioritise, we needed to know where GRACE could win against established governance tools.
WHAT I DECIDED
I mapped the competitors and proposed a position: not out-automating Vanta or out-policying Credo AI, but being the governed workplace AI for European organisations.
Impact
From one designer improvising to a working design practice
We now have
1 design system
for Governance and MLOps
Replaced
1,940
hard-coded colours with shared tokens
Wrote
86 slides
so nobody has to ask twice
Rated
9 personas
by how much we really know
🧱 SHIPPED IN DESIGN
The rebuilt library, 336 tokens, 28 component specs, the guidelines and both walkthroughs are in use by the team.
🩹 WAITING FOR DEVELOPMENT
Three code updates: colours and forms, dialog sizes and the side navigation.
🔬 RESEARCH UNDER WAY
Interviews with our first municipalities start once introductions are in place.
Next project ↓