Building a Unified Design System for Fintech: How We Streamlined Experience and Boosted Efficiency at KredX

As a Product Design Manager at KredX, a fintech company serving HNIs, financial institutions, and large enterprises, I found myself in the middle of a design dilemma: each of our teams followed their own style guides, creating a patchwork of user experiences that felt more like a maze than a cohesive journey. One day, I realized we had over 77 unique colors and 97 different background colors across our products — basically, a rainbow gone rogue. Our design inefficiencies were slowing us down, and, worse, our users were getting lost in the chaos. It was clear — KredX needed a design makeover, and fast!

So, we embarked on a bold mission: to create a unified design system that would bring our products together under one seamless, user-friendly, and aesthetically consistent umbrella. What we didn’t know was that this journey would teach us more than we ever imagined.

Here’s the inside scoop on how we transformed chaos into consistency — and had fun doing it!

The Problem: Design Gone Wild

At KredX, each product team (or Pod) was doing its own thing. Different font sizes, clashing color schemes, and even varying design systems like Ant Design made it seem like our products were speaking different languages. The result? A disjointed user experience, brand confusion, and slow development cycles. To make matters worse, our primary brand color — a lovely teal (#32BFBD) — failed accessibility tests, making it hard to read for visually impaired users. Ouch.

After digging into the design files, we discovered a design crime scene: 343 color declarations, 77 unique colors, and an overload of button styles and components that didn’t play well together. Our products weren’t just inconsistent; they were confusing our users and slowing down our team.

The Solution: A Unified Design System

Enter the design system superhero cape. Our goal was to build a design system that could not only fix this mess but also ensure that all of our products felt familiar and user-friendly. Here’s how we did it:

1. Unified Yet Flexible:
We wanted a system that could be used across all products without losing flexibility. Think of it like building blocks — each component is reusable but adaptable to different needs. The goal was consistency, but without making everything look like a cookie-cutter template.

2. Humanizing Fintech:
Fintech doesn’t have to be all about sharp edges and cold, impersonal interfaces. We introduced slightly curved shapes and minimal corner radius to add a friendly, approachable vibe. This subtle touch gave our designs a professional yet inviting feel, perfect for our high-profile customers like CFOs and finance teams.

3. Accessibility by Design:
We didn’t just want to pass accessibility tests; we wanted to bake accessibility into the core of our design system. That teal? We adjusted it and simplified the color palette to meet contrast standards, ensuring that all users — whether visually impaired or not — had an equally great experience.

4. Color Simplicity:
We took our 77 colors and reduced them to a clean, cohesive palette of greys, teals, and blues. It was like decluttering a closet — you end up with fewer items, but everything fits perfectly and works together.

Tailoring Components to User Behavior

Our users aren’t just faceless data points — they’re real people with specific needs. We knew users of our cash management product loved using tools like Excel and Tally. So, we designed complex tables that mirrored those tools, making them feel right at home. For less complex products, we kept the components simple, proving that one size does not fit all, but a good design system can.

The Implementation Process: From Chaos to Clarity

Here’s a sneak peek into how we brought this design system to life:

1. Identifying Components:
We dug deep into every product and cataloged unique components. From buttons to tables, we dissected everything to create reusable, flexible building blocks that could adapt to any product’s needs.

2. User-Centric Design:
By observing how users interacted with complex tasks like cash management, we tailored our components to fit their workflows. This wasn’t just about making things look pretty — it was about making them work better.

3. Accessibility & Color Refinement:
We ran accessibility checks like a pro chef taste-testing a meal. Every color, every contrast was scrutinized. We then simplified our color palette to ensure it was both cohesive and accessible, saving us from future headaches.

4. Documentation:
We used tools like Adobe XD, Storybook, and Coda to document the entire system, making it easy for our team to access and contribute. Clear documentation was a game-changer for smooth implementation.

Key Learnings: What We Figured Out Along the Way

• Collaboration Is Key:
  We couldn’t have done this alone. The entire team — designers, developers, product folks — had to work together, aligning on goals and keeping communication open.
• User-Centric Design Informs Success:
  Our user research paid off. Understanding what our users needed, especially in complex tools like cash management, allowed us to design with purpose, not guesswork.
• Consistency = Efficiency:
  By standardizing components, we cut down on design and development time. It wasn’t just about looking good — it was about working faster and smarter.
• Accessibility Isn’t Optional:
  From the start, we made accessibility a priority. This decision saved us from future redesigns and made our products more inclusive from day one.
• Documentation Matters:
  Clear, concise documentation turned out to be a lifesaver, making it easy for our teams to adopt the new system without confusion.

The Outcome: So, Did It Work?

Absolutely. Here’s the data to prove it:

• 100% reduction in the need to create style guides for each new project.
• 50% reduction in prototype creation time. Thanks to Storybook, we only create wireframes for complex designs now.
• 6–10 days saved on average in development time. The design system eliminated UI handover issues, component adaptability problems, and the need for constant back-and-forth between design and development.

On top of that, the entire KredX product ecosystem is now unified, delivering a consistent, easy-to-navigate experience for users. Our teams? They’re rolling out features faster and more efficiently, and users love the streamlined interface.

Conclusion: The Fun Part

Building a design system from scratch might seem like a daunting task, but at KredX, it was one of the most rewarding projects we’ve tackled. We didn’t just create a system — we created a shared language for design and development, a tool that made everyone’s job easier and more fun.

If you’re thinking about embarking on a similar journey, my advice is simple: collaborate like crazy, listen to your users, and never compromise on accessibility. Oh, and enjoy the process — it’s one heck of a ride, and the results are totally worth it.