Based in Vancouver,

Canada

Based in Vancouver,

Canada

Establishing a Design System for a Consistent, Multi-Theme Experience

Establishing a Design System for a Consistent, Multi-Theme Experience

Project Specs

Role: Product Designer (1 of 2)

Year: 2024

Deliverables: Component Library

& Documentation

Overview

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.

(01)


The challenge

(01)


The challenge

(01)


The challenge

Our product was inconsistent across the app

Our product was inconsistent across the app

Since the redesign, 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.

Since the redesign, 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.

(02)


The Process

(02)


The Process

Identifying all the inconsistency first

Identifying all the inconsistency first

We started by gathering all the screens and doing a thorough design audit to spot any inconsistencies and see where we could reuse components from the old design system to save time and effort. From there, we mapped out all the components needed to build a flexible design system that supports different themes and can easily adapt to both light and dark modes. While dark mode isn’t live yet, we’ve designed the system to make adding it in the future seamless.


We took inspiration from other design systems and started with the basics, focusing on building the core foundational elements—our atoms. These simple building blocks became the backbone for all our components and patterns. By getting this foundation right, we were able to create a solid, scalable framework that’s easy to build on as we grow.

We started by gathering all the screens and doing a thorough design audit to spot any inconsistencies and see where we could reuse components from the old design system to save time and effort. From there, we mapped out all the components needed to build a flexible design system that supports different themes and can easily adapt to both light and dark modes. While dark mode isn’t live yet, we’ve designed the system to make adding it in the future seamless.


We took inspiration from other design systems and started with the basics, focusing on building the core foundational elements—our atoms. These simple building blocks became the backbone for all our components and patterns. By getting this foundation right, we were able to create a solid, scalable framework that’s easy to build on as we grow.

(03)


Theming

(03)


Theming

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.

(04)


Documentation

(04)


Documentation

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.

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

I'd love to hear from you and explore collaboration, answer your questions, or simply chat.

Let’s Connect

Monday, December 9

© 2024 — AMRUTHAKUDUVA