AlphaBull AMC.

AlphaBull had simply outgrown their old broker-licensed portal. The previous system - built as a jQuery single-page app and hosted out of a single data center in Mumbai - was really showing its age. It took an average of 4.8 seconds just to become interactive on a 4G connection, occasionally dropped under heavy traffic, and lacked modern necessities like a native dark mode or accessibility features. On top of that, it offered no clear path to support SEBI's new KYC v2 requirements.

To make matters more frustrating, the firm's talented research desk was producing 8-12 valuable insights each week, but the outdated CMS couldn't surface these notes directly within the client's portfolio view. Customers were slowly moving to newer discount brokers - not because of the fees, but because the platform's experience felt stuck in the past.

We started by simply listening. We conducted 23 interviews with retail investors, relationship managers, and the compliance team to really understand their daily friction points. We also looked at how industry leaders like Groww, Zerodha, Smallcase, and Interactive Brokers were doing things. By diving into their existing analytics and session recordings, we uncovered something surprising: a massive 62% of their support tickets were just people asking "where is my X?" - meaning they had a navigation problem, not a product problem.

Additionally, our accessibility audit highlighted 47 different WCAG 2.2 AA failures. Many of these were simple color-contrast issues on the exact buttons their users needed to click the most.

We built our strategy around three core ideas: presenting fewer decisions on each screen, making research feel like a natural part of the experience, and seamlessly blending compliance into the UI. Instead of overwhelming users with data on a crowded dashboard, we decided to lead the home view with the single most important number - their total portfolio value. Everything else gracefully takes a step back.

By streamlining the platform, we were able to collapse the information architecture from four complicated levels down to just two, and we simplified the global navigation from 11 confusing items down to 5 clear choices.

• Single primary action per view - no competing CTAs, ever.
• Numbers tabular-aligned, monospace, with explicit +/- deltas - never colored red/green unless paired with arrow icons.
• Research notes inline in portfolio, not a separate tab.
• KYC status surfaced as a persistent chip - never a modal.
• Dark mode parity from day one - not a retrofit.
• Motion only to explain state changes - never to decorate.

We retired the firm's wordmark-only logo and rebuilt it on a custom-drawn Space Grotesk at -2% tracking, paired with Inter for clean UI body text. Color was reduced to institutional tokens: beige, charcoal, white, and a single authoritative gold #C5A059 reserved for CTAs and status indicators.

Spacing uses an 8px base - every gap, padding, and margin is a multiple of 4, 8, or 16.

The system lives in a single Figma library and a mirrored @alphabull/ui npm package. Every token is typed; every component ships with light, dark, and high-contrast variants. The grid is a strict 12-column with 24px gutters on desktop and a 4-column on mobile.

• 42 primitives - Button, Input, Select, Table, Toast, Sheet, Dialog, Tooltip…
• 18 patterns - Portfolio, OrderEntry, KYCFlow, ResearchCard…
• Tokens exported as CSS variables, Tailwind config, and iOS / Android JSON.

Built on Next.js 14 App Router with React Server Components for all read paths. Supabase handles auth + Postgres + real-time positions; Prisma is the typed data layer; Cloudflare sits in front for WAF and bot mitigation. next/image with AVIF, next/font self-hosting Space Grotesk, and a single GSAP ScrollTrigger instance for every scroll-bound animation.

• Edge-rendered on Vercel - Mumbai + Singapore regions.
• SEO via Metadata API, sitemap.xml, and JSON-LD for FinancialProduct.
• WCAG 2.2 AA · 47 failures → 0 · axe-core in CI.
• GSAP ScrollTrigger only - no Framer Motion in production paths.

The biggest hurdle we faced was the migration itself. With 150,000 live portfolios and real-time market data streaming in from the NSE, we had absolutely zero room for downtime. To play it safe, we ran both the new and old systems side-by-side for 6 weeks, carefully mirroring every single transaction before we finally flipped the switch.

Right in the middle of the project, SEBI introduced their new KYC v2 specifications. Thanks to our flexible architecture, we were able to quickly adapt the KYC module into a standalone, compliance-focused component - a move that ultimately saved us about 3 weeks of potential rework.