scroll-behavior: smooth;

Clickatell Design System

Clickatell Design System

The primary goal of this project was to establish Clickatell's first-ever comprehensive design system, adhering to the principles of atomic design methodology. This system aimed to streamline the design and development processes, ensuring consistency and efficiency across Clickatell’s product suite.

The primary goal of this project was to establish Clickatell's first-ever comprehensive design system, adhering to the principles of atomic design methodology. This system aimed to streamline the design and development processes, ensuring consistency and efficiency across Clickatell’s product suite.

ROLE: Sr. PRODUCT DESIGNER
TOOLS USED: FIGMA
YEAR: 2020

Clickatell-Design-System_cover-1

Overview

At Clickatell, the absence of a unified design language posed significant challenges in maintaining consistency and efficiency across our digital products. As the Senior Product Designer, I spearheaded the initiative to build the company's first comprehensive design system using the atomic design methodology.

My Role

I was responsible for the strategic planning and execution of the design system, ensuring it aligned with our product goals and user needs. This involved collaborating closely with both designers and developers to create a unified and user-centered design language, crafting the visual and structural elements of the system, and actively advocating for its adoption across teams. I also focused on establishing processes for ongoing feedback and iteration, ensuring the design system remained effective and relevant.

Life before the Design System

Before the design system, Clickatell's workflow involved using individual stylesheets and manually copying UI components, leading to design inconsistencies and inefficiencies. The lack of standardization and unified design language made collaboration difficult and processes time-consuming, highlighting the need for a more streamlined and scalable design approach.

Screenshot-2023-11-14-at-11.07.39 AM
THE OLD STYLESHEET

The Process

  • Research & Analysis: Conducted a comprehensive audit of existing UI elements and patterns, understanding user needs, design inconsistencies, and technical constraints.
  • Defining the Atoms: Identified and created fundamental building blocks like color palettes, typography, icons, and basic UI elements such as buttons and input fields.
  • Molecules & Organisms: Merged atoms into more complex, reusable components (molecules) and developed larger interface sections (organisms) for common functions across applications.
  • Templates & Pages: Designed templates for common layouts, ensuring molecules and organisms functioned effectively in real application scenarios.
  • Documentation & Guidelines: Developed extensive documentation and guidelines for ease of adoption by design and development teams.

The Audit

d80dda55-66fb-4645-a562-3567b7284883

The initial phase required doing an audit and creating an inventory of all established style guides, components, and patterns from Clickatell's product suit: Unity, Chat Desk, Chat Flow, and Campaign Manager. The next task was to assess components that were missing and was required.

The Technical Rollout Plan

Working with the devs, we developed a rollout plan for the design system to be implemented on Storybook

63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

The goal was to build a centralized Design System core that would support all the products under the umbrella of Clickatell. The core would provide the foundations like: typography, colours, atomic and molecular components, etc. 

Screen-Shot-2022-07-14-at-2.12.45-PM
DesignSystem

Building the atoms

The Colours

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. $clicaktell-blue-500). Each of the brand colours had to have variations in lightness.

Screenshot-2023-11-14-at-2.33.25 PM

Colour variations in lightness

Colours

Base Colours

Screenshot-2023-11-14-at-3.09.43 PM

Tokenisation with variables in Figma

BASE & SEMANTIC 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.

SemanticColours

The Iconography

Feather icons were used as a base for most of the icons. They were adjusted and tweaked to match the rest of the set. Icon's were designs on a 24x24px size so that interchanging between them would not cause any component level issues when used.

Icons1
Icons2

The Typography

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. 

Display-Headings
System-Text
Body-Text
Text-Links

Defining Box Shadows

Box shadows were created for 4 states of elevation. "Elevation is the relative distance between two surfaces along the z-axis" (Google Material Design)

Screenshot-2023-11-14-at-3.43.25 PM

Atomic Components

A view of some of the atomic components built. A total of 22 components and always growing.

Atoms2
Atoms1

Components Built With Flexibility

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

Screenshot-2023-11-14-at-4.20.35 PM

Prototype Ready Components

Prototype interactions were also added to most components that required interactions. This allowed designers to prototype faster and have working base components ready to use.

Screenshot-2023-11-14-at-4.22.54 PM

Molecular Components

Once the atomic components were established, the molecular components could start to take shape. Clickatell's Design System at the moment has over 38 molecular components. A few examples can be viewed below:

Molecules5
Molecules2
Molecules6
Molecules8
Molecules9
Molecules10
Molecules11
Molecules13
Molecules12
Molecules14
Molecules1
Molecules14
Molecules13
Molecules12
Molecules11
Molecules10
Molecules9
Molecules8
Molecules3
Molecules4
Molecules6
Molecules5
Molecules7
Molecules2

Organism Components

Organism level components could then be built once the molecular level components were established. A total of 28 (and growing) components. Organism components also included all form components (like input forms, etc).

Organisms7
Organisms8
Organisms7
Organisms8
Organisms1
Organisms6
Organisms5
Organisms4
Organisms3
Organisms2
Forms1
Forms3
Forms4
Forms2

Templates

Templates, situated at the page level, organize components within a layout and establish the core structure of the design's content. These components are designed to be separated and further customized, with templates serving as the foundation for the UI layout.

File-Uploader-Modal
Error-Pages
Modal-Template
Table-Template
Drawer-Template

Results

  • Achieved a significant reduction in design and development time, enhancing productivity.
  • Improved UI consistency and user experience across Clickatell’s product suite.
  • Established a scalable foundation for future design, allowing for easy updates and modifications.
  • Full Designer Adoption: The design system was fully embraced by the design team. Designers quickly adapted to using the system, appreciating its ease of use and the efficiency it brought to their workflows. This complete adoption has led to a noticeable improvement in design coherence and has streamlined the design process across different projects and teams.
  • Effective Utilization: Designers are now using the system to its full potential, leveraging the standardized components and guidelines to create high-quality designs more quickly. The system's intuitive structure have empowered designers to innovate within a consistent framework, enhancing both creativity and consistency.
Screenshot-2023-11-16-at-2.54.11 PM

Ongoing Work and Future Outlook:

  • Continuous Evolution: The design system is continually evolving, with regular updates and enhancements based on user feedback and technological advancements.
  • Expanding Scope: Future plans include expanding the system's scope to incorporate more diverse design elements.
  • Empowering Creativity: We aim to empower designers with more creative freedom within the system's framework, fostering innovation while maintaining consistency.
  • Training and Onboarding: Ongoing efforts are focused on training new team members and refining the onboarding process to ensure seamless integration into our design methodology.
  • Analytics & Performance: Upgrading to Figma's org plan and checking the usage and tracking lackluster components.

Lesson 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.

Here are a few lessons I learnt along the way:

  1. Components need to be heavily tested with all possible instances to avoid breaking any designs.
  2. Maintain versioning history earlier on so that changes can be tracked and recorded.
  3. Be more granular in building components for future-proofing and scalability.
  4. Create all possible instances of components even if not immediately required.
Collage

Follow me

Want to get in touch?

Email me at: hello@chelms.ca

© CHELMS VARTHOUMLIEN 2024