LaunchPad Design System
Internal Design System Implementation
A comprehensive design system that enhances consistency, accessibility, and efficiency across Dev Launchers’ internal product teams.
Client
Dev Launchers
Timeline
Ongoing
Season
Summer 2022
Focus Areas
non-profit
design-systems
prototypes
wireframes
Tools Used
Figma
Storybook
Tailwind CSS
Tokens Studio
project overview
project summary
The Universal Design System project at Dev Launchers transformed the organization’s approach to consistency, accessibility, and efficiency across six internal product teams. This comprehensive system includes reusable components, styles, and guidelines, ensuring a cohesive and accessible experience across global design efforts.
role summary
As UX Designer, UX Lead, and Accessibility Consultant, I launched the project in June 2022 by identifying inefficiencies in design practices and repetitive tasks within the organization. I developed the initial atomic design styles and component library. Currently, my focus is on implementing Figma variables and refactoring components, supporting the ongoing evolution of our design system to enhance usability and efficiency.
project summary
The Universal Design System project at Dev Launchers transformed the organization’s approach to consistency, accessibility, and efficiency across six internal product teams. This comprehensive system includes reusable components, styles, and guidelines, ensuring a cohesive and accessible experience across global design efforts.
role summary
As UX Designer, UX Lead, and Accessibility Consultant, I launched the project in June 2022 by identifying inefficiencies in design practices and repetitive tasks within the organization. I developed the initial atomic design styles and component library. Currently, my focus is on implementing Figma variables and refactoring components, supporting the ongoing evolution of our design system to enhance usability and efficiency.
challenges
Break the Cycle: The Dev Launchers teams struggled with inconsistency and inefficiency due to the repetitive design and development of common UI components and patterns, which slowed progress toward their career goals.
goals
The primary goals were to ensure platform consistency and accessibility across all products, provide opportunities for designers and developers to gain hands-on experience with a shared design system, and improve overall team efficiency in designing and developing app iterations.
outcomes
The design system now supports six internal teams globally, with over 1,400 components built using an atomic design model and 30+ Figma variables, allowing dynamic updates across themes and devices while fostering collaboration and accessible learning.
challenges
Break the Cycle: The Dev Launchers teams struggled with inconsistency and inefficiency due to the repetitive design and development of common UI components and patterns, which slowed progress toward their career goals.
goals
The primary goals were to ensure platform consistency and accessibility across all products, provide opportunities for designers and developers to gain hands-on experience with a shared design system, and improve overall team efficiency in designing and developing app iterations.
outcomes
The design system now supports six internal teams globally, with over 1,400 components built using an atomic design model and 30+ Figma variables, allowing dynamic updates across themes and devices while fostering collaboration and accessible learning.
defining stakeholders
Our audience and stakeholders for this website include A Spacious Place, the organization's students, the student's caretakers, organization volunteers
defining stakeholders
Our audience and stakeholders for this website include A Spacious Place, the organization's students, the student's caretakers, organization volunteers
UX Designer
As a designer focused on accessibility, I need efficient processes for consistent design updates that align with our branding and accessibility standards.
challenges
Challenges: Balancing the demand for customized project design with maintaining overall design system consistency.
goals
Goals: Needs tools that support consistency and accessibility across various projects.
UX Designer
As a designer focused on accessibility, I need efficient processes for consistent design updates that align with our branding and accessibility standards.
challenges
Challenges: Balancing the demand for customized project design with maintaining overall design system consistency.
goals
Goals: Needs tools that support consistency and accessibility across various projects.
External Audience App Users
As an app user, I need accessible, engaging interfaces that support usability and inspire confidence in Dev Launchers.
challenges
Challenges: Ensuring ease of use and accessibility across a diverse user base.
goals
Goals: Needs intuitive and user-friendly interfaces that align with accessibility standards.
External Audience App Users
As an app user, I need accessible, engaging interfaces that support usability and inspire confidence in Dev Launchers.
challenges
Challenges: Ensuring ease of use and accessibility across a diverse user base.
goals
Goals: Needs intuitive and user-friendly interfaces that align with accessibility standards.
Developer
As a developer, I need a centralized design system to streamline component use in code and reduce redundancy across projects.
challenges
Challenges: Maintaining seamless integration with design components across different products.
goals
Goals: Needs a single source of truth for design values and components to reduce redundancy and promote modularity.
Developer
As a developer, I need a centralized design system to streamline component use in code and reduce redundancy across projects.
challenges
Challenges: Maintaining seamless integration with design components across different products.
goals
Goals: Needs a single source of truth for design values and components to reduce redundancy and promote modularity.
Dev Launchers Organization
As a nonprofit helping people launch tech careers, I need a cohesive design system to ensure efficiency, accessibility, and consistency across our products.
challenges
Challenges: Maintaining adherence to design system guidelines across various project teams while ensuring flexibility.
goals
Goals: Improve product development efficiency and support a unified brand experience.
Dev Launchers Organization
As a nonprofit helping people launch tech careers, I need a cohesive design system to ensure efficiency, accessibility, and consistency across our products.
challenges
Challenges: Maintaining adherence to design system guidelines across various project teams while ensuring flexibility.
goals
Goals: Improve product development efficiency and support a unified brand experience.
Discovery Process
Discovery for this system started with a conversation between myself and a lead developer at Dev Launchers. After reviewing internal projects we asked ourselves where is the consistency and why is everyone re-inventing the wheel? Looking out into the industry design systems seemed to be our answer. Through building understanding of tokens, style guides, modular design and systems design I have collaborated with various teams cross-functionally in the organization and we evolve together.
Discovery Process
Discovery for this system started with a conversation between myself and a lead developer at Dev Launchers. After reviewing internal projects we asked ourselves where is the consistency and why is everyone re-inventing the wheel? Looking out into the industry design systems seemed to be our answer. Through building understanding of tokens, style guides, modular design and systems design I have collaborated with various teams cross-functionally in the organization and we evolve together.
Concept to Creation
The first phase of discovery revolved around the Atomic Design methodology, where we broke down our design components into their most basic elements (atoms) and then combined them to form more complex structures (molecules, organisms, templates, and pages). We mapped out the fundamental elements that needed to be consistent across all projects, such as buttons, form inputs, and typography. This conceptual approach laid the foundation for a design system that was modular and scalable, allowing for continuous evolution as the organization’s needs grew.
Concept to Creation
The first phase of discovery revolved around the Atomic Design methodology, where we broke down our design components into their most basic elements (atoms) and then combined them to form more complex structures (molecules, organisms, templates, and pages). We mapped out the fundamental elements that needed to be consistent across all projects, such as buttons, form inputs, and typography. This conceptual approach laid the foundation for a design system that was modular and scalable, allowing for continuous evolution as the organization’s needs grew.
Audit & Adobe
After establishing the conceptual foundation, we conducted a comprehensive audit of the design practices and components being used across various teams within the organization. This audit uncovered significant disparities in how different teams implemented similar elements, which led to inefficiencies and a lack of consistency in user experiences. The audit confirmed the necessity of developing a unified, cohesive design system.
In parallel, we analyzed external design systems, such as the Adobe Spectrum Design System, to benchmark our efforts against industry best practices. Exploring Adobe Spectrum’s approach to tokens, style guides, and component consistency provided valuable insights into how we could structure our own system. This phase helped us craft a style guide that would standardize design patterns, ensuring consistency, accessibility, and high-quality design across all Dev Launchers products.
Audit & Adobe
After establishing the conceptual foundation, we conducted a comprehensive audit of the design practices and components being used across various teams within the organization. This audit uncovered significant disparities in how different teams implemented similar elements, which led to inefficiencies and a lack of consistency in user experiences. The audit confirmed the necessity of developing a unified, cohesive design system.
In parallel, we analyzed external design systems, such as the Adobe Spectrum Design System, to benchmark our efforts against industry best practices. Exploring Adobe Spectrum’s approach to tokens, style guides, and component consistency provided valuable insights into how we could structure our own system. This phase helped us craft a style guide that would standardize design patterns, ensuring consistency, accessibility, and high-quality design across all Dev Launchers products.
Planning
The planning phase was divided into two key efforts: independent planning for the initial production of the design system and collaborative planning with the Platform Enablement Team. I first focused on building foundational, reusable atomic components that could scale across projects. As the component library grew, we collaborated with Front-End Developers using React, Tailwind CSS, HTML, CSS, JavaScript, and TypeScript, with regular meetings and communication via Storybook to ensure alignment. As the system matured, the Universal Design Team was established to iterate and expand the library, during which I transitioned to a consultant role, focusing on design and accessibility while pursuing my degree. After completing my studies, I resumed an active leadership role, spearheading the integration of Figma Variables to enhance flexibility and adaptability.
Planning
The planning phase was divided into two key efforts: independent planning for the initial production of the design system and collaborative planning with the Platform Enablement Team. I first focused on building foundational, reusable atomic components that could scale across projects. As the component library grew, we collaborated with Front-End Developers using React, Tailwind CSS, HTML, CSS, JavaScript, and TypeScript, with regular meetings and communication via Storybook to ensure alignment. As the system matured, the Universal Design Team was established to iterate and expand the library, during which I transitioned to a consultant role, focusing on design and accessibility while pursuing my degree. After completing my studies, I resumed an active leadership role, spearheading the integration of Figma Variables to enhance flexibility and adaptability.
Testing & Evolving
Testing and iteration were critical to the success of the Universal Design System. We employed a rigorous testing approach that included:
Usability Testing: Conducted with internal teams (designers and developers) to gather feedback on component usability and overall system performance.
Accessibility Audits: Regular audits to ensure the system adhered to WCAG guidelines and was accessible to all users.
Feedback and Iteration: We established continuous feedback loops, which allowed us to identify areas for improvement and make iterative updates to the system based on user feedback and performance metrics.
Blockers and Pivots: Throughout the testing process, we encountered technical challenges, particularly when integrating Figma Variables. We also had to adapt the system to meet evolving organizational needs and align with industry standards, ensuring it stayed current and scalable.
Testing & Evolving
Testing and iteration were critical to the success of the Universal Design System. We employed a rigorous testing approach that included:
Usability Testing: Conducted with internal teams (designers and developers) to gather feedback on component usability and overall system performance.
Accessibility Audits: Regular audits to ensure the system adhered to WCAG guidelines and was accessible to all users.
Feedback and Iteration: We established continuous feedback loops, which allowed us to identify areas for improvement and make iterative updates to the system based on user feedback and performance metrics.
Blockers and Pivots: Throughout the testing process, we encountered technical challenges, particularly when integrating Figma Variables. We also had to adapt the system to meet evolving organizational needs and align with industry standards, ensuring it stayed current and scalable.
Challenges Identified
The creation of the Dev Launchers Design System revealed several fundamental challenges that impacted the team’s workflow, accessibility, and design consistency. These included starting from a blank canvas with no pre-existing standards, inefficiencies in repetitive design tasks, accessibility gaps, and inconsistent design practices across teams. Addressing these challenges was essential to building a cohesive and scalable design system.
Challenges Identified
The creation of the Dev Launchers Design System revealed several fundamental challenges that impacted the team’s workflow, accessibility, and design consistency. These included starting from a blank canvas with no pre-existing standards, inefficiencies in repetitive design tasks, accessibility gaps, and inconsistent design practices across teams. Addressing these challenges was essential to building a cohesive and scalable design system.
Blank Canvas
One of the primary challenges was starting from scratch, with no established design standards or component libraries. This blank canvas meant there were no existing guidelines for design or development consistency, making the initial phase particularly challenging as we had to define core components, style rules, and foundational elements without prior templates.
Blank Canvas
One of the primary challenges was starting from scratch, with no established design standards or component libraries. This blank canvas meant there were no existing guidelines for design or development consistency, making the initial phase particularly challenging as we had to define core components, style rules, and foundational elements without prior templates.
Inefficiency
Without a unified design system, teams faced inefficiencies as they frequently re-created similar UI components and patterns for each project. This redundancy not only slowed down project timelines but also created inconsistencies in user experience. Implementing a design system aimed to eliminate these inefficiencies by providing a centralized component library for quick, consistent access.
Inefficiency
Without a unified design system, teams faced inefficiencies as they frequently re-created similar UI components and patterns for each project. This redundancy not only slowed down project timelines but also created inconsistencies in user experience. Implementing a design system aimed to eliminate these inefficiencies by providing a centralized component library for quick, consistent access.
Inaccessible
The lack of accessibility standards across components led to inconsistent adherence to WCAG guidelines. Many design elements were not accessible to users with disabilities, posing a barrier to inclusivity. Building the design system allowed us to incorporate accessibility from the ground up, ensuring that all components met accessibility requirements for color contrast, font size, and navigability.
Inaccessible
The lack of accessibility standards across components led to inconsistent adherence to WCAG guidelines. Many design elements were not accessible to users with disabilities, posing a barrier to inclusivity. Building the design system allowed us to incorporate accessibility from the ground up, ensuring that all components met accessibility requirements for color contrast, font size, and navigability.
Consistency
Inconsistent design practices across teams meant that the user experience varied widely from one project to another. Colors, typography, and spacing differed across products, leading to a fragmented brand identity. Establishing a design system with standardized components and style guidelines addressed these inconsistencies, creating a cohesive and unified experience across all Dev Launchers products.
Consistency
Inconsistent design practices across teams meant that the user experience varied widely from one project to another. Colors, typography, and spacing differed across products, leading to a fragmented brand identity. Establishing a design system with standardized components and style guidelines addressed these inconsistencies, creating a cohesive and unified experience across all Dev Launchers products.
Insights for Iterations
Throughout the creation of the Dev Launchers Design System, several core insights guided iterative development, ensuring that the system was adaptable, cohesive, and sustainable. Key insights included establishing a brand foundation, building modular components using atomic design principles, fostering consistency through cross-functional collaboration, and maintaining a mindset of ongoing iteration and improvement.
Insights for Iterations
Throughout the creation of the Dev Launchers Design System, several core insights guided iterative development, ensuring that the system was adaptable, cohesive, and sustainable. Key insights included establishing a brand foundation, building modular components using atomic design principles, fostering consistency through cross-functional collaboration, and maintaining a mindset of ongoing iteration and improvement.
Brand is a Base
The first insight focused on translating Dev Launchers’ brand identity into a comprehensive style guide that would serve as the foundation for the design system. Starting with the brand book, we defined visual elements like colors, typography, and logo usage, creating a style guide that aligned all design work with the brand’s identity and accessibility goals. This guide established a solid framework, ensuring cohesive branding across all projects.
Brand is a Base
The first insight focused on translating Dev Launchers’ brand identity into a comprehensive style guide that would serve as the foundation for the design system. Starting with the brand book, we defined visual elements like colors, typography, and logo usage, creating a style guide that aligned all design work with the brand’s identity and accessibility goals. This guide established a solid framework, ensuring cohesive branding across all projects.
Build Atomic, Build Modular
To support scalability and adaptability, we implemented atomic design principles, breaking down UI elements into smaller building blocks that could be reused and combined to create more complex components. Inspired by Adobe’s Spectrum, we prioritized reusability and modularity, ensuring the system could grow with Dev Launchers’ evolving needs. This modular approach enabled designers and developers to efficiently build and update UI elements as needed.
Build Atomic, Build Modular
To support scalability and adaptability, we implemented atomic design principles, breaking down UI elements into smaller building blocks that could be reused and combined to create more complex components. Inspired by Adobe’s Spectrum, we prioritized reusability and modularity, ensuring the system could grow with Dev Launchers’ evolving needs. This modular approach enabled designers and developers to efficiently build and update UI elements as needed.
Communication for Consistency
Consistency was essential for maintaining brand recognition and user trust, so we established rules and guidelines within the style guide to unify design and development efforts. Cross-functional collaboration tools like Storybook enabled seamless integration and documentation of components, creating a shared environment for designers and developers. We expanded the documentation to include comprehensive guidelines covering component customization, responsive design, and accessibility, ensuring that each product maintained visual and functional consistency.
Communication for Consistency
Consistency was essential for maintaining brand recognition and user trust, so we established rules and guidelines within the style guide to unify design and development efforts. Cross-functional collaboration tools like Storybook enabled seamless integration and documentation of components, creating a shared environment for designers and developers. We expanded the documentation to include comprehensive guidelines covering component customization, responsive design, and accessibility, ensuring that each product maintained visual and functional consistency.
Maintenance Mindset
Recognizing that a design system must evolve with changing needs and technologies, we established a maintenance process for ongoing updates and iteration. Regular reviews and feedback loops allowed us to make improvements as necessary, ensuring that the system remained relevant, up-to-date, and capable of meeting new requirements. This maintenance mindset kept the design system adaptable and prepared for future challenges.
Maintenance Mindset
Recognizing that a design system must evolve with changing needs and technologies, we established a maintenance process for ongoing updates and iteration. Regular reviews and feedback loops allowed us to make improvements as necessary, ensuring that the system remained relevant, up-to-date, and capable of meeting new requirements. This maintenance mindset kept the design system adaptable and prepared for future challenges.
Product Features
The Dev Launchers Design System was developed with a focus on modularity, accessibility, and adaptability, ensuring a cohesive design framework that could scale efficiently across various products. This system prioritizes atomic components, accessibility, and dynamic customization, meeting the diverse needs of Dev Launchers’ teams.
Product Features
The Dev Launchers Design System was developed with a focus on modularity, accessibility, and adaptability, ensuring a cohesive design framework that could scale efficiently across various products. This system prioritizes atomic components, accessibility, and dynamic customization, meeting the diverse needs of Dev Launchers’ teams.
Atomic Components
The design system was built using atomic design principles, where smaller, reusable components serve as building blocks for more complex UI elements. This approach allows for consistent application across products, enabling teams to create, combine, and update UI elements efficiently. The atomic model fosters scalability, ensuring that new components can seamlessly integrate into the existing system.
Atomic Components
The design system was built using atomic design principles, where smaller, reusable components serve as building blocks for more complex UI elements. This approach allows for consistent application across products, enabling teams to create, combine, and update UI elements efficiently. The atomic model fosters scalability, ensuring that new components can seamlessly integrate into the existing system.
Accessibility-Forward Design
Accessibility was a core priority, with all components designed to comply with WCAG standards. This accessibility-forward approach included optimized color contrast, responsive typography, and navigable layouts, making it easier for users with disabilities to interact with Dev Launchers products. Incorporating accessibility from the ground up ensured that every component met inclusive design standards, promoting an equitable user experience.
Accessibility-Forward Design
Accessibility was a core priority, with all components designed to comply with WCAG standards. This accessibility-forward approach included optimized color contrast, responsive typography, and navigable layouts, making it easier for users with disabilities to interact with Dev Launchers products. Incorporating accessibility from the ground up ensured that every component met inclusive design standards, promoting an equitable user experience.
Variables for Evolving Needs
To support adaptability and customization, the design system leverages Figma variables, allowing components to dynamically adjust based on themes, device sizes, and specific use cases. This feature enables Dev Launchers teams to easily modify components to fit different product requirements without sacrificing consistency, providing flexibility as products evolve over time.
Variables for Evolving Needs
To support adaptability and customization, the design system leverages Figma variables, allowing components to dynamically adjust based on themes, device sizes, and specific use cases. This feature enables Dev Launchers teams to easily modify components to fit different product requirements without sacrificing consistency, providing flexibility as products evolve over time.
Outcomes and Expectations
The Dev Launchers Design System is an evolving project designed to support consistency, accessibility, and efficiency across the organization’s products. While specific efficiency metrics are still being gathered, initial feedback has been overwhelmingly positive, demonstrating the system’s value in fostering collaboration, accessibility, and design consistency across six internal teams.
Outcomes and Expectations
The Dev Launchers Design System is an evolving project designed to support consistency, accessibility, and efficiency across the organization’s products. While specific efficiency metrics are still being gathered, initial feedback has been overwhelmingly positive, demonstrating the system’s value in fostering collaboration, accessibility, and design consistency across six internal teams.
A Single Source of Truth for 6 Internal Teams
The design system has established a single source of truth for all internal teams, providing a centralized, accessible platform for component usage, predefined styles, and design standards. By offering this shared resource, the system promotes accessible learning and seamless collaboration across Dev Launchers’ global remote teams, ensuring that everyone operates within a cohesive framework.
Positive Internal Feedback
Early feedback from an internal survey has been exceptionally encouraging. Designers have rated the predefined styles as “very useful” to “extremely useful,” with 100% scoring them between 4-5 on a Likert scale. Additionally, feedback from one designer describing the system as a "work of art" highlights its perceived impact and necessity within the organization. This positive reception emphasizes the system’s role in improving design consistency and perceived quality.
Dynamic and Accessible Foundation for Growth
By prioritizing accessibility and adaptability, the design system offers a dynamic foundation that can evolve alongside Dev Launchers’ products and team needs. Built with flexibility through tools like Figma variables and ongoing feedback loops, the system is designed to be an adaptable resource that can incorporate market trends and user needs over time. This approach will allow the design system to scale and remain relevant, supporting the organization’s long-term goals.
A Single Source of Truth for 6 Internal Teams
The design system has established a single source of truth for all internal teams, providing a centralized, accessible platform for component usage, predefined styles, and design standards. By offering this shared resource, the system promotes accessible learning and seamless collaboration across Dev Launchers’ global remote teams, ensuring that everyone operates within a cohesive framework.
Positive Internal Feedback
Early feedback from an internal survey has been exceptionally encouraging. Designers have rated the predefined styles as “very useful” to “extremely useful,” with 100% scoring them between 4-5 on a Likert scale. Additionally, feedback from one designer describing the system as a "work of art" highlights its perceived impact and necessity within the organization. This positive reception emphasizes the system’s role in improving design consistency and perceived quality.
Dynamic and Accessible Foundation for Growth
By prioritizing accessibility and adaptability, the design system offers a dynamic foundation that can evolve alongside Dev Launchers’ products and team needs. Built with flexibility through tools like Figma variables and ongoing feedback loops, the system is designed to be an adaptable resource that can incorporate market trends and user needs over time. This approach will allow the design system to scale and remain relevant, supporting the organization’s long-term goals.
Project Status + Priorities
The project is ongoing, with continuous research, refactoring, and enhancement by the Universal Design Team and Platform Enablement Team. Teams currently consist of 3 UX Designers, 1 Graphic Designer, 3 UX Researchers, 1 Technical Lead, 1 Product Lead, and 1 UX Research Lead.
Project Status + Priorities
The project is ongoing, with continuous research, refactoring, and enhancement by the Universal Design Team and Platform Enablement Team. Teams currently consist of 3 UX Designers, 1 Graphic Designer, 3 UX Researchers, 1 Technical Lead, 1 Product Lead, and 1 UX Research Lead.
high priority
Conduct research and interviews with internal teams for actionable feedback.
Update and refactor the component library and guidelines based on feedback and industry standards.
medium priority
Conduct accessibility audits to ensure adherence to best practices and web accessibility guidelines.
Enhance and expand on documentation for components and best practices.
low priority
Monitor and track efficiency for design and development iterations.
high priority
Conduct research and interviews with internal teams for actionable feedback.
Update and refactor the component library and guidelines based on feedback and industry standards.
medium priority
Conduct accessibility audits to ensure adherence to best practices and web accessibility guidelines.
Enhance and expand on documentation for components and best practices.
low priority
Monitor and track efficiency for design and development iterations.
Reflection + Takeaways
reflect
Initiating the design system as a solo venture embedded accessibility and systemic coherence from the ground up. This endeavor advanced my design approach and instilled a profound appreciation for the meticulous architecture behind consistent, efficient digital experiences. Collaborating closely with organizational leaders, I continue to refine our design practices, ensuring our documentation on accessibility, best practices, and guidelines is comprehensive and current. As the system matured, I transitioned to a guiding role, mentoring peers to enhance their design acumen and collaborating with the team to implement and incorporate Figma Variants into our system.
learn
The importance of a well-structured design system, the benefits of atomic design principles, the value of cross-functional collaboration, and the necessity of accessible design and comprehensive documentation.
reflect
Initiating the design system as a solo venture embedded accessibility and systemic coherence from the ground up. This endeavor advanced my design approach and instilled a profound appreciation for the meticulous architecture behind consistent, efficient digital experiences. Collaborating closely with organizational leaders, I continue to refine our design practices, ensuring our documentation on accessibility, best practices, and guidelines is comprehensive and current. As the system matured, I transitioned to a guiding role, mentoring peers to enhance their design acumen and collaborating with the team to implement and incorporate Figma Variants into our system.
learn
The importance of a well-structured design system, the benefits of atomic design principles, the value of cross-functional collaboration, and the necessity of accessible design and comprehensive documentation.