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.
OVERVIEW
A bird’s-eye view
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:
THE PROBLEM
Before the design system: A fragmented reality
Manual styling and inconsistent components created inefficiencies at Clickatell, making collaboration hard and scaling features slow.
THE RESEARCH
Finding the cracks in the foundation
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
THE PITCH
Gaining stakeholders buy-in
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:
Solution
A unified system to save time, enhance collaboration, and improve user experience.
THE EXECUTION
Building and documenation plan
To keep the system scalable and maintainable, I applied Atomic Design—building from small elements up to reusable templates and guidelines.
GUIDING PRINCIPLES
The core principles guiding our design system
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.
THE TECHNICALS
The architecture of adoption
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 MASTER SYSTEM
One system to rule them all
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
THE COLOURS
Establishing colour variables & tokens
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.
ICONOGRAPHY
Icons that rule the interface kingdom
We built a unified icon set—adapted from Feather—for clarity, consistency, and scalability across all products.
TYPOGRAPHY
It’s all in the font
Typography was grouped into Display & Headings, System Text, Body Text, and Text Links—covering headers, UI copy, paragraphs, and inline links.
DEFINING SHADOWS
Adding depth to the interface
Box shadows were created for 4 states of elevation. "Elevation is the relative distance between two surfaces along the z-axis" (Google Material Design)
THE ATOMIC COMPONENTS
The DNA of the design system
A growing library of 22+ atomic components—buttons to toggles—built for consistency, scalability, and seamless integration, evolving as the system grows.
THE MOLECULES
Molecules: The glue of the system
With atoms in place, we built 38+ molecular components—like form fields and cards—adding structure and functionality to the system.
THE ORGANISMS
Organisms: The workhorses of design
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
The framework and templates
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.
DOCUMENTATION
All the how-to’s and guide
A successful design system needs collaboration and clarity—so we created thorough documentation to guide component use and ensure consistent principles.
STORYBOOK IMPLEMENTATION
From design to Storybook components
We transformed Figma components into interactive Storybook elements, collaborating with developers to ensure efficient conversion, testing, and consistency.
RESULTS & FINDINGS
The payoff and what we achieved
“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:
THE FUTURE
Ongoing work and future outlook
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.
1. Continuous Evolution
The design system will grow and adapt based on ongoing user feedback and emerging trends. Regular updates ensure it remains relevant and effective.
2. Expanding Scope
Future enhancements will introduce new components and patterns, broadening the system’s capabilities to meet evolving product needs.
3. Empowering Creativity
By balancing structure and flexibility, the system fosters creativity while maintaining consistency, enabling teams to innovate confidently.
4. Training and Onboarding
Ongoing efforts to refine training materials and onboarding processes ensure new team members can quickly and seamlessly integrate with the system.
5. Analytics & Performance
Leveraging tools like Figma analytics to track component usage and performance, providing insights to improve efficiency and adoption rates.
LEARNINGS
Lessons learnt & reflections
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.