CMS UI Kit- Increasing Design Efficiency by 30% with a Scalable Design System

The Challenge

  • Leadership identified a need to decrease time from project start to launch

  • Design workflows were inconsistent, resulting in duplicated effort and unclear standards

  • Teams lacked a unified knowledge of UX best practices, causing inconsistent solutions

  • Lack of a shared design language led to misalignment between design, PM and dev teams

  • Each project required creating new components from scratch, duplicating efforts and slowing progress

The approach included creating a foundational design system and shifting design tools


Moving to Figma from Photoshop/Adobe XD

  • Adopted Figma as the single design hub

  • Real-time collaboration between design, product, and development

  • Developers could inspect/export directly, reducing back-and-forth

Creating the Design System

  • Typography & Styles:

    • Defined scalable heading/body styles for web & mobile

    • Applied WCAG contrast standards for inclusive readability

  • Color & Spacing System:

    • Color scales that could be easy adoptable and editable for the client’s brand

    • Implemented color accessibility components to check color contrast

    • Spacing scale & 8-point grid for layout consistency.

  • UI Components:

    • Buttons, navigation bars, cards, form inputs, icons

    • Documented hover/active/disabled states

    • Responsive variants for different breakpoints

UX Research Driven Templated Website Modules

  • UX Research with Leisure Travelers:

    • Interviews & journey mapping revealed key goals: discover destinations, compare activities, book confidently

    • Pain points: info overload, unclear booking CTAs, lack of trust indicators

    • Hierarchy in content and UI related to the user’s task-based needs

For example, when searching for events on a leisure website, the hierarchy of content is important to how a user needs to see and digest that information. Users will look for things in this order:

When is the event? Date of event is top priority and should sit high in the hierarchy.

What is the event? Does it align with my interests and my group?

Where is the event located? Is it nearby my accommodations, how will I get there?

Documentation & Rollout

  • Centralized system library with clear usage guidelines

  • Internal workshops for design + dev teams to drive adoption

  • Governance process for adding new components

  • Figma library was complemented with a live online library, maintained by the development team, for referencing functionality, interactions and setup in the backend of the CMS

Impact

30% faster project start → development handoff

Major reduction in design inconsistencies & rework

Improved cross-functional alignment & collaboration

Scalable system that supports all future digital projects

Faster turnaround = happier customers = customer retention & referrals