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
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