NuA: A Fintech Design System

Trust Payments is a comprehensive payment processing platform serving businesses across Europe and beyond. The company provides payment gateway solutions, merchant services, and financial technology tools that enable businesses to accept payments securely and efficiently.

Trust Payments offers multiple products including payment processing, merchant onboarding, transaction analytics, fraud prevention tools, and financial reporting dashboards across web and mobile platforms.

Problem Statement

How do we drive consistency across our fintech products while facilitating collaboration between design and development teams and making it easy to build scalable payment experiences?

1. Consistency

Products started looking inconsistent, both from visual and interaction standpoint, particularly in critical payment flows where user trust is paramount

2. Collaboration

There was significant back and forth between designers and developers before shipping payment features, slowing down critical financial product releases

3. Ease of Use

Designers and engineers were creating custom builds for payment interfaces that could have been reusable patterns, leading to inconsistent user experiences across financial touchpoints

Target User

Primary Users: Internal designers and frontend developers building fintech products at Trust Payments

Secondary Users: Merchants, business owners, and financial administrators using Trust Payments' platform for payment processing, transaction management, and financial reporting

This meant designing a system that empowers internal teams to build consistent financial experiences while ensuring end users feel confident and secure when handling sensitive payment data.

Contributions to the Design System

Working as a Product Designer with the design systems team, I contributed to building and enhancing NuA design system in various ways. Here are my notable contributions:

  1. Shipping Fintech Components

  2. Creating Design Tokens

  3. Frontend Collaboration & Implementation

  4. Token Scalability & Maintenance

  5. Expand Icon Library

01. Shipping Components

What I did?

Designed 8 core fintech components from scratch that are being used across Trust Payments' payment platform and merchant tools.

Owned end-to-end component design including user research with merchants, API integration considerations, responsive behavior, and security requirements specific to financial interfaces.

Components shipped:

  • Payment form components with validation states

  • Transaction status indicators and progress flows

  • Merchant dashboard cards with financial metrics

  • Secure input fields for sensitive payment data

  • Currency and amount display components

  • Payment method selection interfaces

  • Transaction history tables

  • Financial reporting chart components

Impact Created

  • Increased fintech component coverage by 70% across payment products

  • Saved approximately $45,000 and 1,200+ hours by creating reusable payment components

  • Reduced payment feature development time by 50%

  • Achieved 90% consistency across all financial interfaces

02. Creating Design Tokens

What I did?

Established comprehensive design token system for colors, typography, spacing, and component properties that work specifically for fintech applications requiring high trust and accessibility.

Created semantic token structure that supports multiple brands and white-label solutions while maintaining consistency.

Token categories created:

  • Color tokens: Primary, secondary, semantic (success/error/warning) for financial states

  • Typography tokens: 5 scales optimized for financial data readability

  • Spacing tokens: 8px grid system with fintech-specific considerations

  • Component tokens: Border radius, shadows, opacity for payment interfaces

  • Animation tokens: Duration and easing for secure interaction feedback

Impact Created

  • 100% consistency in visual properties across all payment products

  • Enabled white-label customization while maintaining system integrity

  • 60% reduction in design-to-development specification time

  • Created scalable foundation for future fintech product expansion

03. Frontend Collaboration & Implementation

What I did?

Worked closely with 12+ frontend developers to implement design tokens and components in React and Vue.js codebases, ensuring pixel-perfect implementation and optimal performance.

Collaborated on technical architecture decisions and created developer-friendly documentation and tools.

Collaboration activities:

  • Weekly design-dev sync sessions for component implementation

  • Created developer handoff documentation with coded examples

  • Paired with FE developers on complex component architecture

  • Established token naming conventions that work in code

  • Built Figma-to-code workflow using design tokens

Impact Created

  • 95% accuracy in design-to-development implementation

  • 50% reduction in developer questions and back-and-forth

  • Seamless token updates propagated across all products automatically

  • Enhanced developer experience with clear documentation and tools

04. Token Scalability & Maintenance

What I did?

Implemented scalable token architecture that supports multiple brands, themes, and product lines while maintaining consistency and performance.

Created maintenance workflows for token updates and deprecation management.

Scalability features:

  • Hierarchical token structure supporting global and product-specific values

  • Automated token sync between Figma and codebase

  • Version control system for token updates

  • Deprecation strategy for outdated tokens

  • Multi-brand support for white-label products

Impact Created

  • Seamless scaling to support 3 additional product lines

  • 80% reduction in token maintenance overhead

  • Automatic propagation of design updates across all products

  • Future-proof architecture for continued growth

05. Expanding Icon Library

What I did?

Defined design guidelines for creating and contributing icons to NuA design system, ensuring consistency across all fintech interfaces.

Identified and added 35+ system and product icons that are frequently used/requested across Trust Payments' financial products.

Icon contributions:

  • Payment method icons (credit cards, digital wallets, bank transfers)

  • Transaction status indicators (pending, successful, failed, refunded)

  • Security and verification icons (2FA, SSL, verified merchant badges)

  • Financial data visualization icons (charts, reports, analytics)

  • Navigation and interface icons optimized for fintech applications

  • Currency symbols and regional payment method icons

Impact Created

  • Established processes enabling designers to contribute icons systematically

  • Scaled icon library by 60% to handle new fintech products and use cases

  • 100% consistency in iconography across all payment interfaces

  • Enhanced user recognition through standardized financial symbols