Establishing Consistency with Oppia’s First Design System
Establishing Consistency with Oppia’s First Design System
Product Designer
March 2021–June 2021
Cross-functional
Leading junior designers to build Oppia’s first collaborative design system in Figma.
Overview
As Oppia's lead design consultant, I guided three junior UX designers in creating the company's first comprehensive design system. We transitioned from Adobe XD to Figma to leverage its collaborative features and advanced prototyping capabilities, ultimately managing a library of over 25 core components and 50+ supporting elements for Oppia's web and Android platforms.
My three years at Oppia, including experience designing without a formal system, gave me a firsthand understanding of the challenges designers faced and the inconsistencies that plagued our user experience. This experience, coupled with my background in interaction design, provided a strong foundation for leading this initiative.
Overview
As Oppia's lead design consultant, I guided three junior UX designers in creating the company's first comprehensive design system. We transitioned from Adobe XD to Figma to leverage its collaborative features and advanced prototyping capabilities, ultimately managing a library of over 25 core components and 50+ supporting elements for Oppia's web and Android platforms.
My three years at Oppia, including experience designing without a formal system, gave me a firsthand understanding of the challenges designers faced and the inconsistencies that plagued our user experience. This experience, coupled with my background in interaction design, provided a strong foundation for leading this initiative.
Overview
As Oppia's lead design consultant, I guided three junior UX designers in creating the company's first comprehensive design system. We transitioned from Adobe XD to Figma to leverage its collaborative features and advanced prototyping capabilities, ultimately managing a library of over 25 core components and 50+ supporting elements for Oppia's web and Android platforms.
My three years at Oppia, including experience designing without a formal system, gave me a firsthand understanding of the challenges designers faced and the inconsistencies that plagued our user experience. This experience, coupled with my background in interaction design, provided a strong foundation for leading this initiative.
The Challenge
Oppia's previous attempt at a design system (in XD) was incomplete and lacked the flexibility needed to support our growing product ecosystem. Migrating to Figma provided an opportunity to not only rebuild the system from the ground up, but also to refine our design language, standardize token values, and establish a robust foundation of base components. The remote team structure also presented a communication and collaboration challenge, requiring us to adopt new strategies for feedback and review.
The Challenge
Oppia's previous attempt at a design system (in XD) was incomplete and lacked the flexibility needed to support our growing product ecosystem. Migrating to Figma provided an opportunity to not only rebuild the system from the ground up, but also to refine our design language, standardize token values, and establish a robust foundation of base components. The remote team structure also presented a communication and collaboration challenge, requiring us to adopt new strategies for feedback and review.
The Challenge
Oppia's previous attempt at a design system (in XD) was incomplete and lacked the flexibility needed to support our growing product ecosystem. Migrating to Figma provided an opportunity to not only rebuild the system from the ground up, but also to refine our design language, standardize token values, and establish a robust foundation of base components. The remote team structure also presented a communication and collaboration challenge, requiring us to adopt new strategies for feedback and review.
My Approach
Bi-weekly check-ins with the junior designers were essential. They presented their work, and I provided feedback on areas like color palettes, typography, component consistency, and accessibility considerations, ensuring adherence to the system's principles and WCAG guidelines. We used Trello for task management, and I reviewed all design changes before each meeting, integrating approved components into the master library. We also established a clear documentation system within Figma to ensure everyone was on the same page.
My Approach
Bi-weekly check-ins with the junior designers were essential. They presented their work, and I provided feedback on areas like color palettes, typography, component consistency, and accessibility considerations, ensuring adherence to the system's principles and WCAG guidelines. We used Trello for task management, and I reviewed all design changes before each meeting, integrating approved components into the master library. We also established a clear documentation system within Figma to ensure everyone was on the same page.
My Approach
Bi-weekly check-ins with the junior designers were essential. They presented their work, and I provided feedback on areas like color palettes, typography, component consistency, and accessibility considerations, ensuring adherence to the system's principles and WCAG guidelines. We used Trello for task management, and I reviewed all design changes before each meeting, integrating approved components into the master library. We also established a clear documentation system within Figma to ensure everyone was on the same page.
Outcomes and Impact
Previously, designers at Oppia spent significant time recreating common UI elements, leading to inconsistencies and hindering design velocity. My prior experience working in this environment highlighted the critical need for a centralized design system to streamline workflows and improve the overall user experience.
This project reinforced the importance of clear communication, structured workflows, and a user-centered approach to design system development. The "Orion" design system is projected to reduce design and development time by an estimated 20% and improve design consistency across all Oppia products.
Early feedback from the design team has been overwhelmingly positive, with many praising the system's ease of use and comprehensive documentation. I'm confident this new system will not only improve design efficiency and consistency but also empower designers to focus on solving complex user problems and creating more impactful experiences.
Future iterations will focus on expanding the component library and integrating the system more deeply with our development processes.
Outcomes and Impact
Previously, designers at Oppia spent significant time recreating common UI elements, leading to inconsistencies and hindering design velocity. My prior experience working in this environment highlighted the critical need for a centralized design system to streamline workflows and improve the overall user experience.
This project reinforced the importance of clear communication, structured workflows, and a user-centered approach to design system development. The "Orion" design system is projected to reduce design and development time by an estimated 20% and improve design consistency across all Oppia products.
Early feedback from the design team has been overwhelmingly positive, with many praising the system's ease of use and comprehensive documentation. I'm confident this new system will not only improve design efficiency and consistency but also empower designers to focus on solving complex user problems and creating more impactful experiences.
Future iterations will focus on expanding the component library and integrating the system more deeply with our development processes.
Outcomes and Impact
Previously, designers at Oppia spent significant time recreating common UI elements, leading to inconsistencies and hindering design velocity. My prior experience working in this environment highlighted the critical need for a centralized design system to streamline workflows and improve the overall user experience.
This project reinforced the importance of clear communication, structured workflows, and a user-centered approach to design system development. The "Orion" design system is projected to reduce design and development time by an estimated 20% and improve design consistency across all Oppia products.
Early feedback from the design team has been overwhelmingly positive, with many praising the system's ease of use and comprehensive documentation. I'm confident this new system will not only improve design efficiency and consistency but also empower designers to focus on solving complex user problems and creating more impactful experiences.
Future iterations will focus on expanding the component library and integrating the system more deeply with our development processes.
Reflection
In some ways, this feature was built from the ground up because we intend to have our blog hosted on the main domain. Although we borrowed many features from existing websites, it was necessary to make the user experience familiar to what we expect users to have come across. Reinventing the wheel would not only be taxing for designers to create an original product, but also on the users too since they will need to learn how to use an interface for the first time.
Reflection
In some ways, this feature was built from the ground up because we intend to have our blog hosted on the main domain. Although we borrowed many features from existing websites, it was necessary to make the user experience familiar to what we expect users to have come across. Reinventing the wheel would not only be taxing for designers to create an original product, but also on the users too since they will need to learn how to use an interface for the first time.
Reflection
In some ways, this feature was built from the ground up because we intend to have our blog hosted on the main domain. Although we borrowed many features from existing websites, it was necessary to make the user experience familiar to what we expect users to have come across. Reinventing the wheel would not only be taxing for designers to create an original product, but also on the users too since they will need to learn how to use an interface for the first time.
Similar Case Studies
