Back
Back
Web App Design system from 0-1
Web App Design system from 0-1
Web App Design system from 0-1
I developed a design system for a fintech platform that improved design consistency and scalability, resulting in a 60% adoption rate and a 30% reduction in design time.
I developed a design system for a fintech platform that improved design consistency and scalability, resulting in a 60% adoption rate and a 30% reduction in design time.
I developed a design system for a fintech platform that improved design consistency and scalability, resulting in a 60% adoption rate and a 30% reduction in design time.
Stakeholders
Stakeholders
Stakeholders
PM, Developers
PM, Developers
PM, Developers
Role
Role
Role
UX/UI Designer
UX/UI Designer
UX/UI Designer
Duration
Duration
Duration
6 Months
6 Months
6 Months
Context of the project
Context of the project
Context of the project
I led the development of the Design System, establishing foundations, a component library, and interaction guidelines to ensure consistency and scalability.
I led the development of the Design System, establishing foundations, a component library, and interaction guidelines to ensure consistency and scalability.
I led the development of the Design System, establishing foundations, a component library, and interaction guidelines to ensure consistency and scalability.
I collaborated with cross-functional teams to consolidate existing elements, design, test, document, and drive adoption. The first version was developed in 6 months and continued to evolve alongside product growth.
I collaborated with cross-functional teams to consolidate existing elements, design, test, document, and drive adoption. The first version was developed in 6 months and continued to evolve alongside product growth.
I collaborated with cross-functional teams to consolidate existing elements, design, test, document, and drive adoption. The first version was developed in 6 months and continued to evolve alongside product growth.
The problem
The problem
The problem
Inefficient Handoff: Excessive Annotation Slows Development
Inefficient Handoff: Excessive Annotation Slows Development
The absence of a design system led to a messy, inconsistent development process, forcing designers to spend excessive time on annotations for clarity. Without a scalable approach, inconsistencies caused wasted effort, miscommunication, and rework. As the product evolved, UI inconsistencies made updates slower and more error-prone. Implementing a design system streamlined workflows, improved efficiency, and ensured a seamless user experience.
The approach
The approach
The approach
I structured the design system using the Atomic Design methodology.
I structured the design system using the Atomic Design methodology.
I structured the design system using the Atomic Design methodology, starting with foundational elements such as color, typography, grid systems, elevation, spacing, and iconography—the smallest building blocks of the system. Within the project scope, my focus was on developing everything up to the organism level, ensuring a scalable and cohesive framework for future growth.
I structured the design system using the Atomic Design methodology, starting with foundational elements such as colour, typography, grid systems, elevation, spacing, and iconography—the smallest building blocks of the system. Within the project scope, my focus was on developing everything up to the organism level, ensuring a scalable and cohesive framework for future growth.
I structured the design system using the Atomic Design methodology, starting with foundational elements such as colour, typography, grid systems, elevation, spacing, and iconography—the smallest building blocks of the system. Within the project scope, my focus was on developing everything up to the organism level, ensuring a scalable and cohesive framework for future growth.
Aligned with existing branding
Aligned with existing branding
Developed the colour system by iterating on the existing brand guidelines in collaboration with the marketing team.
Developed the colour system by iterating on the existing brand guidelines in collaboration with the marketing team.
Working closely with the marketing team, I used the existing branding guide as a foundation to develop a cohesive and scalable color system. I refined the color palettes and type combinations through an iterative process, ensuring consistency across the product while maintaining brand alignment. This approach not only strengthened visual harmony but also improved accessibility by optimizing contrast ratios and usability for various interface elements.
Working closely with the marketing team, I used the existing branding guide as a foundation to develop a cohesive and scalable color system. I refined the color palettes and type combinations through an iterative process, ensuring consistency across the product while maintaining brand alignment. This approach not only strengthened visual harmony but also improved accessibility by optimizing contrast ratios and usability for various interface elements.
Working closely with the marketing team, I used the existing branding guide as a foundation to develop a cohesive and scalable color system. I refined the color palettes and type combinations through an iterative process, ensuring consistency across the product while maintaining brand alignment. This approach not only strengthened visual harmony but also improved accessibility by optimizing contrast ratios and usability for various interface elements.
Style guide - Continuing to build the design tokens
Style guide - Continuing to build the design tokens
Established foundational design principles, colour system, typography, and layout for consistency and scalability, and synced with developers.
Established foundational design principles, colour system, typography, and layout for consistency and scalability, and synced with developers.
I established key design principles to ensure scalability, accessibility, and consistency across all products. Working closely with frontend developers, I streamlined the existing color palette by standardizing hex codes and refining primary, secondary, neutral, and semantic colors for better adaptability. For typography, I consolidated existing font families while thoroughly documenting sizes, weights, line heights, and hierarchy to maintain readability and brand cohesion. I also developed a grid system with standardized spacing units and breakpoints, ensuring a responsive and structured layout. Additionally, I defined elevation and shadow levels to enhance visual hierarchy and depth.
I established key design principles to ensure scalability, accessibility, and consistency across all products. Working closely with frontend developers, I streamlined the existing color palette by standardizing hex codes and refining primary, secondary, neutral, and semantic colors for better adaptability. For typography, I consolidated existing font families while thoroughly documenting sizes, weights, line heights, and hierarchy to maintain readability and brand cohesion. I also developed a grid system with standardized spacing units and breakpoints, ensuring a responsive and structured layout. Additionally, I defined elevation and shadow levels to enhance visual hierarchy and depth.
I established key design principles to ensure scalability, accessibility, and consistency across all products. Working closely with frontend developers, I streamlined the existing color palette by standardizing hex codes and refining primary, secondary, neutral, and semantic colors for better adaptability. For typography, I consolidated existing font families while thoroughly documenting sizes, weights, line heights, and hierarchy to maintain readability and brand cohesion. I also developed a grid system with standardized spacing units and breakpoints, ensuring a responsive and structured layout. Additionally, I defined elevation and shadow levels to enhance visual hierarchy and depth.
Component library
Component library
Component library
Developed 200+ reusable components to enhance scalability and efficiency.
Developed 200+ reusable components to enhance scalability and efficiency.
At the foundational level, I created atoms, including buttons, icons, input fields, badges, and tooltips, serving as the building blocks for UI design. These were then combined into molecules such as forms, cards, notifications, tables, and lists, enabling efficient reuse across different features.
At a higher level, I developed organisms, which comprised more complex UI sections like navigation, headers, calendars, modals, search bars, and dashboards. This modular approach streamlined development, ensuring consistency and enabling scalability. By systematically building and documenting these components, I improved design efficiency and alignment across teams while allowing the system to evolve alongside product growth.
At the foundational level, I created atoms, including buttons, icons, input fields, badges, and tooltips, serving as the building blocks for UI design. These were then combined into molecules such as forms, cards, notifications, tables, and lists, enabling efficient reuse across different features.
At a higher level, I developed organisms, which comprised more complex UI sections like navigation, headers, calendars, modals, search bars, and dashboards. This modular approach streamlined development, ensuring consistency and enabling scalability. By systematically building and documenting these components, I improved design efficiency and alignment across teams while allowing the system to evolve alongside product growth.
Interaction & behaviour guidelines
Interaction & behaviour guidelines
Interaction & behaviour guidelines
Ensuring Accessibility, Compliance, and Responsiveness
Ensuring Accessibility, Compliance, and Responsiveness
To meet the complex security, compliance, and data visualization needs of this fintech product, I established standardized UI states, error handling, accessibility, and responsiveness. This included defining default, hover, active, disabled, and focus states for clear user interaction, as well as implementing standardized validation messages for consistent error handling.
To meet the complex security, compliance, and data visualization needs of this fintech product, I established standardized UI states, error handling, accessibility, and responsiveness. This included defining default, hover, active, disabled, and focus states for clear user interaction, as well as implementing standardized validation messages for consistent error handling.
Educating the team
Educating the team
Educating the team
Driving Adoption Through Collaboration
Driving Adoption Through Collaboration
To promote the adoption of the design system, I organized and led a webinar for the product and engineering teams, educating them on its structure, benefits, and best practices. The session highlighted how the system enhances consistency, scalability, and efficiency, providing practical guidance on implementation. Additionally, I hosted smaller Q&A sessions to address specific questions and gather feedback. To ensure alignment across teams, we also held discussions on naming conventions, refining terminology to meet cross-functional needs and improve collaboration. These efforts fostered engagement, streamlined workflows, and encouraged long-term adoption of the design system.
To promote the adoption of the design system, I organized and led a webinar for the product and engineering teams, educating them on its structure, benefits, and best practices. The session highlighted how the system enhances consistency, scalability, and efficiency, providing practical guidance on implementation. Additionally, I hosted smaller Q&A sessions to address specific questions and gather feedback. To ensure alignment across teams, we also held discussions on naming conventions, refining terminology to meet cross-functional needs and improve collaboration. These efforts fostered engagement, streamlined workflows, and encouraged long-term adoption of the design system.
Impacts
Impacts
Impacts
Achieved a 60% adoption rate and a 30% reduction in design time.
Achieved a 60% adoption rate and a 30% reduction in design time.
Achieved a 60% adoption rate and a 30% reduction in design time.
The design system achieved a 60% adoption rate, significantly promoting consistency across designs. By providing reusable components and standardized guidelines, it reduced designers' timelines by 30%, enabling faster iterations and more efficient workflows. This impact not only enhanced the overall design process but also improved cross-team collaboration and product development efficiency.
The design system achieved a 60% adoption rate, significantly promoting consistency across designs. By providing reusable components and standardized guidelines, it reduced designers' timelines by 30%, enabling faster iterations and more efficient workflows. This impact not only enhanced the overall design process but also improved cross-team collaboration and product development efficiency.
The design system achieved a 60% adoption rate, significantly promoting consistency across designs. By providing reusable components and standardized guidelines, it reduced designers' timelines by 30%, enabling faster iterations and more efficient workflows. This impact not only enhanced the overall design process but also improved cross-team collaboration and product development efficiency.
Learnings and Reflections
Learnings and Reflections
Documentation is Key: Clear and updated documentation ensures alignment across teams.
Documentation is Key: Clear and updated documentation ensures alignment across teams.
Documentation is Key: Clear and updated documentation ensures alignment across teams.
Timely Updates: Regular updates to the design system prevent inconsistencies and keep it relevant.
Timely Updates: Regular updates to the design system prevent inconsistencies and keep it relevant.
Timely Updates: Regular updates to the design system prevent inconsistencies and keep it relevant.
Collaboration and Feedback: Gathering feedback from all teams ensures the system meets everyone’s needs.
Collaboration and Feedback: Gathering feedback from all teams ensures the system meets everyone’s needs.
Collaboration and Feedback: Gathering feedback from all teams ensures the system meets everyone’s needs.
Design System is for All Teams: The design system supports all teams, not just designers, for better collaboration.
Design System is for All Teams: The design system supports all teams, not just designers, for better collaboration.
Design System is for All Teams: The design system supports all teams, not just designers, for better collaboration.
Educating the Team: Training sessions help teams understand and adopt the design system effectively.
Educating the Team: Training sessions help teams understand and adopt the design system effectively.
Educating the Team: Training sessions help teams understand and adopt the design system effectively.