Before
Buttons
We had 19 different buttons, with variations in size, padding & spacing, color, fonts and states (hover & disabled)
During the audit I ensured to find buttons that were commonly used across the product to reduce the time after implementation of design system
After
A design system library with clear guidelines on primary, secondary & tertiary buttons and how and when to use it. I also made sure to create components for different states (hover, focus, pressed, disabled) that makes it faster and easy to design new screens as well as update the existing screens.
A documented video to show team members on how to easily use different states through the panel on right.
The Process
Solution
After identifying the inconsistencies, I categorized them into repeatable, reusable design components. I created a Design System Library with clear, reusable guidelines for buttons, form inputs, typography, colors, and layout
Design Audit
Conducted a visual and functional audit of the existing platform to identify inconsistencies in UI Patterns
Key Finding
Inconsistencies across key design elements such as buttons, form inputs, typography, colors, and layout. Without a consistent system, designers and developers had to guess styles, leading to rework and a slower development process.
Lack of design system made our design handoffs with developers inefficient since there were no clear design guidelines.
Inconsistency in UI patterns was affecting our MVP and brand trust while pitching the product to potential clients and investors
Without a modular design system there was lack of scalability and accessibility, to add new screens we had to create designs from scratch.
Problem we faced
How I approached the problem
Design Audit
Conducted a visual and functional audit of the existing platform to identify inconsistencies in UI Patterns
Stakeholder Interviews
Met with developers, PMs, and designers to understand pain points in handoff, reusability, and efficiency.
Market Research
Studied industry-standard design systems like Material Design, Atlassian, and IBM’s Carbon Design System to identify best practices.
Project goals & Impact
Led the end-to-end creation of the FlairX design system.
Collaborated with stakeholders, PMs, and engineers to ensure alignment and adoption.
Documented design principles, guidelines, and reusable components.
Conducted audits to identify inconsistencies and gaps in existing design patterns.
My Role
Led the end-to-end creation of the FlairX design system.
Collaborated with stakeholders, PMs, and engineers to ensure alignment and adoption.
Documented design principles, guidelines, and reusable components.
Conducted audits to identify inconsistencies and gaps in existing design patterns.
Project Overview
When I joined FlairX as a Product Designer, I identified a critical challenge: the absence of a design system. This gap led to inconsistencies in design elements across the platform, misalignment between design and development, and longer development cycles. Recognizing the need for a unified approach, I took the initiative to create a cohesive and scalable design system.
By collaborating closely with two other designers, product manager, developers, and stakeholders, I established a shared visual language and reusable components. This initiative not only accelerated the creation of end-to-end user flows but also ensured design consistency across the platform.
This design system was built for FlairX from scratch to improve operational efficiency and user experience. As the Product designer, I identified a need for a cohesive and scalable design system to ensure consistency, reduce development time, and create a unified brand experience.
Cohesive Design System for FlairX
Streamlining product development and enhancing user experience through a unified design language
Stakeholder Interviews
I interviewed 3 developers, 1 product manager, and 2 designers to understand pain points.
Key Insights
Developers
Question asked
"We need reusable components, otherwise we’re writing custom CSS for every new page"
What are the most time-consuming tasks when building a new screen?
What parts of the design are unclear or require clarification?
Do you have a preferred format for design handoffs?
Quotes
We need reusable components, otherwise we’re writing custom CSS for every new page.
We need reusable components, otherwise we’re writing custom CSS for every new page.
Design decisions
Based on the design audit and key insights from interviews I discovered three main issues to solve and laid out the foundation to start designing the solution