Scaling a Fintech Ecosystem Through Shared Design Infrastructure

Mercurie was rebuilding its platform to support a broader customer base while replacing a legacy product that had evolved its offering. As the first design hire, my responsibility was more than just designing screens. I needed to define a foundation future products, designers, and engineers would build upon.

Working alongside active product development, I translated the company’s visual identity into a shared design language comprising semantic tokens, reusable components, documentation, and more, all production ready. The system initially supported the new customer platform then expanded to the marketing website, internal admin tools, legacy product redesign, and domain-specific features such as software marketplace, Wallets, KYC/Compliance, and more.

Role

Product Design Lead

Responsibilities

Design Systems, Product Design, UX Architecture, Engineering Collaboration

Deliverables

Customer-Facing Platform, Admin Portal, Legacy Platform, Marketing Page

Timeline

Q1 2025 -

Team

Dami / Product Design

Rather than treating the design system as a standalone, I built it alongside active product development. The result was a shared design language that reduced implementation friction, accelerated delivery, and later expanded across multiple products within the platform.

From Brand Identity to Product Infrastructure

Brand guidelines define how a company looks mainly to its users while a well thought out design system & infrastructure defines how the product behaves. The main challenge was to establish a shared product language that could support multiple teams, products, and features as the product or business scales without sacrificing functional user experience, visual consistency, or smooth implementation.

Many decisions made while establishing this system were made with two key questions in mind. Would this be able to support multiple products and features as the product scales? Can engineering implement it consistently? This shifted it from just designing a library of components to defining a foundation that interfaces and future team would follow.

Brand identity snapshot

Building the Foundation

I started off with a foundation/base library that would be shared across every screen this meant focusing on the primitives that would define how every screen functioned.

The base library included semantic colour tokens, typography, spacing, layout foundations, buttons, inputs, navigation, tables, and feedback patterns. These primitives were designed to form into larger interface patterns instead of existing as isolated components. As the team introduced new features, more complex components such as cards, modals, and toasts were built from this foundation rather than designed independently. This kept the system cohesive while reducing unnecessary variables.

Base Library: Button Specs

Base Library: Colors & Semantics

Base Library: Input Field

Base Library: Buttons

Shared Foundation Across Multiple Products

The design system wasn't built for a single platform. It became the shared foundation across Mercurie's product ecosystem. The same primitives were used in the marketing websites & product pages, customer platform, internal admin tools, and the redesign of the legacy product, Adpay. Within the customer-facing platform alone, the system came in handy for software discovery/marketplace, subscription management, wallets, KYC & compliance, analytics, settings, and support.

Each product and feature had different requirements, but they all inherited the same visual language, interaction patterns, and component architecture. Building on a shared foundation reduced repeated interface work while keeping the UX consistent as the platform scaled.

System In Use: Wallet/Accounts Page (Customer Platform)

System In Use: Software Marketplace (Customer Platform)

System In Use: Active Subscriptions (Customer Platform)

System In Use: Marketing Page (Desktop & Mobile)

System In Use: KYC/Compliance (Customer Platform)

System In Use: Approval Process (Internal Admin Platform)

Growing Product Needs a Growing System

As the platform scaled, new features were introduced which meant interaction patterns that didn't exist in the original library. For example, marketplace experiences had reusable product cards, pricing layouts, and filtering patterns. Wallet introduced financial interactions that had never existed elsewhere on the platform. KYC/Compliance required entirely different interaction models around document uploads, verification, and progress tracking. The distinction further shaped the growth of the design system.

designing for scale: Feature/product specific patterns built on base library

Legacy Product Redesign

One of the strongest validations of the system came from a project it wasn’t originally created for. The legacy platform, AdPay, had been built without a dedicated designer. Over time, UI inconsistencies accumulated alongside UX issues that contributed to user drop-offs.

I focused on improving the product itself mainly because the design system already existed, I didn’t need to redesign the visual language. Components were adapted to the product’s visual theme while maintaining shared interaction patterns and behaviours. The redesign concentrated on navigation, onboarding, wallet top ups, task completion, and reducing friction rather than recreating elements already solved in the ecosystem.

Before & After: Using established interface patterns meant efforts focused resolving user friction and UX issues

Before:

Outcomes

One design language: The system had a shared language for future product work. The system acted as a reference point for product decisions rather than relying on individual memory especially as the design team grew. This helped to reduce repetition while making interfaces predictable and cohesive across different use case.

Accelerating product growth: As Wallet, Marketplace, KYC, and Admin features were introduced, I extended an existing system instead of starting from blank screens. This also improved execution

Modernising existing product: The legacy redesign was another advantage. Making use of this shared system significantly reduced the interface work required and allowed more effort to be invested in solving UX problems that affected user behaviour

Reflections

Building the design system changed the way I thought about and approached product design especially realising that most important decisions or strategies aren’t just visual but structural. What was important was finding the right balance between designing interfaces and product relevance, and scalability over time.

Looking back, I don’t think of this project as just creating a design system or component library, I see it as defining the operating system for an ever evolving or growing product. The system allowed new additions inherit shared decisions while leaving room for domain-specific experiences where they genuinely added value.

👁️ For optimal viewing, please view this case study on a larger screen.

Scaling a Fintech Ecosystem Through Shared Design Infrastructure

Scaling a Fintech Ecosystem Through Shared Design Infrastructure

From Brand Identity to Product Infrastructure

Building the Foundation

Shared Foundation Across Multiple Products

Growing Product Needs a Growing System

Legacy Product Redesign

Outcomes

Reflections

Enter Password to continue