Company
Duration
#
Product Design
#
UI
Design System
Our team crafted a high-spec design system, built in React Native, to improve speed to delivery and design quality across the product. Outcome: Helped teams ship faster and with greater consistency by rebuilding the design system and operating model.
Role: Design System Lead, responsible for team direction, system architecture, and cross-functional alignment across product, engineering, and leadership.
Atomic Design System
We reimagined our design system and entire workflow from the ground up, including versioning with branches and other high-value Figma practices.
Over time, the TW design system became bloated, and a high-speed war mode introduced significant design debt and inconsistency. We revisited this and added updates to icons, fonts and colours. We also rebuilt the entire system from the ground-up using highly dev aligned semantic naming and structures.
Our atomic system has 4 levels:
Tokens / atoms
Components (Default values only)
Modules (Components with content and or groups)
Templates (Full screen components)
Components — are always set as default values to ensure the bases are tightly controlled. (Design system owner only)
Modules — each team or functional area can build content-specific
modules.
Templates — common pages used across multiple flows are componentised into templates to prevent design debt from creeping in.
DISCOVER MORE
