HeleneDesign System

One product, a dozen different UIs.

When I joined, the product was built on loosely applied MUI components — every page used different spacing, colours, icon styles and interaction patterns.

I led a full UI audit using Nielsen Norman heuristics and surfaced key usability issues across navigation, accessibility and visual consistency.

A single, living source of truth.

We created the Helene Design System, including:

• Design tokens & Figma variables for colour, type, spacing and radii01
• A unified Tabler iconography set for a clearer, more accessible language02
• A consistent layout model shared across validation & editing screens03
• Vibe-coded Foundation docs & reusable patterns (forms, lists, dialogs, Copilot)04
• A source of truth coded directly from Figma and embedded for engineers05
• Fixed information architecture and breadcrumb navigation06

Impact.

• Faster design-to-dev handoff thanks to shared tokens and documented patterns.
• Fewer UI inconsistencies — improving learnability and perceived product quality.
• Designers iterate faster, with fewer component decisions and less rework.
• Improved contrast, clarity and accessibility across the interface.
• A scalable foundation for future feature development.