Namma Yatri design system
Namma Yatri design system
Namma Yatri design system
Building a flexible, scalable digital design system for Namma Yatri to stand the test of time.
Building a flexible, scalable digital design system for Namma Yatri
to stand the test of time.
Building a flexible, scalable digital design system for Namma Yatri to stand the test of time.
#App
#Design Sytem
Background
Background
Background
As Namma Yatri continued to grow, so did it's design language. We developed a cohesive design system customized for all Namma Yatri products across various Indian states, including Odisha Yatri, Kolkata, and Bangalore.
My role involved building and expanding the design system to ensure seamless compatibility across all mobile devices, offering multiple theme options for each state, and accommodating both light and dark modes for optimal user experience.
As Namma Yatri continued to grow, so did it's design language. We developed a cohesive design system customized for all Namma Yatri products across various Indian states, including Odisha Yatri, Kolkata, and Bangalore.
My role involved building and expanding the design system to ensure seamless compatibility across all mobile devices, offering multiple theme options for each state, and accommodating both light and dark modes for optimal user experience.
As Namma Yatri continued to grow, so did it's design language. We developed a cohesive design system customized for all Namma Yatri products across various Indian states, including Odisha Yatri, Kolkata, and Bangalore.
My role involved building and expanding the design system to ensure seamless compatibility across all mobile devices, offering multiple theme options for each state, and accommodating both light and dark modes for optimal user experience.
Responsibilities
Responsibilities
Component Library
Documentation
Component Library
Documentation
Component Library
Documentation
TIMELINE
TIMELINE
2024
2024
2024
TEAM
TEAM
2 Designers,
2 Product managers,
3+ developers
2 Designers,
2 Product managers,
3+ developers
2 Designers,
2 Product managers,
3+ developers
The challenge
The challenge
The challenge
Create a unifying digital design system that enables
consistency at scale.
Create a unifying digital design system that enables
consistency at scale.
Create a unifying digital design
system that enables consistency at scale.
Laying the Foundation for Unified Design
Laying the Foundation for Unified Design
Laying the Foundation for
Unified Design
Since the launch, we hadn’t established a dedicated design system, leading to significant inconsistencies across the product. This resulted in increased development time, as designers frequently handed off inconsistent components to engineers and repeatedly recreated commonly used patterns.
What did we do next?
Since the launch, we hadn’t established a dedicated design system, leading to significant inconsistencies across the product. This resulted in increased development time, as designers frequently handed off inconsistent components to engineers and repeatedly recreated commonly used patterns.
What did we do next?
Since the launch, we hadn’t established a dedicated design system, leading to significant inconsistencies across the product. This resulted in increased development time, as designers frequently handed off inconsistent components to engineers and repeatedly recreated commonly used patterns.
What did we do next?
Audited all existing screens to identify inconsistencies.
Audited all existing screens to identify inconsistencies.
Audited all existing screens to identify inconsistencies.
Started with core atoms as the foundation for all components.
As the platform expanded, the existing design couldn’t accommodate new
features or scale effectively.
As the platform expanded, the existing design couldn’t accommodate new features or scale effectively.
A scalable design system which has different modes and city themes.
A scalable design system which has different modes and city themes.
With multiple new services like rentals, intercity rides, and ambulances, users found it hard to locate their daily ride options.
Design system documentation and collaboration with the dev team to bridge the
gap between design and code.
Design system documentation and collaboration with the dev team to bridge the
gap between design and code.
With multiple new services like rentals, intercity rides, and ambulances, users found it hard to locate their daily ride options.
Following a structure to bring in theme + Dark & Light modes
Following a structure to bring in theme + Dark
& Light modes
Following a structure to bring in theme + Dark & Light modes
Figuring this out was challenging and took a lot of experimentation and trial and error. After several iterations, I landed on the structure below and documented it to make it easily accessible for both designers and developers.
We defined Core Colors as the foundation, which were adapted into Theme Colors for products like Namma Yatri and Odisha Yatri. These were then mapped to UI Colors, supporting both Light and Dark Modes for future scalability.
Figuring this out was challenging and took a lot of experimentation and trial and error. After several iterations, I landed on the structure below and documented it to make it easily accessible for both designers and developers.
We defined Core Colors as the foundation, which were adapted into Theme Colors for products like Namma Yatri and Odisha Yatri. These were then mapped to UI Colors, supporting both Light and Dark Modes for future scalability.
Figuring this out was challenging and took a lot of experimentation and trial and error. After several iterations, I landed on the structure below and documented it to make it easily accessible for both designers and developers.
We defined Core Colors as the foundation, which were adapted into Theme Colors for products like Namma Yatri and Odisha Yatri. These were then mapped to UI Colors, supporting both Light and Dark Modes for future scalability.
Documenting the design system for fellow designers
and developers
Documenting the design system for fellow
designers and developers
Documenting the design system for fellow designers and developers
We used Figma to outline usage guidelines, best practices, and other essential information to ensure consistency. The documentation provided a reference point for the team whenever questions about the system came up, helping them utilize it to its fullest potential. Given the complexity of the design system, I also created an FAQ section to assist new designers in quickly understanding and navigating the system.
We used Figma to outline usage guidelines, best practices, and other essential information to ensure consistency. The documentation provided a reference point for the team whenever questions about the system came up, helping them utilize it to its fullest potential. Given the complexity of the design system, I also created an FAQ section to assist new designers in quickly understanding and navigating the system.
We used Figma to outline usage guidelines, best practices, and other essential information to ensure consistency. The documentation provided a reference point for the team whenever questions about the system came up, helping them utilize it to its fullest potential. Given the complexity of the design system, I also created an FAQ section to assist new designers in quickly understanding and navigating the system.
See other projects from
my portfolio
See other projects from
my portfolio
See other projects from
my portfolio
Redesigning Namma Yatri for bigger impact
Redesigning Namma Yati for
bigger impact
Redesigning Namma Yatri for
bigger impact
Namma Yatri
Namma Yatri
iOS & Android App
iOS & Android App
Unifying Transit & Cabs to kill commute fiction
Unifying Transit & Cabs to kill commute fiction
Unifying Transit & Cabs to kill commute fiction
Namma Yatri
Namma Yatri
iOS & Android App
iOS & Android App
I'd love to hear from you and explore collaboration, answer your questions, or simply chat.
Let’s Connect
Monday, December 9
© 2024 — AMRUTHAKUDUVA
I'd love to hear from you and explore collaboration, answer your questions, or simply chat.
Let’s Connect
Monday, December 9
© 2024 — AMRUTHAKUDUVA
I'd love to hear from you and explore collaboration, answer your questions, or simply chat.
Let’s Connect
Monday, December 9
© 2024 — AMRUTHAKUDUVA
I'd love to hear from you and explore collaboration, answer your questions, or simply chat.
Let’s Connect
Monday, December 9
© 2024 — AMRUTHAKUDUVA
I'd love to hear from you and explore collaboration, answer your questions, or simply chat.
Let’s Connect
Monday, December 9
© 2024 — AMRUTHAKUDUVA