MarketCrunch AI · San Francisco, CADesigning a
Personal Quant.
Sole product designer at an angel-funded fintech AI startup. I owned the full design-to-deployment cycle across a live platform serving retail investors with 300M+ data points daily.
Responsibilities
Acted as a hybrid PM, Researcher, and Designer. Heuristic evaluation · IA redesign · Interaction design · Usability testing · React JS development in Cursor.
Cross-functional Collabs
Bhushan Suryavanshi (CEO, Wharton / Amazon) · Ashim Datta (CTO) · Sylvan (Research) · Harsh Parikh (Eng) · Raman Ebrahimi (Quant PhD).
Tools & Stack
React JS
Cursor
AsanaQuantified Impact & Business Growth
CEO · Post-Stealth Excerpt
"MAU grew ~16x, double-digit engagement growth... That wouldn't be possible without our small-but-mighty team who combined delightful UX and quantitative research rigor." — Bhushan Suryavanshi, Founder & CEO
Retail traders juggle too many tools and distrust hallucinating AI.
The Problem
Retail investors are burdened by fragmented workflows—jumping between screeners, watchlists, charts, news, and "gut feeling." While MarketCrunch possessed incredibly robust, non-hallucinating quantitative models (analyzing Treasury data, sentiment, and historical prices), the legacy interface lacked clarity and trust signals. Users bounded quickly from the Analyze page because the data felt overwhelming without proper Information Architecture.
Project Objectives & KPIs
- ✓Democratize Quant Research: Translate complex hedge-fund metrics into digestible, actionable UI.
- ✓Reduce Friction: Eliminate repetitive tasks (like ticker input) for high-frequency users.
- ✓Build Trust: Surface model accuracy clearly to mitigate AI skepticism.
- ✓KPIs: Reduce bounce rate, increase MAU, and optimize mobile discoverability.
Who are we building the personal quant for?
Through stakeholder interviews and product alignment, we anchored our design decisions around three core target personas. The goal was to serve the power user without alienating the beginner.
Julian Vance
Systematic Swing Trader
"I track AAPL and NVDA daily. I need to spot the trend confirmation before the market opens, and I hate retyping tickers."
Elena Rostova
Time-Constrained Investor
"I have a day job. I want a 60-second summary on whether the macros justify my long position in tech."
Marcus Lee
Novice Retail Trader
"These AI tools just guess. How do I know this bot is actually looking at real data and not just hallucinating?"
Mapping the Systematic Swing Trader's workflow to identify friction points.
Rigorous heuristic evaluation across 20+ screens to establish a redesign baseline.
Before touching any pixels in Figma, I conducted a structured heuristic evaluation benchmarked against Nielsen's 10 Usability Heuristics, WCAG 2.1 AA compliance, color contrast ratios, and typographic readability standards. I audited every core flow in the legacy application.
Competitor benchmarking (TradingView, Robinhood, Seeking Alpha) mapped out standard interaction patterns, highlighting where MarketCrunch's legacy platform suffered from "friction via novelty."
The audit surfaced critical P0 violations: no persistent mobile navigation (violating Recognition over Recall), a dead ticker bar (zero action affordances on the most visible element), and a trust signal absence for the core quant models. All findings were ranked by severity, documented, and triaged into Asana sprints.
Extracted Export of 10-Page Audit Document
Sprint 01
Strategy & Foundation
Week 1–2 · Jun 2025
A hybrid methodology: Design Thinking × Lean UX × Agile.
Operating in a fast-paced, angel-funded startup meant we couldn't afford a bloated 3-month research phase. Instead, we adopted a hybrid combo of Design Thinking, Lean UX, and Agile.
We used Design Thinking to empathize and frame the problem space, Lean UX to brainstorm and build rapid low-fidelity prototypes to validate assumptions, and daily Agile sprints to ship, gather Google Analytics feedback, and iterate endlessly.
Our continuous loop: Observe Needs → Brainstorm → Sprint Calls → Build (Low-fi) → Feedback → Refine (Hi-fi) → Code → Deploy.
Process Framework Implementation
We started with rapid ideation and low-fidelity wireframes, mapping out the Information Architecture before committing to visual polish. Pros/cons for each layout were evaluated with stakeholders before converting to high-fidelity utilizing the brand's design language.
Structuring the platform for intuitive wayfinding.
The legacy architecture suffered from shallow navigation paths and dead ends. I restructured the core site map to centralize the Analyze core loop, creating dedicated, persistent homes for AI Picks, Options, and Profile settings.
Sprint 02
Analyze Refactor
Week 3–5 · Jun–Jul 2025
Restructuring the core engine for clarity, action, and trust.
The Problem: Fragmentation
The legacy layout suffered from severe cognitive overload. Prior Accuracy, Technical Analysis, and Model Information were siloed across disparate UI regions. The ticker bar—the highest visibility element—was a dead surface with zero action affordances.
Legacy: Disjointed Layout
Legacy: Dead Ticker Header
The Approach: Designing the "Hit Rate" Trust Signal
To mitigate "AI skepticism," I designed the Hit Rate component. Instead of raw RMSE values, we translated accuracy into a color-coded streak (90, 30, 7, and 5-day windows). Utilizing progressive disclosure, it provides a glanceable trust signal that expands for detail without overwhelming novice traders.
Design System Component
The Solution: Proposed Desktop v1
The final architecture brought the Action CTAs (Add Alert, Share, Bookmark) directly into the newly modular Ticker Header. The Hit Rate, Sentiment, and Technicals were grouped sequentially in the primary eyeline, reducing cognitive load and creating a coherent narrative from Data-to-Decision.
Ticker Bar Redesign: Before / After
↓ 35% Bounce Rate
Due to improved trust signals.
↑ Virality CTAs
Share/Alert added to header.
Contextual Sidebar
Right rail isolated for macroeconomic News.
Sprint 03
Mobile UX & Design System
Week 6–8 · Jul 2025
Introducing a persistent navigation architecture for a mobile-first trading platform.
The Problem
MarketCrunch's primary use case is mobile, yet had no persistent navigation scaffold. Switching between Analyze, AI Picks, Options, and Market Pulse required memory-dependent paths — violating Recognition over Recall (Nielsen #6).
The Solution
A persistent bottom tab bar following iOS HIG + Material Design conventions — the most thumb-accessible zone per eye-tracking research. Icon + label pairs enable direct wayfinding with zero cognitive overhead.
Navigation Redesign : Introducing the Persistent Tab Bar
Data Table Redesign : The "Most Viewed" Feed
Refactoring for Density & Clarity: The legacy layout displayed long, obfuscated user strings (e.g., "pr******ep") and repeated dates across rows, causing unnecessary horizontal overflow (Left Sidebar).
I restructured the table to fit comfortably within a narrow mobile viewport (Right Sidebar). Obfuscated names were replaced with clean, color-coded profile alphabet badges (e.g., PY), and timestamps were moved inline below the metric view count to eliminate the redundant column.
Bottom Navigation : Component Library (All States)
Icon active, inactive, hover, and badge states, designed as a Figma component with property-driven icon swaps and label visibility toggle
Mobile prototype - looping live interaction flow showing bottom nav, hit rate component, and analyze page hierarchy
Marc AI - Mobile Interface Design Iterations
Design iteration explorations for Marc AI on mobile, testing chat panel positioning, avatar scale, and overlay vs. full-screen modal patterns
Building a shared component library to unify design–engineering handoff and enforce visual consistency.
With an active engineering team shipping features in parallel, design consistency requires more than style guidelines, it requires a component-driven design system that maps directly to the React component architecture. I built out the Figma component library using atomic design principles: atoms (icons, tokens, type styles) composed into molecules (cards, nav items, buttons) and organisms (navigation bars, modal shells, ticker headers).
Each component was documented with variant properties, interactive states (default, hover, active, disabled, error), auto-layout constraints, and spacing tokens, all exported via Figma Dev Mode directly to the React codebase. The left navigation was fully rebuilt using Google Material Design icons for systematic iconographic consistency, paired with an improved typographic scale and an "Upgrade to Pro" conversion card embedded as a permanent nav item.
Full Component Library - MarketCrunch AI Design System
Atomic component library - tokens, atoms, molecules, and organisms with variant properties and auto-layout
Left Nav - Redesigned Desktop Components
Material Design icons + improved typographic scale, all nav items with active, hover, and collapsed states
Left Nav - Upgrade to Pro Conversion Card
Embedded upsell card in left nav, passive navigation surface converted into an active conversion touchpoint
Pill Multi-Select - Filter Component Variants
Default, selected, disabled, and multi-select group states with auto-layout wrapping behavior
Add Alert - Interaction Flow Components
Default, triggered, confirmation, and error states - mapped to notification system backend
Left Nav Redesign - Live in Production
Shipped nav redesign - Material Design icons, refined typographic hierarchy, and Upgrade to Pro card live in production
Sprint 04
AI Trust & Conversion
Week 9–10 · Aug 2025
Designing a conversational quant that users actually trust.
Anthropomorphizing AI in fintech is risky. Users either over-trust or inherently distrust a conversational bot. We needed Marc AI to act as a translator for complex quant data, but it had to project competence, neutrality, and approachability.
I designed Marc's persona as a warm, middle-aged, friendly financial advisor. By avoiding the hyper-slick "hedge fund manager" trope and the robotic "cyborg" trope, we hit the sweet spot of approachability.
Marc AI Interface Design
Chat Modal Interaction
Optimizing the AI Picks & Payments Flow
The AI Picks page is our primary acquisition hook. I applied progressive disclosure gating—blurring content subtly to generate curiosity while demonstrating the structure of the value. For authenticated users, we provided list vs. card views.
Picks V1 (Discovery)
Picks V2 (Density)
Payments Modal
Search history dropdown: A low-implementation, high-yield feature.
My research indicated that Swing Traders (Persona 1) return to the same handful of tickers daily. By forcing them to re-type tickers every session, we were inducing friction. I designed a Search History dropdown to drastically reduce this recall burden.
🧑💼
Julian (Swing Trader)
"As a swing trader monitoring AAPL, TSLA, and NVDA, I want to re-access analyzed tickers without re-entering symbols — eliminating the 15+ weekly manual inputs that interrupt my analysis workflow."
Competitive Gap
Neither TradingView nor Seeking Alpha surface a persistent search history as a primary search interaction. This creates a compounding habituation advantage for MarketCrunch.
Platform growth, performance recognition, and closing the gap between design and code.
During this engagement, MarketCrunch exited stealth mode, completed UPenn's Venture Lab accelerator (VIPX), and secured $450K+ in SAFEs.
By bridging Product Management, UX Design, and React Development via Cursor, I was able to ship entire feature loops without blocking engineering. The hit rate feature and mobile redesign were the most-cited improvements in post-launch feedback.
CEO · LinkedIn · Post-Stealth Announcement
"In 2025, MAU grew ~16x, double-digit engagement growth (validates our 'core loop')... That wouldn't be possible without our small-but-mighty, technical team of Math/Physics PhDs and seasoned Mag7 builders, who combined delightful UX and quantitative research rigor."