Developing a robust design system for Clickatell to drive cohesive interfaces.

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

IMPACT

Streamlined over 55 inconsistent components across 3 products, creating reusable components that significantly reduced time spent on design and development.

SCALE

Built a design system with over 220+ components and achieved full team adoption within 6 months, simplifying future updates and scaling efforts.

COLLABORATION

Aligned workflows between designers, developers, and product managers, improving communication and fostering more efficient collaboration on features.

OUTCOME

Established a scalable foundation that simplified updates and created consistency across all products. Users quickly noticed the more polished and cohesive experience.

In 2020, Clickatell faced significant challenges due to the absence of a unified design system, leading to inconsistencies across products and inefficient workflows. As the Senior Product Designer, I spearheaded the development of Clickatell's first comprehensive design system, utilizing atomic design principles to establish a scalable and user-centered framework.

Business goals

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.

Boost team productivity

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

The problem

Designers often recreated existing components

Teams wasted time on inconsistencies and rework

Audit showed over 55 inconsistent UI components

Users were unsure of component behaviours

Component audit

Guiding principles

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.

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.