↝ CASE STUDY · INTERNAL TOOL
Redesigning the survey creation
Learnt to think beyond what’s expected.
ROLE
Product Designer
Target audiance
Researchers
TIMELINE
1 month
TOOLS
Figma · Claude · MCP
Problem
Researchers's productivity was at an all-time low. Their tools were slowing them down, delaying the work.they were dealing with:
Every action opened a modal. Settings lived on a separate page. Moving a question meant a 4-click journey and losing context.
Two decisions that fixed most of it
SOLUTION
Bring all in one layout.
MOVE 1 · IA
Reorganized the whole tool
Grouped every feature by the task it serves, and moved Settings, Languages, and Dashboards inside the survey workspace — where the work happens.
MOVE 2 · LAYOUT
One side-by-side canvas
As users after create questions the put logic on it and reorganize it add setting options so the best choice to them making everything in one canvas
PROCESS Process + KEY INSIGHTS
I mapped the existing IA and analyzed competitors , then i ran user interviews with the users so every decision traced back to a real finding.
Their insights
" Every question opens another modal. Then another."
"Undo doesn't work the way I expect — I lose work and do it again."
"I can't find where I was. There's no clear navigation."
"Building one survey takes way too long."
"Long answer text and labels look broken inside the inputs."
"Moving a question to another section is painful."
04. Before & after
05. Four challenges, four solutions
Labels for long questions & answers
Questions and answers often hold long text. Before, researchers typed every label by hand — slow, and too many inputs cluttered the screen.
Now a label sits quietly above each field, guiding researchers from the start — no manual typing, no clutter.
06. Testing & iteration
Instead of wireframes I used Claude to generate interactive HTML demos in hours. Users reacted to something real — faster, more specific feedback.
ROUND 1
Problem framing
Confirmed the modal-first pattern was the core frustration.
ROUND 2
HTML prototype
Most tasks passed — the Add-section button was invisible.
ROUND 3
Add-section redesign
Full-width, filled, high-contrast. Users found it instantly.
07. Design system & MCP
The handoff needed a full design system. With MCP I built it in one week — variable collections, component playground, Figma file.
08. How I worked
One designer, four weeks, one product team — using AI tools throughout to move faster without cutting corners.
1
Discover
Interviews, pain mapping
2
Define
IA + layout decisions
3
Design
HTML demos via Claude
4
Test
4 rounds, real users
5
Handoff
System via MCP
09. What changed for researchers
Measured in the final round against the same tasks in the old tool.
2.4×
Faster survey completion
−75%
Fewer clicks to Settings
8/8
Completed Move unaided
0
Modals in the core flow
"It feels like a tool now — not a form I'm fighting."
— Researcher, after the first walkthrough
10. What I learned
01
Solve the problem, not the look
Understand the user's real friction first, then design exactly enough to remove it.
02
Test with real demos
Claude-built HTML demos beat wireframes — people react to what feels real.
03
Get feedback early
Criticism at demo stage is cheap. At launch it's expensive.