Payout management flexible design system
(
01
Challenge
A system without a Design system
Nexdha AI Fintech delivers payment solutions for merchants. The product included a large number of submodule, with design components scattered across multiple files. This making it difficult to maintain consistency and resulting in repetitive design work.
The absence of a centralized design system, particularly for complex patterns such as tables and configurable layouts, made it harder to reuse established solutions and maintain a cohesive visual language across Nexdha.
(
02
Atomic Phase
Establishing the Atomic Foundation
During the Atomic Design phase, we brought all existing components into one centralized system and organized them into a structured component library. We identified missing states and created the necessary variants to ensure components were complete and consistent across different use cases.
We also refined the color system based on WCAG guidelines, establishing accessible color combinations with recommended foreground and background pairings that work across both light and dark modes. This created a more consistent and accessible foundation for the design system.
(
03
Channelize phase
Defining Component Rules and Variants
Once we finalized the core elements, we started systemizing the components by assigning variables using primitive and semantic values. We defined the description and scope for each variant to establish clear guidelines for how and where each value should be used.
This structure helped the team apply the appropriate variables to the right components and maintain consistency across the design system.
(
04
Customisation
Flexible Layouts, Consistent Experiences
Designers can switch between layouts with a simple toggle, eliminating the need to recreate complex variations from scratch. The configurable system makes it easy to adapt layouts to specific product requirements while maintaining consistency across the design system.
Designers can also adjust component states, colors, and element visibility through predefined options, giving them greater flexibility without introducing new component variations.
(
05
ROI
Design-to-Code Consistency
The modular system helped save time for both designers and developers by improving efficiency and enabling stronger design-to-code parity. More importantly, it reduced visual inconsistencies across Nexdha’s application modules, resulting in a more cohesive and polished product experience.
3x
Adopt layouts with configurable components
(
06
Learnings
Key Takeaways
Design for Real Use: Build components around actual product needs and use cases.
Align as a Team: Clear communication helps designers and developers follow the same system.
Stay Flexible: A design system should evolve as product requirements change.
Avoid Assumptions: Validate component usage and requirements before creating new patterns.
Keep Improving: Regular feedback helps the design system stay consistent, useful, and scalable.
Credits