Design Library creation

I identified fragmented assets, inconsistent UI patterns, and duplicated efforts across teams, which were slowing down delivery and creating misalignment between product, development, and marketing.

In response, I initiated and led the creation of a unified design system in Figma, based on the atomic design model. I established a single source of truth for reusable components and patterns, aligning design and development through a shared system that supported both the MUI React implementation and marketing needs.

Problem

The absence of a centralised design system resulted in fragmented digital assets, inconsistent user interfaces, and repeated work across teams.

This lack of alignment led to inefficiencies in both design and development workflows, slower delivery times, and inconsistencies in the user experience across IA web products and marketing channels.

Process

  • Leadership & Advocacy: Championed the need for a design system, secured buy-in from developers, marketing, and CX teams.
  • Atomic Design Approach: Built the library in Figma, structuring it from atoms (buttons, icons) to molecules and organisms, ensuring scalability and reusability.
  • Cross-Functional Collaboration: Worked closely with developers to translate Figma components into a MUI React library, and with marketing to ensure assets met EDM and digital communication needs.
  • Validation & Iteration: Facilitated feedback loops with stakeholders, iterated on components, and ensured alignment with brand guidelines and accessibility standards.
  • Documentation & Training: Documented usage guidelines and provided training to ensure adoption across teams.

Outcome & Metrics

I established a unified design system that improved consistency, accelerated delivery, and strengthened collaboration across product, development, and marketing teams.

  • Consistency: I created a single source of truth that aligned all digital products and marketing assets, reducing UI inconsistencies across key user journeys and ensuring a more cohesive, accessible experience.
  • Efficiency: I reduced design and development time by approximately 25–40% by introducing reusable, production-ready components, enabling faster iteration and more efficient handoff to developers.
  • Adoption & Collaboration: I led the adoption of the design system across multiple teams, resulting in improved cross-functional collaboration and reducing back-and-forth between design and development during implementation.

Atoms

Molecules

Organism