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

OVERVIEW

A bird’s-eye view

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.

Tools

Figma, Miro, Storybook, VSCode

Team & Role

Sr. Product Designer, 2 Front End Devs, 1 Tech Lead, 1 Product Manager, 1 QA

Timeline

Q2 2020 - Q4 2020

Tools

Figma, Miro, Storybook, VSCode

Team & Role

Sr. Product Designer, 2 Front End Devs, 1 Tech Lead, 1 Product Manager, 1 QA

Timeline

Q2 2020 - Q4 2020

Tools

Figma, Miro, Storybook, VSCode

Team & Role

Sr. Product Designer, 2 Front End Devs, 1 Tech Lead, 1 Product Manager, 1 QA

Timeline

Q2 2020 - Q4 2020

55+

Components streamlined

55+

Components streamlined

55+

Components streamlined

20%

Improvement in sprint velocity

20%

Improvement in sprint velocity

20%

Improvement in sprint velocity

6

Month delivery timeline

6

Month delivery timeline

6

Month delivery timeline

220+

New components added

220+

New components added

220+

New components added

GOALS

Mission: Unify–a

design

objective

GOALS

GOALS

GOALS

Mission: Unify–a design business objective

Mission: Unify–a design business objective

Mission: Unify–a design business objective

The design system initiative was guided by key business objectives:

Accelerate time-to-market

Streamline design and development workflows to launch new features faster and stay competitive in the SaaS market.

Accelerate time-to-market

Streamline design and development workflows to launch new features faster and stay competitive in the SaaS market.

Accelerate time-to-market

Streamline design and development workflows to launch new features faster and stay competitive in the SaaS market.

Enhance brand consistency

Establish a unified visual language to reinforce Clickatell’s brand identity across all products and customer touchpoints.

Enhance brand consistency

Establish a unified visual language to reinforce Clickatell’s brand identity across all products and customer touchpoints.

Enhance brand consistency

Establish a unified visual language to reinforce Clickatell’s brand identity across all products and customer touchpoints.

Boost team productivity

Reduce repetitive design and development tasks, freeing up resources to focus on innovation and problem-solving.

Boost team productivity

Reduce repetitive design and development tasks, freeing up resources to focus on innovation and problem-solving.

Boost team productivity

Reduce repetitive design and development tasks, freeing up resources to focus on innovation and problem-solving.

THE PROBLEM

Before the design system: A fragmented reality

THE PROBLEM

Before the design system: A fragmented reality

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.

“It feels like all the Clickatell products are built by seperate companies.”

“It feels like all the Clickatell products are built by seperate companies.”

“It feels like all the Clickatell products are built by seperate companies.”

THE RESEARCH

Finding the cracks in the foundation

THE RESEARCH

Finding the cracks in the foundation

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:

Designers often recreated existing components
Designers often recreated existing components
Designers often recreated existing components
Teams wasted time on inconsistencies and rework
Teams wasted time on inconsistencies and rework
Teams wasted time on inconsistencies and rework
Audit showed over 55 inconsistent UI components
Audit showed over 55 inconsistent UI components
Audit showed over 55 inconsistent UI components
Users were unsure of component behaviours
Users were unsure of component behaviours
Users were unsure of component behaviours

Component audit

THE PITCH

Gaining stakeholders buy-in

THE PITCH

Gaining stakeholders buy-in

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:

Challenges

Inefficiencies and inconsistencies from disconnected components.

Challenges

Inefficiencies and inconsistencies from disconnected components.

Challenges

Inefficiencies and inconsistencies from disconnected components.

Solution

A unified system to save time, enhance collaboration, and improve user experience.

Solution

A unified system to save time, enhance collaboration, and improve user experience.

Solution

A unified system to save time, enhance collaboration, and improve user experience.

THE EXECUTION

Building and documenation plan

THE EXECUTION

Building and documenation plan

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.

1
Defining the atoms

Created essential building blocks like colour tokens, typography scales, iconography, and basic UI components (e.g., buttons, input fields). These atoms became the foundational pieces for more complex designs.

2
Molecules & organisms
2
Templates &
pages
4
Documentation & guidelines
1
Defining the atoms

Created essential building blocks like colour tokens, typography scales, iconography, and basic UI components (e.g., buttons, input fields). These atoms became the foundational pieces for more complex designs.

2
Molecules & organisms
2
Templates &
pages
4
Documentation & guidelines
1
Defining the atoms

Created essential building blocks like colour tokens, typography scales, iconography, and basic UI components (e.g., buttons, input fields). These atoms became the foundational pieces for more complex designs.

2
Molecules & organisms
2
Templates &
pages
4
Documentation & guidelines

GUIDING PRINCIPLES

The core principles guiding our design system

GUIDING PRINCIPLES

The core principles guiding our design system

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.

1. Consistency

Standardizing components and behaviours ensures users encounter the same quality and predictability, no matter where they interact.

1. Consistency

Standardizing components and behaviours ensures users encounter the same quality and predictability, no matter where they interact.

1. Consistency

Standardizing components and behaviours ensures users encounter the same quality and predictability, no matter where they interact.

2. Efficiency

Reducing the need for manual styling and rework allows teams to save time and focus on impactful work while fostering better collaboration.

2. Efficiency

Reducing the need for manual styling and rework allows teams to save time and focus on impactful work while fostering better collaboration.

2. Efficiency

Reducing the need for manual styling and rework allows teams to save time and focus on impactful work while fostering better collaboration.

3. Maintainability

Structuring the system to be easy to test, maintain, and expand ensures long-term reliability and reduces technical debt.

3. Maintainability

Structuring the system to be easy to test, maintain, and expand ensures long-term reliability and reduces technical debt.

3. Maintainability

Structuring the system to be easy to test, maintain, and expand ensures long-term reliability and reduces technical debt.

4. Accessibility

Prioritizing accessibility ensures designs meet standards for colour contrast, keyboard navigation, and screen reader support, creating inclusive products for all users.

4. Accessibility

Prioritizing accessibility ensures designs meet standards for colour contrast, keyboard navigation, and screen reader support, creating inclusive products for all users.

4. Accessibility

Prioritizing accessibility ensures designs meet standards for colour contrast, keyboard navigation, and screen reader support, creating inclusive products for all users.

5. Scalability

Designing with flexibility in mind ensures the system adapts seamlessly as products and user needs evolve, avoiding future bottlenecks.

5. Scalability

Designing with flexibility in mind ensures the system adapts seamlessly as products and user needs evolve, avoiding future bottlenecks.

5. Scalability

Designing with flexibility in mind ensures the system adapts seamlessly as products and user needs evolve, avoiding future bottlenecks.

THE TECHNICALS

The architecture of adoption

THE TECHNICALS

The architecture of adoption

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 MASTER SYSTEM

One system to rule them all

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

THE COLOURS

Establishing colour variables & tokens

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

ICONOGRAPHY

Icons that rule the interface kingdom

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

It’s all in the font

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

DEFINING SHADOWS

Adding depth to the interface

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)

Hover over the cards or use switcher to see elevation
Show elevation
Elevation 1
This is a title

Curabitur lobortis id lorem id bibendum.

Elevation 2
This is a title

Curabitur lobortis id lorem id bibendum.

Elevation 3
This is a title

Curabitur lobortis id lorem id bibendum.

Elevation 4
This is a title

Curabitur lobortis id lorem id bibendum.

Show elevation
Elevation 1
This is a title

Curabitur lobortis id lorem id bibendum.

Elevation 2
This is a title

Curabitur lobortis id lorem id bibendum.

Elevation 3
This is a title

Curabitur lobortis id lorem id bibendum.

Elevation 4
This is a title

Curabitur lobortis id lorem id bibendum.

Show elevation
Elevation 1

Curabitur lobortis id lorem id bibendum.

Elevation 2

Curabitur lobortis id lorem id bibendum.

Elevation 3

Curabitur lobortis id lorem id bibendum.

Elevation 4

Curabitur lobortis id lorem id bibendum.

THE ATOMIC COMPONENTS

The DNA of the design system

THE ATOMIC COMPONENTS

The DNA of the design system

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.

Components built with flexibility

Prototype Ready Components

All components were created with care and ensuring that usage was flexible and also scalable to the needs of the designs. 

Components built with flexibility

Prototype Ready Components

All components were created with care and ensuring that usage was flexible and also scalable to the needs of the designs. 

Components built with flexibility

Prototype Ready Components

All components were created with care and ensuring that usage was flexible and also scalable to the needs of the designs. 

THE MOLECULES

Molecules: The glue of the system

THE MOLECULES

Molecules: The glue of the system

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

THE ORGANISMS

Organisms: The workhorses of design

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

The framework and templates

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

DOCUMENTATION

All the how-to’s and guide

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

STORYBOOK IMPLEMENTATION

From design to Storybook components

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

RESULTS & FINDINGS

The payoff and what we achieved

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:

Consistency

Improved UI consistency and user experience across Clickatell’s product suite.

Consistency

Improved UI consistency and user experience across Clickatell’s product suite.

Consistency

Improved UI consistency and user experience across Clickatell’s product suite.

Efficiency

Achieved a significant reduction in design and development time.

Efficiency

Achieved a significant reduction in design and development time.

Efficiency

Achieved a significant reduction in design and development time.

Scalable

Established a scalable foundation for future design, allowing for easy updates and modifications.

Scalable

Established a scalable foundation for future design, allowing for easy updates and modifications.

Scalable

Established a scalable foundation for future design, allowing for easy updates and modifications.

Adoption

The design system was fully embraced by the design team.

Adoption

The design system was fully embraced by the design team.

Adoption

The design system was fully embraced by the design team.

Utilization

Designers are now using the system to its full potential, leveraging the standardized components and guidelines.

Utilization

Designers are now using the system to its full potential, leveraging the standardized components and guidelines.

Utilization

Designers are now using the system to its full potential, leveraging the standardized components and guidelines.

“It’s great to finally have everyone on the same page—designers and engineers are speaking the same language now.”

“It’s great to finally have everyone on the same page—designers and engineers are speaking the same language now.”

“It’s great to finally have everyone on the same page—designers and engineers are speaking the same language now.”

THE FUTURE

Ongoing work and future outlook

THE FUTURE

Ongoing work and future outlook

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.

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.

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.

2. Expanding Scope

Future enhancements will introduce new components and patterns, broadening the system’s capabilities to meet evolving product needs.

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.

3. Empowering Creativity

By balancing structure and flexibility, the system fosters creativity while maintaining consistency, enabling teams to innovate confidently.

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.

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.

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.

5. Analytics & Performance

Leveraging tools like Figma analytics to track component usage and performance, providing insights to improve efficiency and adoption rates.

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

LEARNINGS

Lessons learnt & reflections

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.

Designing with flexibility in mind ensures the system adapts seamlessly as products and user needs evolve, avoiding future bottlenecks.

Components need to be heavily tested with all possible instances before publishing to avoid breaking any designs.

Create all possible instances of components even if not immediately required.

Maintain versioning history earlier on so that changes can be tracked and recorded.

Be more granular in building components for future-proofing and scalability.

Want to get in touch?

Email me at hello@chelms.ca

Follow me:

Chelms Varthoumlien © 2025

Designed and built using Framer

Want to get in touch?

Email me at hello@chelms.ca

Follow me:

Chelms Varthoumlien © 2025

Designed and built using Framer

Want to get in touch?

Email me at hello@chelms.ca

Follow me:

Chelms Varthoumlien © 2025

Designed and built using Framer