The Challenge
The unlisted shares market in India is largely opaque — investors have historically relied on brokers with information asymmetry baked in. StakeHub needed a public-facing presence that demystified the platform, built credibility with first-time investors, and clearly communicated how buying and selling pre-IPO equity works. The design had to feel trustworthy — closer to a fintech product than a broker site.
My Role & Scope
Joined as a Frontend Developer at Stakehub Infotech. Owned the stakehub.in marketing site end-to-end: architecture, component design, animations, and deployment pipeline. Collaborated with the product and design teams on the product.stakehub.in dashboard, building reusable UI primitives used across both surfaces.
What Was Built
Market Overview Section
Real-time display of featured unlisted shares with price trends, sector filters, and deal status indicators to help investors make informed decisions.
How It Works Walkthrough
Animated step-by-step explainer that breaks down the unlisted shares process for first-time investors, reducing friction and support queries.
Trust Signals Architecture
SEBI registration details, transaction volume counters, press coverage, and investor testimonials structured to build credibility above the fold.
Performance-Optimised Animations
Scroll-triggered entrance animations using Framer Motion with reduced-motion support, all running on compositor-only properties for 60fps performance.
Technical Deep Dive
Challenge
Marketing site needed live share price data without adding server-side complexity or slowing time-to-interactive.
Solution
Used Next.js ISR (Incremental Static Regeneration) with a 60-second revalidation window, keeping pages statically fast while serving near-real-time data on key routes.
Challenge
Framer Motion animations caused layout shifts on low-end devices during initial hydration.
Solution
Wrapped all entrance animations in a mount-gated pattern — animations only activate after the component is hydrated, eliminating CLS from SSR/CSR mismatch.
Challenge
Design system needed to stay consistent across the marketing site and the product dashboard built by separate teams.
Solution
Extracted shared Tailwind tokens, typography scale, and base component variants into a shared config, giving both surfaces a coherent design foundation.
What I'd Do Differently
Building for a regulated financial product taught me that UI credibility is a product feature, not an afterthought. Every design decision — spacing, typography weight, colour choice — signals trustworthiness to an investor considering putting real money into the platform. I'd invest more time upfront in a formal design audit process for fintech projects in future.
Interested in building something similar?