Client
Vanquish Holdings
Duration
10 W(Design), Ongoing (Dev)
Project Type:
B2C Copytrading App
Status:
Design Phase Completed, Development in Progress (MVP Released)
Scope:
- Strategy
- UI/UX Design
- Development
- QA
- Deployment
Platform:
Mobile (Flutter - iOS & Android), Web App (Next.js)
Project Overview
Vanquish is a next-gen mobile and web-based copytrading platform that empowers retail investors to replicate top trader strategies with ease. From intuitive onboarding to AI-powered performance analytics, our goal was to simplify complex trading workflows into beautiful, responsive, and insight-rich user experiences. The product needed to deliver seamless UX across both mobile and desktop platforms, while being scalable for future white-labeling.
Goals & Objectives
- Reimagine copytrading UX for mobile-first users
- Build a modular, reusable component library
- Ensure production-readiness with dev-handoff precision
- Combine real-time data, performance charts, and AI summaries
- Design for long-term scalability across devices and partners
Core Features
Mobile App (Flutter)
Onboarding + Profile Personalization
Strategy Marketplace with Filters
Live Portfolio + Performance Analytics
ROI / PnL Charts with Tooltips & Zoom
Notifications + AI Signal Alerts
Custom Calendars, Progress Bars, and Interactive UI
Real-time Updates (Supabase)
Web App
Public + Logged-in Dashboards
High-performance strategy pages
Rich data visualizations (Highcharts + Recharts)
ROI / PnL Charts with Tooltips & Zoom
Secure Auth, Payment Gateways
SEO-optimized pages and transitions
UX Design Process
- Discovery & Research: Reviewed competitors like Revolut, Robinhood, and Algo24
- User Flows: Crafted mobile-first architecture with 5 core modules
- Wireframes: Built over 65 High-fidelity layouts
- UI Design: Designed modular system in Figma with grid + spacing tokens
- Component Library: Created universal _components across platforms
- Dev Handoff: Detailed Figma handoff with notes, spacing, and API assumptions
Key User Needs
- Effortless KYC onboarding
- Transparent strategy discovery and analytics
- Ability to connect/disconnect with one tap
- Real-time ROI, drawdown, and win-rate tracking
- Mobile-native performance charts and portfolio control
Frontend & Backend
Frontend Challenge Summary
We aimed to deliver a native-quality mobile experience while managing heavy financial datasets. On Flutter, custom charting interactions (tooltips, zoom, animations) posed major UX challenges. We solved them with fl_chart, touch-gesture detection, and animation hooks. On web, SSR/SSG was critical for SEO and performance — solved using Next.js and Zustand for efficient API state. Tailored _components ensured design consistency across devices.
Backend & Integration Insights
To maintain scalability without a traditional backend team, we used Supabase for real-time database, auth, and API generation. For payments, Stripe powered secure billing and subscription flows. This stack allowed us to move fast, stay secure, and focus on user experience rather than server maintenance. We future-proofed the system for integrations with 3rd-party KYC, trading APIs, and notification logic.
Tech Stack & Architecture
Mobile (Flutter)
- fl_chart, Provider, Shimmer, MVC architecture
- Custom touch-enabled zoom charts
- Animated transitions, dynamic filters
- Real-time backend with Supabase Auth + DB
- Skeleton loaders, custom progress UIs
Web (Next.js)
- Next.js for SSR/SSG, TailwindCSS, Framer Motion
- Zustand for API-driven state
- Highcharts & Recharts for visualizations
- Stripe + Supabase for payments and auth
- Future-ready for SEO and performance optimization
Challenges & Solutions
Discovery & Research: Reviewed competitors like Revolut, Robinhood, and Algo24
Low-patience user group: Introduced animated loaders, AI summaries
Strategy credibility: Built detailed performance views with data clarity
Compliance: Designed license viewer + legal touchpoints without clutter
Cross-platform parity: Unified design language for mobile + web
Deliverables
65+ high-fidelity mobile app screens
63+ high-fidelity web app screens
Responsive web app layouts
Modular component libraries (Figma + code)
Style guides and tokens (colors, typography, grid)
Dev-ready handoff files
Gallery
Outcome
The Vanquish app redefines how modern investors engage with copytrading. With a native-feeling mobile app and a scalable web platform, it's ready for MVP launch, investor demo, and future white-label growth. We balanced AI, data, and ease of use into a single cohesive product.