Portfolio
Portfolio — Case Study Template
Copy-paste layout brief covering Hero Section, Project Overview, The Challenge and Research & Discovery — hand it to ChatGPT, Claude, or v0 as-is.
Portfolio — Case Study Template is a copy-ready build prompt for portfolio pages. Paste it into ChatGPT, Claude, v0 and iterate from the first draft it returns.
If something here is out of date, the source link below is always the canonical reference.
| Use case | Portfolio |
|---|---|
| Works with | ChatGPT, Claude, v0, Cursor |
| Source | websiteprompts.com |
Create a compelling case study page for a freelancer or creative portfolio. Include these sections:
1. HERO SECTION
Full-width impact:
- Large hero image (project screenshot or mockup)
- Project title: "Redesigning the E-commerce Experience for TechFlow"
- Client name/logo
- Quick summary: One sentence overview
- Project type badge: "Web Design" / "Brand Identity" / "UX Research"
Quick stats bar:
- Timeline: 8 weeks
- My Role: Lead Designer
- Team Size: 3 people
- Year: 2024
2. PROJECT OVERVIEW
Summary card or section:
- The Brief: What was I asked to do?
- The Client: Who are they? Industry, size, context
- Deliverables: What I created
- Tools Used: Figma, React, etc. (with icons)
3. THE CHALLENGE
- What problem needed solving?
- Pain points the client faced
- Business goals and KPIs
- Constraints (budget, timeline, technical)
- Why this mattered
Pull quote from client:
"We were losing customers at checkout and didn't know why."
4. RESEARCH & DISCOVERY
What I learned:
- User research conducted
- Competitor analysis
- Data/analytics reviewed
- Stakeholder interviews
- Key insights discovered
Visualizations:
- User journey map
- Persona cards
- Research findings summary
- Before/after comparison
5. THE PROCESS
Visual timeline or step-by-step:
Phase 1: Discovery
- Kickoff meeting
- Research and audit
Phase 2: Strategy
- Defining the approach
- Setting success metrics
Phase 3: Design
- Wireframes
- Visual design
- Iterations and feedback
Phase 4: Development (if applicable)
- Building the solution
- Testing
Phase 5: Launch
- Delivery and handoff
- Results tracking
Include for each phase:
- What I did
- Key decisions made
- Challenges overcome
6. THE SOLUTION
Visual showcase:
- Multiple high-quality images
- Desktop and mobile views
- Interactive prototype embed (optional)
- Before/after comparisons
- Detail shots of key features
Annotations:
- Call out specific design decisions
- Explain the "why" behind choices
- Connect back to user needs
7. KEY FEATURES HIGHLIGHT
3-4 feature spotlights:
- Feature name
- Screenshot/visual
- Problem it solves
- Why this approach
8. THE RESULTS
Measurable outcomes:
- Primary metrics with big numbers
- "156% increase in conversions"
- "40% reduction in bounce rate"
- "$500K additional revenue"
- "4.8/5 user satisfaction score"
- Secondary outcomes
- Awards won
- Press mentions
- User feedback quotes
Data visualization:
- Before/after comparison chart
- Growth over time graph
- Key metrics dashboard
9. CLIENT TESTIMONIAL
Featured quote:
- Extended testimonial (2-3 sentences)
- Client name and title
- Company name
- Client photo (optional)
- Star rating or "Would recommend" badge
10. LESSONS LEARNED
Reflection section:
- What went well
- What I'd do differently
- Skills developed
- Key takeaways
11. NEXT PROJECT NAVIGATION
- Previous/Next project links
- Thumbnail previews
- Project titles
- "View All Work" link
12. HIRE ME CTA
- "Want results like these for your project?"
- "Let's Work Together" button
- Contact form or email link
- Availability status
Design: Story-driven, visual-first. Large images. Generous whitespace. Pull quotes throughout. Results prominent. Mobile-responsive image galleries. Smooth scroll animations.How to use it
- Copy the full prompt with the button above.
- Paste it into your model and add your brand, copy and colours.
- Ask for one section at a time if the first pass is too broad.
Compiled and written by HowToPrompts from public sources. View original source ↗
← Back to Website Prompts