Developing a robust design system for Clickatell to drive cohesive interfaces.
The goal was clear: establish Clickatell’s first comprehensive design system using atomic design principles. This initiative streamlined design and development processes, ensuring consistency and efficiency across the product suite.
Clickatell lacked a unified design language, so I led the creation of a scalable, user-centered design system aligned to product goals and user needs.
The design system initiative was guided by key business objectives:
Manual styling and inconsistent components created inefficiencies at Clickatell, making collaboration hard and scaling features slow.
Before proposing solutions, I audited Clickatell’s design and dev workflows to uncover why components were inconsistent and scaling was difficult—confirming my suspicions and exposing deeper issues.
Through research I discovered:
Component audit
Introducing a design system required alignment across multiple stakeholders, including designers, developers, product managers, and leadership. To secure support, I presented a clear case for change:
To keep the system scalable and maintainable, I applied Atomic Design—building from small elements up to reusable templates and guidelines.
I identified five guiding principles to address root issues and ensure the design system supported future growth. These principles became our north star for every decision, keeping the project aligned and impactful.
We partnered with developers on a rollout plan using Storybook as the hub for building, testing, and deploying components—backed by clear governance to keep design and dev aligned.
Drag to move around
The goal was a centralized design system unifying all Clickatell products, with core foundations—typography, colors, and atomic components—powering every experience.
The core / master design system was to support the 3 other design system
First, I expanded Clickatell’s brand palette—defining colors by hue, saturation, and lightness, and assigning variables (e.g., $clickatell-blue-500) with lightness variations.
Foundation Colours
Semantic Colours
Colour tokenization and variables in Figma
Semantic and foundation colours
Base colours were compiled into a foundation set, then mapped to semantic colours—clearly defined by usage so designers no longer had to guess their purpose.
We built a unified icon set—adapted from Feather—for clarity, consistency, and scalability across all products.
Typography was grouped into Display & Headings, System Text, Body Text, and Text Links—covering headers, UI copy, paragraphs, and inline links.
Box shadows were created for 4 states of elevation. "Elevation is the relative distance between two surfaces along the z-axis" (Google Material Design)
A growing library of 22+ atomic components—buttons to toggles—built for consistency, scalability, and seamless integration, evolving as the system grows.
With atoms in place, we built 38+ molecular components—like form fields and cards—adding structure and functionality to the system.
Next came organisms—28+ complex components like form builders, uploaders, and modals. These reusable units enable teams to build sophisticated, scalable interfaces with ease.
Templates organize components into layouts, establishing the core structure of the design. Each template is customizable and serves as the foundation for the UI layout.
A successful design system needs collaboration and clarity—so we created thorough documentation to guide component use and ensure consistent principles.
We transformed Figma components into interactive Storybook elements, collaborating with developers to ensure efficient conversion, testing, and consistency.
“After several cycles, the design system delivered major improvements—solving key challenges and creating a foundation for future growth. By driving consistency, efficiency, and collaboration, it transformed how teams build and work together. Key successes include:
As the design system continues to evolve, we remain focused on its growth, adoption, and impact. Here’s a look at the ongoing efforts and future plans that will shape its development.
Leading this project has not only refined my expertise in design systems and collaboration but has also underscored the transformative impact of a well-crafted design system on a company’s design culture and workflow efficiency.