Creating a scalable and consistent design system
CLIENT
IDX
ROLE
Design Team Lead
TIMELINE
2023 - 2024
IDX
RESPONSIBILITIES
- Design system deliverable
- Documentation of design
- Coaching internal teams
- Implement the new brand to the system
- Scale design internally across IDX Products
Unifying the product experience
Following the company’s recent rebrand, our Product VP requested an urgent reskin of a flagship project to match the new identity, but we quickly saw that the issue ran deeper — our product suite was plagued by inconsistent design patterns, fragmented styles, and duplicated work, making each product feel unrelated. We proposed a long-term fix: a centralized design system to save time and resources through reusable components, ensure brand consistency across all digital products, and embed accessibility standards into every design decision.
CHALLENGES
- Inconsistent design patterns
- No shared component library
- Outdated product UIs
- Tight delivery deadlines
- Accessibility gaps
- Lack of team-wide familiarity with design systems
High level goals
Establish a scalable design system usable across all product teams
Embed the new rebrand into every product consistently
Make accessibility a foundational requirement, not an afterthought
Provide flexible, reusable components for faster delivery
Create documentation and onboarding to support adoption
Establish a scalable design system usable across all product teams
Embed the new rebrand into every product consistently
Make accessibility a foundational requirement, not an afterthought
Provide flexible, reusable components for faster delivery
Create documentation and onboarding to support adoption
Unifying the product experience
Following the company’s recent rebrand, our Product VP requested an urgent reskin of a flagship project to match the new identity, but we quickly saw that the issue ran deeper — our product suite was plagued by inconsistent design patterns, fragmented styles, and duplicated work, making each product feel unrelated. We proposed a long-term fix: a centralized design system to save time and resources through reusable components, ensure brand consistency across all digital products, and embed accessibility standards into every design decision.
CHALLENGES
- Inconsistent design patterns
- No shared component library
- Outdated product UIs
- Tight delivery deadlines
- Accessibility gaps
- Lack of team-wide familiarity with design systems
Impact
220
Reusable components built for the design system
220
Reusable components built for the design system
220
Reusable components built for the design system
85
Text and color styles optimized for accessibility
85
Text and color styles optimized for accessibility
85
Text and color styles optimized for accessibility
1
Centralized source of truth for all digital product design
1
Centralized source of truth for all digital product design
1
Centralized source of truth for all digital product design
60%
Reduction in time to design new features due to reusable patterns
60%
Reduction in time to design new features due to reusable patterns
60%
Reduction in time to design new features due to reusable patterns
Building the system
We developed the design system in Figma, allowing for rapid iteration, easy collaboration, and version control. Accessibility was embedded from the start — every color choice, text style, and component met WCAG standards. We structured the library to make it effortless for designers and developers to find, understand, and implement components.
Building the system
We developed the design system in Figma, allowing for rapid iteration, easy collaboration, and version control. Accessibility was embedded from the start — every color choice, text style, and component met WCAG standards. We structured the library to make it effortless for designers and developers to find, understand, and implement components.
Building the system
We developed the design system in Figma, allowing for rapid iteration, easy collaboration, and version control. Accessibility was embedded from the start — every color choice, text style, and component met WCAG standards. We structured the library to make it effortless for designers and developers to find, understand, and implement components.
Building the system
We developed the design system in Figma, allowing for rapid iteration, easy collaboration, and version control. Accessibility was embedded from the start — every color choice, text style, and component met WCAG standards. We structured the library to make it effortless for designers and developers to find, understand, and implement components.
Seamless experience across products
The design system brought a new level of consistency and delight, creating a seamless experience across the entire suite. Unified components, refined interactions, and accessibility-first design ensured every product felt cohesive and polished, while subtle micro-animations added a sense of ease and enjoyment to everyday use.
Seamless experience across products
The design system brought a new level of consistency and delight, creating a seamless experience across the entire suite. Unified components, refined interactions, and accessibility-first design ensured every product felt cohesive and polished, while subtle micro-animations added a sense of ease and enjoyment to everyday use.
Seamless experience across products
The design system brought a new level of consistency and delight, creating a seamless experience across the entire suite. Unified components, refined interactions, and accessibility-first design ensured every product felt cohesive and polished, while subtle micro-animations added a sense of ease and enjoyment to everyday use.
Seamless experience across products
The design system brought a new level of consistency and delight, creating a seamless experience across the entire suite. Unified components, refined interactions, and accessibility-first design ensured every product felt cohesive and polished, while subtle micro-animations added a sense of ease and enjoyment to everyday use.
Supporting adoption internally
We ran training sessions and created step-by-step documentation to help product teams transition to the new system. We also introduced governance guidelines to ensure that future updates kept the system consistent and scalable.
Supporting adoption internally
We ran training sessions and created step-by-step documentation to help product teams transition to the new system. We also introduced governance guidelines to ensure that future updates kept the system consistent and scalable.
Supporting adoption internally
We ran training sessions and created step-by-step documentation to help product teams transition to the new system. We also introduced governance guidelines to ensure that future updates kept the system consistent and scalable.
Supporting adoption internally
We ran training sessions and created step-by-step documentation to help product teams transition to the new system. We also introduced governance guidelines to ensure that future updates kept the system consistent and scalable.
In retrospect
Creating the design system was not just about standardizing visuals — it transformed how our teams collaborated. By providing a shared language between design and engineering, we eliminated confusion, sped up delivery, and strengthened our brand presence. If I could do it again, I would introduce the system even earlier in the rebranding process, ensuring the digital product vision evolved in parallel with the brand guidelines.
In retrospect
Creating the design system was not just about standardizing visuals — it transformed how our teams collaborated. By providing a shared language between design and engineering, we eliminated confusion, sped up delivery, and strengthened our brand presence. If I could do it again, I would introduce the system even earlier in the rebranding process, ensuring the digital product vision evolved in parallel with the brand guidelines.
In retrospect
Creating the design system was not just about standardizing visuals — it transformed how our teams collaborated. By providing a shared language between design and engineering, we eliminated confusion, sped up delivery, and strengthened our brand presence. If I could do it again, I would introduce the system even earlier in the rebranding process, ensuring the digital product vision evolved in parallel with the brand guidelines.
In retrospect
Creating the design system was not just about standardizing visuals — it transformed how our teams collaborated. By providing a shared language between design and engineering, we eliminated confusion, sped up delivery, and strengthened our brand presence. If I could do it again, I would introduce the system even earlier in the rebranding process, ensuring the digital product vision evolved in parallel with the brand guidelines.