Subhu Mehalingam

Work

Play

About

Contact

View Resume

Subhu Mehalingam

Work

Play

About

Contact

View Resume

Subhu Mehalingam

Work

Play

About

Contact

View Resume

Design System for Toothsi

Research, design, management & documentation of the design system built from scratch

My Role

Design System Manager

Tools

Figma, Jira

Timeline

5 months (Apr - Aug 2022)

Challenge

During my time as a Product Designer at Toothsi, I was tasked with building the design system. The lack of structure and documentation led to delayed timelines and confusion.

Results

We implemented a systematic approach by leveraging Atomic Design principles by Brad Frost, emphasizing modularity, scalability, and consistency.

First Step: a Visual Audit

I started by systematically reviewing and evaluating the current visual identity to inform recommendations and action items for the design system

Inconsistent Type Styles

Type styles such as cases, sizes, weights, etc, were inconsistent across screens

Inconsistent Icon Styles

Icons were inconsistent, some were filled and some outlined, and different sizes

Inconsistent Components

Design components, especially some of the key components, like CTAs, were inconsistent

Red as Primary Brand Color

The use of red as the primary brand color posed a major challenge: How do we differentiate between default states of elements vs. error states

The use of a secondary color

A secondary color, teal, is used to strike a good balance and create enough visual contrast with the primary brand color, red

Keeping the usage minimal

The use of the primary brand color is reserved for the most important elements like primary CTAs

Accentuating error states

Error states are differentiated from default states by using a different hue of red, and by adding visual cues (icons) to capture the user’s attention

Outlined Icons

The visual audit revealed the inconsistencies in icon styles, particularly filled vs. outlined icons and their sizing. After meticulous deliberation, we chose the outlined icons style for our design system.

They look minimal, modern and light: this was especially important due to our heavyweight primary brand color, red.
They are scalable: they include more negative space and are more legible at smaller sizes

The visual audit revealed the inconsistencies in icon styles, particularly filled vs. outlined icons and their sizing. After meticulous deliberation, we chose the outlined icons style for our design system.

They look minimal, modern and light: this was especially important due to our heavyweight primary brand color, red.
They are scalable: they include more negative space and are more legible at smaller sizes

They look minimal, modern and light: this was especially important due to our heavyweight primary brand color, red.
They are scalable: they include more negative space and are more legible at smaller sizes

Component Library

Building reusable, scalable and modular components was the most time consuming phase of this project. We also created corresponding design tokens to provide a common language for designers and developers to communicate and collaborate effectively during the implementation phase.

Rounded Edges over Sharp Edges

Another major inconsistency we uncovered was button styles, specifically rounded vs. sharp edges. We chose rounded edges for buttons as well as other design components:

They look friendly and approachable: rounded edges are softer in appearance
They are easier to touch (click): they are better targets for users to press
They look modern and trendy: Used across iOS and Android, they are the new industry standard

Another major inconsistency we uncovered was button styles, specifically rounded vs. sharp edges. We chose rounded edges for buttons as well as other design components:

They look friendly and approachable: rounded edges are softer in appearance
They are easier to touch (click): they are better targets for users to press
They look modern and trendy: Used across iOS and Android, they are the new industry standard

Another major inconsistency we uncovered was button styles, specifically rounded vs. sharp edges. We chose rounded edges for buttons as well as other design components:

They look friendly and approachable: rounded edges are softer in appearance
They are easier to touch (click): they are better targets for users to press
They look modern and trendy: Used across iOS and Android, they are the new industry standard

Slide to navigate

Looking back

Throughout the project, our teams engaged in brainstorming sessions and regular check-ins set up via Jira. This fostered a culture of transparency, accountability, and shared ownership of the design system's evolution.

Mail