Back
AI-first Product Design — Case Study
Sharpening the last mile of UPSC prep.
I designed and built Prayas AI's core experience as the sole designer — not as static mockups, but as near-production code in Claude Code, then handed to engineering to wire up the backend and ship.
Role
AI-first Product Designer
Scope
Sole designer · 4 modules · ~1 wk each
Output
Near-production React, handed to eng
Status
Live · in daily use
4
modules designed + built
~1wk
per module · brief → build
100%
handed off as code
10K+
Downloads on Playstore
Context
What Prayas AI is
Prayas AI is a practice app for serious UPSC aspirants — the ones who've finished covering the syllabus and now live or die by how sharply they revise and test themselves. It isn't where you learn the syllabus. It's where you practise, smartly.
Most tools stop at delivering content. Prayas starts where content ends — turning scattered material into focused, repeatable practice aspirants come back to daily.
The problem
Finishing the syllabus isn't the hard part
Once the syllabus is covered, the bottleneck moves — from knowing to practising the right things, often enough, without losing momentum. Three things got in the way.
01
Unfocused practice
No clear read on weak areas, so practice time scattered across everything — and sharpened nothing in particular.
02
Scattered material
High-value notes and PDFs piled up in Telegram and downloads, rarely reopened. Raw files aren't something you revise on a phone between two tasks.
03
Fading motivation
Solo, silent practice is the easiest thing to skip. Without stakes or feedback, consistency quietly erodes.
How I work — design → design engineering
Designer by role, builder by choice
I'm a UX designer by role — research, design, handoff. When Prayas AI adopted Claude Code, my handoff changed. This is the loop I run now, brief to working prototype I vibe-code myself.
Design
Design engineering
01 · Brief & research
Decode the brief with AI, sharpen it with domain experts, and shape validated hi-fi wireframes.
02 · Figma
Refine in Figma, then into Claude Code — my code design system mirrors it for a ~90% match, tweaked back in Figma.
03 · Claude Code
Approved modules which requires to provide prototypes rebuilt as a React prototype via Figma MCP — real interaction, then handed to dev.
2×
Output vs a typical designer
Dev
ready
Coded handoffs, not mockups
An AI-first design process — 2× the output of a typical designer.
Dev-friendly, coded handoffs and faster delivery — design reaches engineering ready to ship, not ready to rebuild.
Module 01 — Home & navigation
App Home & Navigations
Challenge. Four powerful surfaces — practice, Vault, AI assistant, Duel. The risk: a home that shows everything and starts nothing.
Decision. Home as a launchpad. Permanent bottom nav for the four destinations; the home screen pushes one thing — get into practice today — to the top.
Module 02 — AI Knowledge Vault
From Telegram dump to bite-size revision
Challenge. Aspirants hoard files in Telegram — gold buried in noise. Long PDFs don't get revised on a phone between tasks.
Decision. The Vault connects to a Telegram bot: files get processed by AI into bite-size, consumable units — short, scannable, built for repeat passes.
Text
—
Text
—
Text
—
Module 03 — AI assistant
A study companion that's always awake
Challenge. Aspirants get stuck at odd hours with no one to ask. An unresolved doubt becomes a gap.
Decision. An AI assistant grounded in the UPSC context — a calm, on-demand companion, not a generic chatbot, with a UI tuned for study over small talk.
Text
—
Module 04 — UPSC Duel
Making practice worth showing up for
Challenge. Solo practice is easy to skip. Motivation needed stakes.
Decision. A 1v1, real-time question battle — same questions, a live opponent, a result. Practice becomes competitive, social, and fun to repeat.
UPSC DUEL
—
UPSC DUEL
—
Foundations
A design system built for one-week cycles
Shipping a module a week, solo, only works if I'm not redrawing the same button every Monday. So I built the foundation every module assembles from — tokens, components, patterns.
It keeps four very different features feeling like one product — and it didn't stay in Figma. I turned the same system into code, which is where the next section picks up.
Typography
—
Components
—
Color Tokens
—
Components
—
Components
—
Craft
Design QA — closing the gap between design and build
Design isn't done at handoff. As engineering took each module live, I reviewed the running build against the design — caught where reality drifted from intent (spacing, states, edge cases) — and got it corrected. Craft survives in the details that are easiest to skip.
Finding Development Gaps
—
.
—
Outcome
Where it stands — and what I'd carry forward
Prayas AI is live and in daily use. The core experience I designed and built in code — home, Vault, AI assistant, Duel — is what aspirants spend their time in, after engineering wired it up and shipped.
5K+
active aspirants
2K+
practice sessions / week
80%
retention or engagement
Reflection
Designing in code, on a one-week loop, changed what "done" means for me — I commit early and prove it in something real instead of polishing in the dark. Next, I'd push past a single interview and close the loop with usage data on which practice formats actually move an aspirant forward.
Download app Prayas AI app
NOTE FROM Shubham
LAST UPDATED
July 24, 2026
CURRENTLY
Pune, India
say mestryshubham8@gmail.com
If you've made it this far...
Thank you for your time.
call 7448152353
