Back to all case studies
Zenith Capital logo
UI/UX DesignClient: Zenith Capital

FinTech Design System Rebuild Increases User Onboarding Completion to 94%

Created an enterprise-grade accessible design system in Figma and React, eliminating UX debt and accelerating engineer handover times.

Zenith Capital UI UX design system and product prototype
Click to Zoom
“Designed a unified Figma design system and tokenized component architecture. Onboarding completion jumped from 61% to 94% within 60 days.”
S
Sophie ChenVP of Product Design, Zenith

Executive Overview & Commercial Imperative

Zenith Capital is a premier wealth management and private equity investment platform managing $1.8B in private market allocations for accredited investors and family offices.

Over four years of rapid product evolution, their web and mobile applications had developed severe user experience fragmentation. Three independent engineering squads built features using disparate button styles, conflicting modal behaviors, and inconsistent form validation patterns.

Nowhere was this friction more damaging than during investor onboarding. Accredited investors abandoned the cumbersome identity verification (KYC/AML) process at an alarming rate of 39%, generating costly manual outreach from Zenith's relationship managers.

NaxtBrand was commissioned to lead a complete UX/UI design system overhaul—designing a tokenized design system in Figma, streamlining onboarding, and providing production-ready React components.


01 / The Architectural Challenge

Fragmented UI Patterns, UX Debt & 39% KYC Abandonment

An audit of Zenith's user interface cataloged over 45 distinct color shades, 18 typography variants, and 6 redundant form validation frameworks across web and mobile surfaces. Engineers spent up to 30% of sprint time resolving UI styling discrepancies rather than building core financial features.

More crucially, the investor onboarding process spanned 12 disjointed screens with dense financial legalities and opaque document upload requirements. Confusing error messaging and lack of progress transparency caused high-net-worth investors to abandon the workflow midway.

Critical Bottlenecks Identified During Initial Discovery:

  • 39% onboarding dropoff during crucial investor accreditation and identity verification steps
  • Severe design debt with 45+ divergent color values creating inconsistent user trust
  • Engineering sprint capacity drained by redundant CSS styling and component reinvention
  • Multiple accessibility violations failing WCAG 2.1 AA compliance standards

02 / The Engineered Strategy & Core Innovations

Tokenized Design System in Figma & Accessible React Primitives

NaxtBrand designed an enterprise design system dubbed 'Zenith Nexus' within Figma. We established a foundational token architecture covering color primitives, typography scales, responsive spacing units, and elevation shadows, coupled with automated Figma-to-code token synchronization.

We completely reimagined the investor onboarding journey into a progressive, transparent four-step workflow. By introducing real-time instant document validation, inline micro-copy explanations, and proactive status indicators, cognitive load was radically minimized.

Key Architectural Innovations Deployed:

  • Unified design token taxonomy (JSON tokens) synchronized between Figma and Tailwind CSS
  • Comprehensive Storybook component library with 80+ documented, accessible React components
  • Progressive 4-step investor onboarding flow featuring instant KYC feedback and zero cognitive friction
  • Full WCAG 2.1 AA compliance across all form elements, color contrast ratios, and screen readers

03 / Step-by-Step Execution Roadmap

PhaseMilestone TitleEngineering & Operational Scope
Phase 01UI/UX Friction Audit & User Journey MappingConducted usability sessions with active investors, cataloged 180+ UI discrepancies, and mapped high-friction onboarding dropoff milestones.
Phase 02Figma Tokenization & Design System CreationConstructed 80+ auto-layout Figma components, established design tokens, and built responsive web and mobile application prototypes.
Phase 03Storybook React Engineering & Onboarding RolloutCoded strict TypeScript/React component primitives with Tailwind CSS, verified WCAG 2.1 AA accessibility, and deployed the streamlined onboarding flow.

04 / Measurable Business Impact & ROI

94% Onboarding Completion & a 40% Acceleration in Engineering Velocity

The newly deployed onboarding workflow achieved an immediate breakthrough: completion rates among accredited investors jumped from 61% to 94% within the first 60 days of launch, eliminating manual relationship manager follow-up bottlenecks.

Simultaneously, the standardized React and Storybook design system accelerated engineering sprint velocity by 40%. Feature teams now build new wealth management modules in days rather than weeks, backed by 100% token consistency across all user touchpoints.

Verified Benchmark Improvements

Performance MetricResult AchievedProduction Context & Long-Term Value
Onboarding Completion94%Surged from 61%, converting high-net-worth investors seamlessly through digital KYC.
Sprint Velocity+40%Engineering squads shipped features 40% faster using pre-built Storybook components.
Design Token Coverage100%Eliminated fragmented CSS styles across web and mobile application surfaces.
Accessibility ComplianceWCAG 2.1 AAFully certified accessible design system accommodating all investor capabilities.
Production Technology Stack
Explore More

Related Production Results

View all (9) →
ApexFin Global•Web Engineering

FinTech Platform Latency Reduced by 74% with Next.js & Serverless Core

Modernized legacy monolithic banking portal into an event-driven Next.js 16 micro-frontend architecture with sub-50ms API response times.

99/100Core Web Vitals
+310%Lead Capture
42msP95 Latency

“Engineered custom software and Next.js web application architecture. Optimized Core Web Vitals to 99 and captured 3× more enterprise leads.”

Marcus Vance—VP of Engineering, ApexFin
ScaleFlow Cloud•Web Engineering

Multi-Tenant SaaS Platform Scaled to 1.2M Monthly Transactions

Engineered a resilient multi-tenant SaaS architecture utilizing Laravel 11, Redis queues, and Kubernetes orchestration.

1.2M+Monthly Events
-48%Server Cost
99.99%System Uptime

“Re-architected our core SaaS platform with Laravel 11 and Docker microservices. Scaled past 1.2M monthly transactions with zero downtime.”

Sarah Jenkins—Head of Product, ScaleFlow

NaxtBrand

Ready to Build and Scale with NaxtBrand?