top of page

Luma - Design System Implementation

As part of the effort to create consistency, efficiency, and a unified user experience across all product lines, I led the implementation of a comprehensive Design System built on top of ANT Design (React UI Framework).
 

Luma Design system.png

The goal was to streamline design and development processes, reduce friction between teams, and ensure that every component, interaction, and behaviour in our system follows a single, cohesive standard.

Using ANT Design as the Core UI Framework

ANT Design served as the foundation for our component structure, interaction patterns, and visual language. By leveraging ANT’s robust React component library, we were able to:

  • Maintain visual and behavioural consistency across all tools

  • Reduce custom development time

  • Align designers and developers on a predictable, scalable component set

  • Ensure accessibility and usability across various product flows

Whenever possible, we extended ANT Design components to match our brand language, interactions, and product requirements creating a unified design layer on top of a stable technical base.

Screenshot 2025-11-16 at 21.03.50.png

Zeroheight – Centralized Documentation Hub

All design guidelines were documented and maintained inside Zeroheight, creating a single source of truth for the entire company:
 
Included in Zeroheight:

  • Foundations:
    Colors, typography, iconography, grid & layout, tone of voice

  • Component Library:
    Buttons, modals, form elements, navigation, validations & alerts

  • Usage Guidelines (UX):
    Interaction rules, do/don’t patterns, behaviour specifications

  • Pattern Library:
    Common workflows, repeated flows, best practices, states & edge cases
     

Zeroheight allowed designers, developers, and PMs to quickly reference the exact behaviour and appearance of any component — reducing ambiguity and ensuring consistency across teams.

Zeroheights.png

Storybook – Developer-Ready Component Library

All components defined in the design system were implemented and documented in Storybook, providing a live, interactive component library for developers.
This ensured that:

  • Every component existed both in design and code

  • Development teams had access to the latest versions

  • Variants, states, and interactions were clearly demonstrated

  • QA could rely on Storybook for validation

Storybook became the engineering-facing version of our design system, aligned 1:1 with Zeroheight.

Storybook.png

InVision – Exploration & Handoff

Prototypes & Early Explorations
InVision was used during the early design phases to share:

  • Concepts

  • Flows

  • Interactive prototypes

  • Initial design directions
     

This stage allowed for collaborative reviews and rapid iteration.
Spec Mode - Final Design Delivery
Once the design was approved, the final version was uploaded to InVision Spec, where every component included:

  • Detailed specs

  • Behaviour definitions

  • Spacing, states, and interactions
     

Only one version of the design was shared at this stage: the final, approved configuration ensuring clarity and preventing version confusion.

Invision SS.png
Invision blured.png

Jira + Confluence - Development Checklists

Each component and feature received a dedicated checklist in Confluence, linked to a Jira ticket, including:

  • Dev tasks

  • UX rules

  • Validation states

  • Edge cases

  • Responsiveness requirements
    This allowed product, design, and development to stay aligned throughout implementation.

Google Sheets - UI/UX Review Process

To maintain quality control and enforce design system standards,
I created structured UI/UX review sheets used to evaluate:

  • Visual consistency

  • Alignment with ANT and the Design System

  • Interaction accuracy

  • Pixel-perfect match to InVision Specs

This created a transparent and repeatable review workflow.

Summary

Through a carefully structured process, I implemented a full Design System built on ANT Design, documented in Zeroheight, aligned with Storybook, managed through Jira/Confluence, and quality-checked via structured UI/UX reviews.
The result was a unified, scalable, and maintainable design ecosystem that significantly improved efficiency, reduced inconsistencies, and strengthened collaboration between design, product, and engineering teams.

Comp 4.gif
bottom of page