June 2023 - Present

Roots Design System

Roots Design System

CATEGORY

CATEGORY

Travel Companion

Travel Companion

ROLE

ROLE

Lead Designer

Lead Designer

DURATION

DURATION

2 Weeks

2 Weeks

What is this about?

The Here app had major problems with its design: it was outdated, non-scalable, and poorly documented. This made it hard to deliver features efficiently and consistently.


This case study describes how we transformed this messy design into a streamlined and cohesive design system.

My role in the journey

Design Documentation

Design Documentation

Rapid Prototyping

Rapid Prototyping

Component Design

Component Design

Stakeholder Interviews

Stakeholder Interviews

A/B Testing

A/B Testing

Reserach

Reserach

UI Design

UI Design

Motion Design

Motion Design

Quality Checks

Quality Checks

Understanding the foundations

I commenced by asking the team:

I commenced by asking the team:

How can we improve the design system?
-Me, Designer

How can we improve the design system?
-Me, Designer

"What design system, lol"
-Kiran, CEO

"What design system, lol"
-Kiran, CEO

"Why do I have to make 5 different components
for the same thing?"
-Yash, Frontend

"Why do I have to make 5 different components for the same thing?"
-Yash, Frontend

"There's 0 documentation for this
-Harshit, Frontend

"There's literally 0 documentation
Please Ritik, stop bothering me"
-Harshit, Frontend

Ahh…I knew this would be a bumpy ride for sure…
So, it was crucial to break the process into actionable steps

Ahh…I knew this would be a bumpy ride for sure…
So, it was crucial to break the process into actionable steps

Design audit: evaluating current design components

Design audit: evaluating current design components

I started dissecting the current components & structures in place in the existing design system and identified pain points from different user groups.

I started dissecting the current components & structures in place in the existing design system and identified pain points from different user groups.

Competitor systems and industry standard

Competitor systems and industry standard

I also looked at great design systems like Airbnb, Uber, Spotify etc. to get insights into effective methodologies that helped shape our strategy.

I also looked at great design systems like Airbnb, Uber, and Spotify to get insights into effective methodologies that helped shape our strategy.

Compiling insights

Compiling insights

Gathered insight from the above processes

Gathered insight from the above processes

Inconsistent design components increase development complexity, hindering scalability and future development.

Inconsistent design components increase development complexity, hindering scalability and future development.

Develop

Develop

Common pain points reveal QA process inefficiencies, underscoring the need for a unified approach to enhance productivity.

Common pain points reveal QA process inefficiencies, underscoring the need for a unified approach to enhance productivity.

QA

Identified pain points call for a more user-friendly interface, emphasizing the urgency of a comprehensive redesign.

Design

Unearthing buried inconsistencies reveals the need for a systematic overhaul to improve overall user satisfaction.

Design

Addressing pain points enhances overall productivity and user satisfaction, while discrepancies in current components impede scalability and future development.

Develop

Competitor analysis exposes gaps in our current system, informing the direction of our redesign.

Design

Ineffective methodologies hinder our design strategy, necessitating alignment with industry standards to stay competitive.

Design

Diverse viewpoints underscore the urgency of a comprehensive redesign to meet evolving user needs

Develop

Lack of standardization affects cross-team collaboration, while understanding challenges highlights the necessity for a cohesive design system.

Develop

Competitor analysis exposes gaps in our current system, informing the direction of our redesign.

Design

Identified pain points call for a more user-friendly interface, emphasizing the urgency of a comprehensive redesign.

Design

Unearthing buried inconsistencies reveals the need for a systematic overhaul to improve overall user satisfaction.

Design

Addressing pain points enhances overall productivity and user satisfaction, while discrepancies in current components impede scalability and future development.

Develop

Ineffective methodologies hinder our design strategy, necessitating alignment with industry standards to stay competitive.

Design

Diverse viewpoints underscore the urgency of a comprehensive redesign to meet evolving user needs.

Develop

Lack of standardization affects cross-team collaboration, while understanding challenges highlights the necessity for a cohesive design system.

Develop

This graph helped us convince stakeholder why we should be doing this

This graph helped us convince stakeholder why we should be doing this

Forging the path ahead

Forging the
path ahead

Forging the path ahead

with clear objectives

with clear objectives

Enhancing
consistency

Enhancing
consistency

Fostering
scalability

Fostering
scalability

Boosting
efficiency

Boosting
efficiency

Encouraging
collaboration

Encouraging
collaboration

Then the main goal of redesigning the whole system started

Then the main goal of redesigning the whole system started

From atoms to organisms

Then the main goal of redesigning the whole system started

From atoms to organisms

Colors

Colors

Colors

The foundation of the color system was based on 4 base colors, from which other colors were extracted.

The foundation of the color system was based on 4 base colors, from which other colors were extracted.

To keep the system flexible and scalable, colors were tokenized and specific nomenclature was added to it

The foundation of the color system was based on 4 base colors, from which other colors were extracted.

Midnight

Midnight

Primary

Primary

#252E3D

Here Red

Here Red

Brand

Brand

#E51818

Tang Blue

Tang Blue

Secondary

Secondary

#2161DD

Basic White

Basic White

Background

Background

#FFFFFF

Tokenized color system

Tokenized color system

Tokenized color system

To keep the system flexible and scalable, colors were tokenized and specific nomenclature was added to it.

To keep the system flexible and scalable, colors were tokenized and specific nomenclature was added to it.

Icons

Icons

Icons

To keep the system flexible and scalable, colors were tokenized and specific nomenclature was added to it.

To keep the system flexible and scalable, colors were tokenized and specific nomenclature was added to it.

Typography

Typography

Typography

Typeface

Typeface

Light

Light

Medium

Medium

Semi-Bold

Semi-Bold

Bold

Bold

Inter

Aa

abcdefghijklmnopqrstuvwxyz

Some key
components

contributing to a cohesive design

Some key
components

contributing to a cohesive design

0:00/1:34

Let's

Connect

Have an opportunity, wanna collaborate on

something cool or just say hello!

✦ Portfolio 2025 ✦

RITIK RAJ

Let's

Connect

Have an opportunity, wanna collaborate on

something cool or just say hello!

✦ Portfolio 2025 ✦

RITIK RAJ