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
Aa
abcdefghijklmnopqrstuvwxyz
Some key
components
contributing to a cohesive design
Some key
components
contributing to a cohesive design
0:00/1:34
Check out other Projects
