Casumo's rapid growth brought with it challenges of inconsistency, fragmentation, and mounting design debt across its product experiences. The Casumo Unified Design Language (CUDL) was a project I initiated to maintain alignment, a project that grew into a fully working design system.

Challenges

While the release of CUDL had helped us consolidate patterns and common elements within the design team, it was initially little more than a UI kit. This helped maintain a degree of consistency, but minimally impacted development cycles and time to market. Our challenge was to transform this foundation into a working design system.

To understand the wider context and perceived challenges, I identified common themes through internal interviews with developers and tech leads.

1. We lack of single source of truth: There was no central reference point for product teams, leading to reliance on a mix of Storybook environments and work-in-progress consolidation efforts.
2. Adoption and education challenges: Adoption of CUDL was hindered not by resistance but by the need for streamlined workflows. Designers and engineers wanted to ship quickly without disruptions.
3. Lack of governance: The absence of active maintainers caused a loss of reliability in the system, leading to multiple, inconsistent ways of implementing features.

Process

To address these challenges and gain buy-in, I set up OKRs to measure progress and epics to tackle the following key phases:

1. Mapping and discovery
   • Map all existing elements in our Design Library
   • Improve design system’s adoption
   • Classify and categorise components, give visibility to their status in design and code
   • Improve folder structure and logical organization for Figma library
2. Process and communication
   • Establish the workflow for reviewing and approving new components
   • Evaluate efficiency and satisfaction
3. Documentation
   • Develop clear design guidelines to explain the purpose behind new components
   • Integrate design and development documentation with the library, making it accessible directly from the components
   • Establish an ongoing process to keep the documentation updated as components evolve
4. Maintenance
   • Identify gaps in the existing library based on design and development needs
   • Continuous communication related to the DS
   • Conduct regular assessments of the Design System to identify areas for improvement

Tracking progress with OKRs

Kickoff

Initially, a centralised approach was taken to build momentum quickly. I ran a workshop where designers and engineers collaborated to establish a a picture of current reality. We then mapped all components, primitives and tokens. In addition we categorised blocks and loading states. We also reviewed our file organisation, Figma covers and general usability of our existing frameworks.

Setup

A structured hierarchy loosely following atomic design principles was adopted, with primitives for look and feel and components as the building blocks of the interface. Documentation, including dos and don'ts, was created to provide clarity.