Stop solving the same decisions again.
The products shared a purpose, but their screens and components were drifting. My job was to bring those decisions together and make handoff clearer.
A more consistent starting point.
The role-selection decision stayed the same. The system made its hierarchy and treatment more consistent.
Build from shared foundations.
I separated brand colours from their UI roles, then organised foundations, primitives, components and product patterns. That helped the system grow without a new component for every feature.
Primary · Background · Border · Input · Destructive · Focus
Readable copy. Clear hierarchy.
Design the states, too.
Buttons covered hierarchy, size, icon use and state. Inputs shared an anatomy for labels, helper text and errors. Language selection became a reusable product pattern.
Shared anatomy, with clear states.
Use it in complete journeys.
The same foundations carried onboarding, requests and AI support. The test was whether they worked together in real flows.
Let the pattern fit the task.
Translation work, session tables and live calls needed different layouts. Shared foundations kept them connected without forcing every product into the same screen.
Clearer handoff. More consistent interfaces.
The system supported products serving 700K+ people and 1,300+ organisations. Those numbers show scale; they do not measure the effect of the system.
The direct outcome was better consistency across mobile and web, with clearer design-to-engineering handoff. Stronger ownership, naming and contribution rules were the next steps.
