Built a guided case study builder that helps designers create portfolio-ready case studies in ~25 minutes. Features include template selection, step-by-step prompts with hiring manager tips, autosave, completion scoring, and PDF/JSON export.
Build portfolio-ready case studies in ~25 minutes. Step-by-step guidance with hiring manager tips. No sign-up required.
Choose a template to get started
Tell your story. Land the job.
Product designers know they need strong case studies to land jobs, but staring at a blank page is intimidating. They don't know what hiring managers actually want to see, so they either write too much or miss key sections entirely. The result: hours spent on case studies that don't showcase their real skills.
"I know I need case studies, but I never know where to start or what to include. I end up spending days on one and still feel unsure about it."— Product Designer preparing for job search
Choose from 6 project types: SaaS Product, Mobile App, Redesign, Feature Design, Research Project, or start blank. Each template pre-fills relevant skills.
Work through 7 focused sections: Overview, Problem, Solution, Process, Visuals, Impact, and Reflection. Each step has specific prompts and hiring manager tips.
Upload hero images and screenshots via URL. Visuals are often the first thing hiring managers look at.
The completion score (0-100%) shows which sections need more detail. Aim for 80%+ for a strong case study.
Export as PDF for job applications, download JSON for your portfolio site, or save to your account for later editing.
The blank page is intimidating. Templates with pre-filled skills reduce the "where do I start?" anxiety and help users get into flow faster.
Considered: Single blank template. Rejected: Users don't know what skills to list for different project types.
Designers don't know what recruiters actually look for. Tips like "Recruiters spend 30 seconds scanning - make your summary count" guide better content.
Considered: General instructions at the top. Changed: Contextual tips are more actionable.
A 25-minute workflow can't afford data loss. Browser crashes, accidental closes, and power outages happen. Autosave to localStorage with draft resume on return.
Considered: Manual save button. Rejected: Too easy to forget, devastating when it happens.
Users don't know when they're "done". A visible score provides closure and motivation. Sections contribute different weights based on importance.
Considered: Checkboxes per section. Changed: Percentage feels more complete and gamified.
Constrained choices reduce decision fatigue. A linear flow with prev/next is easier than managing 19 independent sections.
Considered: All sections on one page. Rejected: Overwhelming, leads to scroll fatigue.
Some users want to skip around after initial pass. Horizontal navigation pills let you jump to any step while maintaining the guided structure.
Considered: Only next/prev buttons. Changed: Too restrictive for editing flow.
Product design - defined the 7-step structure and template types
UX design - created the step-by-step flow with progress indicators
Content design - wrote the hiring manager tips for each section
Full-stack development - built with Next.js, React, Supabase
User testing - iterated on flow based on feedback
This tool solves the "blank page" problem for designers. Instead of staring at an empty document, users get templates, structure, and contextual guidance. The hiring manager tips ensure the output actually addresses what recruiters want to see.
Initially considered a more freeform approach, but user testing showed people got stuck without clear guidance.
Start with a guided, linear flow. You can always add flexibility later, but structure first reduces anxiety.
Early versions had a "How to Write a Case Study" guide at the top. Users skipped it.
Put tips exactly where users need them - right above the input field for that section.
Without a score, users abandoned mid-way because they didn't know how much was left.
Always show progress. The 0-100% score gives users a goal and shows what's missing.
Next.js 14 App Router with React state management. localStorage for autosave with 2-second debounce. Supabase for saved case studies with Row Level Security.
Vercel Analytics for page views. Console logging for debugging. No external tracking scripts.
All data stays in localStorage until explicit save. Saved case studies protected by Supabase RLS - users can only access their own data.
No API calls during editing - everything is client-side. 12kB page bundle. Sub-second interactions.
Every product decision involves trade-offs. Here are the explicit choices we made to prioritize speed and adoption:
Model
Free Tool (Lead Generation)
Pricing
Free - no premium tier
Target Market
Product and UX designers building job application portfolios
Revenue Projection
Free tool drives traffic to paid workshop and consulting services
Drag-and-drop image upload with Supabase Storage
See what makes this product work. Experience the UX decisions and features that solve real problems.
This is the kind of fast, validation-driven product work I now focus on.
Interested in working together? Get in touch