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, creating inefficiencies and inconsistencies. As Senior Product Designer, I led the initiative to build a user-centered, scalable design system that aligned with product goals and user needs.
IMPACT
SCALE
COLLABORATION
OUTCOME
The design system initiative was guided by key business objectives:
Clickatell’s fragmented workflows relied on manual styling and inconsistent components, leading to inefficiencies. Designers and developers struggled with collaboration, and scaling new features was time-consuming.
Before diving into solutions, I knew I had to fully understand the scope of the problem. Why were components inconsistent? Why was scaling so difficult? To answer these questions, I took a deep dive into Clickatell’s design and development workflows. What I found confirmed my suspicions but also revealed 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:
Through targeted presentations, workshops, and regular updates, the value of the design system became clear. This step was critical in building trust, fostering enthusiasm, and ensuring cross-functional alignment.
To ensure the design system was scalable and maintainable, I followed the Atomic Design methodology. This approach allowed me to build the system step by step, starting with the smallest elements and working towards complete, 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.
To ensure a seamless implementation, we collaborated closely with developers to design a rollout plan for the design system. Storybook served as the primary platform for integration, offering a centralized environment for component development, testing, and deployment. The plan also defined clear governance processes to ensure the design system remained aligned with both design and development needs.
Drag to move around
The goal was to build a centralized design system core that unified all products under Clickatell’s umbrella. This master system, much like a ring of power, provided the foundational elements—typography, colour palettes, atomic and molecular components—that all other systems could rely on.
The core / master design system was to support the 3 other design system
The first step was the establish new colours for Clickatell and expand upon the existing brand colours. Colours were themed in saturation, hue, and lightness and assigned proper colour variables (e.g. $clickatell-blue-500). Each of the brand colours had to have variations in lightness.
Foundation Colours
Semantic Colours
Colour tokenization and variables in Figma
Semantic and foundation colours
The base colours were compiled into one collection and then another collection called "Semantic Colours" was created.
Semantic colours were more clear defined on their usage in the design system so that designs wouldn't have to second guess what the colour's use was for in their designs.
Icons play a critical role in creating a seamless and intuitive user experience. For this design system, we established a unified iconography set that ensures clarity, consistency, and scalability across all products. Icon's were based from Feather icons and tweaked further to suit our needs.
Typgraphy was grouped under: Display & Headings – For all headers and display size typography; System Text – For most use in the UI; Body Text – For large paragraphs and posts; and Text Links – For inline texts links and free hanging link texts.
Box shadows were created for 4 states of elevation. "Elevation is the relative distance between two surfaces along the z-axis" (Google Material Design)
This is a glimpse of the 22 (and growing) atomic components designed and built to form the foundation of the design system. From buttons to toggles, each component is crafted for consistency, scalability, and seamless integration. The library is constantly evolving, ensuring it meets new needs as the system grows.
With atomic components in place, molecules began to take shape. These groupings of atoms form over 38 reusable components, such as form fields and card layouts, bringing structure and functionality to the design system.
With molecular components in place, organism-level components were built to bring larger functionality and structure to the system. These are more complex groupings of molecules, such as form builders, file uploaders, and modals, that serve as reusable and flexible units across the product.
Currently, the design system includes 28 organism components (and growing), enabling teams to build sophisticated interfaces with ease while maintaining consistency and scalability.
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.
Building a successful design system requires collaboration and shared understanding. Which was why it was important to create thorough documentation that not only outlines the use of each component but also ensures that our design principles are applied consistently.
In the component development phase, our team meticulously transformed Figma components into interactive Storybook elements. Through collaboration between designers and developers, we ensured efficient conversion and testing, enhancing our design system’s consistency and usability across projects
After implementing the design system for several cycles, we observed considerable enhancements, addressing the crucial challenges and establishing a solid foundation for future developments. The formula's focus on consistency, efficiency, and growth transformed the methods used by teams to create, develop, and collaborate. Here are the key successes we achieved:
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.