Drafted — An AI-assisted system for structuring product narratives
Drafted is an AI-powered workflow designed to help designers and builders turn raw project notes into structured, recruiter-ready case studies. Instead of focusing on formatting or writing from scratch, Drafted guides users through a clear narrative structure—making it easier to communicate decisions, process, and impact.
About
Role: Product Designer + Builder (solo)
Timeline: 4 days (built for the Figma Make x Contra challenge
Stack: Figma Make + Supabase + GPT-based LLM
Problem
Case studies are one of the highest-effort, lowest-feedback parts of the design job hunt. Designers often have strong work, but struggle to translate scattered notes into a clear narrative that communicates decisions, constraints, and impact—especially under time pressure.
Designers waste time formatting and rewritting instead of clearly communicating product thinking.
Standards aren't consistent.
The same projects get rewritten repeatedly.
The process rewards storytelling polish as much as product tinking.
Confidential work creates gaps.
There's no feedback loop
Goals
I designed Drafted to solve three problems at once: structure, speed, and trust.
Remove the “blank page” problem with a guided storytelling flow
Help users capture a complete product narrative
Preserve the user’s voice while improving clarity and organization
Create exports (PDF/DOCX/TXT) and recruiter screens
Support iteration without forcing rewrites
One-Week Timeline
Solo designer/builder
Needed a complete end-to-end flow
AI had to improve clarity without inventing details or overwriting user voice
My approach
I treated this like a product problem, not a writing tool.
Discovery: I spoke with designers about where the portfolio/interview process breaks down and what makes case studies painful and repetitive.
Flow-first UX: I prioritized a guided flow to reduce cognitive load, rather than giving users an empty editor.
Design system: I built a lightweight system up front to keep UI decisions consistent and reduce build friction.
Ship & Iterate: I tested an early version with designers, synthesized feedback, and translated it into product decisions and roadmap priorities.
Solution
Drafted is a guided, prompt-based assistant that turns messy inputs into a structured case study draft users can refine and export.
User enters basic project context
Moves through structured prompts (problem, goals, challenges, users, decisions)
Drafted generates a cases study supporting selected framework(Standard / BUS / STAR / custom structure)
Edits inline, locks sections they like, regenerates only what needs improvement
Exports the output (PDF/DOCX/TXT) and reuses it for portfolios, interviews, and recruiter screens
How to Make it Better
Inline editing + version tracking
Lock sections + regenerate unlocked
Framework options
Export-first outputs (PDF/DOCX/TXT)
Built-in “How to make it better” critique module
AI approach
I integrated a GPT-based LLM and designed system prompts and constraints so the AI behaves like a senior product design coach—prioritizing structure, clarity, and decision logic, while preserving the user’s voice.
Drafted supports:
Converting unstructured notes into structured sections
Improving readability without rewriting intent
Generating variations only where needed (selective regeneration)
Suggesting story hooks and angles tailored to audience (i.e., hiring managers)
Iterations & Testing
I tested the first draft with designers and captured direct feedback about workflow expectations, trust, and usability. The feedback surfaced clear themes that guided the next iteration.
What users liked
The concept and direction: “clear and easy to test quickly”
The specificity of prompts: “so specific to build case studies… I don’t need to waste time writing prompts for other AI tools”
The presence of a suggestions section that helps strengthen the output
What users asked for
Clarifying questions before drafting
One tester ran a short, low-context input and the app generated a full blurb immediately. That’s a trust issue.
Design implication: Add a “clarify first” step when context is missing before generating output.Export expectations are baseline
Multiple testers asked for PDF/DOC export, confirming the “real-world workflow” need.
Design implication: Prioritize export formats and polish output for recruiter-ready sharing.
Draft should take visual precedence
One tester found notes and draft side-by-side distracting.
Design implication: Introduce a “Focus Mode” (collapse/minimize notes) to keep the draft primary.
If voice + PDF upload exist, they must be seamless
A tester liked the features, but noted the microphone didn’t recognize voice and PDF upload asked them to copy/paste instead. That creates expectation mismatch.
Design implication: Either make these features work reliably or hide them until they do—because broken input methods reduce credibility.
Validation through early qualitative testing
Clarifying-first generation to prevent low-context output
Export formats as a core workflow requirement
Focus Mode to reduce distraction
Reliability thresholds for inputs: voice and PDF upload