FinTech & Design Systems
FinTrack Personal Wealth UI/UX Design System
Comprehensive luxury design system and micro-interaction prototypes for next-gen wealth apps.
Screen Components45+ Bespoke Views
Investor Conversion$450K Pre-Seed Raised
Accessibility RatingWCAG 2.1 AA Compliant
The Challenge & Engineering Friction
A pre-seed fintech venture was pitching angel investors with a revolutionary multi-asset wealth management concept. However, their internal prototypes looked generic and cluttered, failing to communicate the premium trust required for a financial product managing personal capital.
Investors were dropping off during demo pitches because transaction categories, portfolio pie charts, and banking verification flows were confusing to navigate.
The Technical Solution & Architecture
ARdevlopers designed the complete FinTrack product identity and user experience. We created a high-density, luxury design system built on Obsidian Black (#050505), Velvet Carbon (#0c0c0c), Champagne Gold, and Mint Emerald accents.
We crafted 45+ pixel-perfect screen designs in Figma covering instant KYC onboarding, real-time portfolio net worth breakdowns, expense categorization, and smart investment goal setting. We exported an automated Tailwind token configuration file and interactive React storybook components, enabling their engineers to implement the frontend with zero guesswork.
Core Architectural Decisions
Design System Tokens
Semantic color tokens, modular typographic hierarchy (Inter + Outfit), and 4px spatial rhythm grid.
Developer Handoff
Tailwind CSS preset config mapping 100% of Figma variables directly into production utility classes.
Accessibility Verification
All text combinations tested and certified for contrast ratio compliance under WCAG 2.1 AA guidelines.
Key Engineering Features & Capabilities
Curated Obsidian and Champagne Gold design token library optimized for dark and light display environments.
Clickable high-fidelity Figma prototype with realistic micro-animations and swipe gestural interactions.
Intuitive biometric KYC identity verification onboarding user journey with zero friction drop-offs.
Interactive visual spending breakdown components featuring animated donut charts and trend forecasts.
Comprehensive design specification document with responsive auto-layout rules for iOS and Android displays.
Verified Handover Package & Deliverables
Master Figma project file with complete component variants, auto-layout constraints, and interactive states.
Exported Tailwind CSS configuration preset with complete color palettes, typography, and elevation shadows.
Investor presentation deck visual assets and animated high-resolution demo videos for pitch meetings.
Comprehensive UI style guide documentation detailing component usage guidelines and error states.
Project Specification
Industry SectorConsumer FinTech & Neobanking
Client / AudiencePre-Seed FinTech Founder Pod
Execution Timeline2.5 Weeks from Wireframes to Interactive Prototype
Deployment TargetFigma Cloud Workspace + React Tailwind Token Library
Engagement ModelProduct Design & Design Technologist Sprint
Technologies Used
FigmaDesign TokensTailwind CSSPrototypingUser ResearchDesign Systems