MLC Life Insurance serves multiple partner practices, each with its own brand identity.
To create a unified yet flexible design experience, I led a project to develop a design system in Figma that utilises tokens and styles, ensuring consistency and adaptability across various brands.
Partner practices often struggle with inconsistent UI components, branding, and design implementation. The goal was to build a scalable design system that could maintain core MLC Life Insurance branding while allowing customization for partner brands without compromising usability or efficiency.
Create a flexible design system that supports multiple partner brands.
Utilize Figma’s design tokens and styles to ensure scalability.
Improve design efficiency and collaboration between designers and developers.
Ensure accessibility and compliance with industry standards.
Conducted stakeholder interviews to understand branding requirements and understand how existing design systems are being used.
Analysed existing UI inconsistencies and design inefficiencies from existing designs currently implemented into the product design process.
Performed competitor benchmarking to assess best practices in multi-brand design systems.
Global Variables: Colors, typography, spacing, border-radius.
Alias Tokens: Mapped global tokens for brand-specific needs.
Color Tokens: Used Figma variables to define primary, secondary, and neutral color palettes, ensuring brand flexibility.
Typography Styles: Defined type scales, font families, and text styles for consistency.
Spacing & Layout: Developed a grid and spacing system for alignment and responsiveness.
Built atomic components following the Atomic Design Methodology:
⚛️ Atoms: Buttons, inputs, labels.
🦠 Molecules: Form fields, cards.
🐙 Organisms: Navigation bars, modal windows.
Used Figma’s Variables and Modes to switch between brand themes dynamically.
Allowed designers to swap brand-specific styles without affecting core components.
Conducted usability testing with designers and developers to refine components.
Implemented accessibility testing to ensure WCAG compliance.
Gathered feedback and iterated based on real-world usage.
Created a written design system documentation on specific design system uses.
Provided clear design-to-code mapping for developers using variables.
Conducted training sessions and reviews with existing designers.