Developing a robust design system for Clickatell to drive cohesive interfaces.
Developing a robust design system for Clickatell to drive cohesive interfaces.
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
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
IMPACT
IMPACT
IMPACT
Streamlined over 55 inconsistent components across 3 products, creating reusable components that significantly reduced time spent on design and development.
Streamlined over 55 inconsistent components across 3 products, creating reusable components that significantly reduced time spent on design and development.
SCALE
SCALE
SCALE
Built a design system with over 220+ components and achieved full team adoption within 6 months, simplifying future updates and scaling efforts.
Built a design system with over 220+ components and achieved full team adoption within 6 months, simplifying future updates and scaling efforts.
COLLABORATION
COLLABORATION
COLLABORATION
Aligned workflows between designers, developers, and product managers, improving communication and fostering more efficient collaboration on features.
Aligned workflows between designers, developers, and product managers, improving communication and fostering more efficient collaboration on features.
OUTCOME
OUTCOME
OUTCOME
Established a scalable foundation that simplified updates and created consistency across all products. Users quickly noticed the more polished and cohesive experience.
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.
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.
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
Business goals
Business goals
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
The problem
The problem
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
Guiding principles
Guiding principles
Guiding principles
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.
Technical roll-out plan
Technical roll-out plan
Technical roll-out plan
Drag to move around
Drag to move around
Drag to move around
Foundation Colours
Foundation Colours
Foundation Colours
Semantic Colours
Semantic Colours
Semantic Colours
Colour tokenization and variables in Figma
Colour tokenization and variables in Figma
Colour tokenization and variables in Figma
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
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.
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.
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.
Results
Results
Results
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.