Scalable Design System
Client:
FNZ, leading fintech PaaS provider with over 12 million users worldwide
Duration:
2022 – MVP in 2 months – evolved over 1 year
Role:
Tools Used:
Figma, FigJam, WCAG Compliance Figma plugins and tools
Project Overview
As the lead designer, I developed a comprehensive and scalable design system in Figma for FNZ, an industry-leading international financial technology company. With a rapidly expanding product ecosystem with over 12 million users worldwide, a scalable solution was essential. By leveraging atomic design principles and reusable components, the design system enhanced efficiency while ensuring the platform remained adaptable for future innovation. After the system was fully established, it was shared with the companies FNZ acquired. The challenge was to ensure seamless adoption while maintaining design consistency, efficiency, and accessibility across multiple fintech products.
Problem-Solving Through Design Thinking
Stages of Design Thinking – Empathize, Define, Ideate, Design, Test, Iterate
The Three Lenses of Innovation – Viability, Feasibility & Desirability – a successful design system balances three core elements in order to find a “sweet spot”
Design Thinking, image source: Figma
1 – EMPATHIZE
With a complex and growing product ecosystem, design inconsistencies emerged across different teams and regions. The lack of a unified system led to inefficiencies, slowed down innovation, and created challenges in maintaining accessibility and scalability.
Design Audit
Audited legacy UI components and evaluated differences in complexity, overrides, and naming conventions.
UI Components Mapping
In cooperation with a UX designer, we mapped out all components and created a unified requirement list.
Key Insights from Competitors
Market Leaders: Material, Carbon, Microsoft Fluent, Atlassian DS, SAP Fiori, Shopify’s Polaris DS
Worth considering the adoption of following features:
-
IBM’s Carbon - robust documentation
-
Google’s Material Design best practices for accessibility.
-
IBM Carbon provides a modular approach for strong theming flexibility,
-
Standardize colors, typography, and spacing according to the competitor’s DS
-
Strengthen documentation and developer support for easier adoption.
-
Ensure accessibility compliance by following best practices.
Competitor Snapshots (Sources: IBM Carbon, BBC GEL, Google's Material Design)
2 – DEFINE
Research Question
How can we create a modular, scalable design system that ensures brand consistency, reduces design time, and can be easily rebranded to support different fintech products and also various brand identities?
Objectives & Goals
-
Scalability: Create a system that can grow with the company’s expanding product offerings.
-
Efficiency: Reduce design and development time by implementing reusable components.
-
Consistency: Standardize design patterns to ensure a unified user experience.
-
Rebranding Flexibility: Develop a system that allows effortless customization for different brands.
-
Accessibility: Ensure compliance with WCAG 2.1 standards for usability and inclusion (as of January 2023) while preparing for a smooth transition to the upcoming WCAG 2.2 and 3.0 standards.
Users & Their Needs
-
Designers: Ensure easy adoption with well-documented components.
-
Developers: Optimize developer handoffs by structuring the design system in alignment with developer terminology and workflows.
-
Product Managers: Ensure easy use of the design system and create a guide for non-designer roles
-
End Users: They will not use the design system itself, but they will benefit from a more intuitive and cohesive experience built using the design system.
Research shows that 70% of digital transformations fail, making a User-Centered Design (UCD) approach crucial for success by ensuring solutions align with real user needs and behaviors.
Common Patterns and Current Gaps
-
Unified the best principles for navigation, accessibility, and feedback.
-
Mapped out common UI components, naming conventions, and usability patterns.
-
Documented gaps in existing approaches to create a stronger foundation.
Excerpts from the define stage
3 – IDEATE …AND ITERATE!
Information Architecture and Component Library Development
I have I defined scalable UI patterns aligned with industry best practices and created a new design system from scratch, using modernized components based on atomic design principles.
Zoomed-out view of design system components
Low Fidelity UI
I started with low- and mid-fidelity designs and facilitated meetings where we collaboratively refined the conventions I proposed, incorporating feedback from designers, developers and other stakeholders to ensure alignment. After multiple iterations, I provided detailed documentation and essential assets. I onboarded designers from the acquired companies early in mid-fidelity stage, so they could start aligning their workflow and create or update their design framework. My team members played key roles in testing components in real-world use cases: one UX analyst for example developed a full set of scalable widgets based on real-world client iterations, another teammate contributed to establishing foundations, while a business analyst documented a comprehensive rebranding guide to help new users understand the system's logic and creation of the branches of the core design system.
Excerpts from the ideation stage
4 - DESIGN AND TEST
I finalized the high-fidelity UI, ensuring a polished design that included various states and variations. I developed adaptable components such as hover, active, and disabled states to maintain consistency and usability across different interactions.
To enhance responsiveness, I implemented auto-layout functions, allowing for flexible and scalable design adaptations across multiple screen sizes.
I created comprehensive documentation for both designers and developers to facilitate seamless adoption of the design system, ensuring clarity in usage and implementation.
Throughout the process, I maintained ongoing collaboration with developers, communicating with them regularly to address technical challenges and ensure smooth implementation of the design system.
I prioritized accessibility compliance, ensuring full adherence to industry standards to create an inclusive experience for all users.
Testing & Iteration
With MVP of the design system done in around 2 months, designers and developers tested interactions in real-world use cases. Based on the discovered pain points, I iteratively refined the components to improve functionality and user experience. I also performed benchmarking exercises to compare industry standards and ensure the design system met best practices.
Excerpts from the 4th stage
Building the icon library – defining rules
Results & Impact
40% Reduction in Design Time
Optimized workflows, freeing resources for innovation.
Easily Rebrandable
The system enables effortless multi-brand adaptation
Unified Global Identity
Established a consistent brand experience across regions.
Scalability for Future Growth
Supports the company's growth and fintech expansion
Conclusion
The comprehensive design system I developed, transformed the fintech platform, ensuring a scalable, accessible, and rebrandable framework. The system now serves as a core asset, helping the fintech leader innovate faster, scale seamlessly, and maintain a strong competitive edge. The design system should be applied with a pragmatic and creative approach — a principle I drew inspiration from BBC’s Design System. There are moments when the designer needs to step beyond the predefined rules to foster creative problem-solving. Striking the right balance between consistency and creativity is essential, allowing space for innovation while maintaining the integrity of the system.
To reflect on this project: when I started this design system in 2021, tools were still evolving. Components were flatter, tokens were manual, and documentation lived outside Figma. Since then, I’ve updated my workflow to include smart tokenization (to reduce unnecessary variations), interactive components, and inline documentation. I also use AI to speed up audits and merge legacy components, and involve developers earlier to align structure and naming. As design systems mature, I delegate parts of the work to junior designers, giving me more time to focus on strategy and system evolution.
Preview of the interactive guide