Principles of UX / UI (Product Design): Building a UX Portfolio (Case Studies, Storytelling, STAR Method)

Building a UX Portfolio (Case Studies, Storytelling, STAR Method)

UX Portfolio Mastery: Case Studies, Storytelling & the STAR Method

A practical, portfolio-ready study guide for aspiring product designers, graphic designers transitioning to UX, and bootcamp students.

What This Is

A UX portfolio case study is a structured, narrative-driven project showcase that proves you can solve real design problems—not just make things look pretty. Think of it as a mini-documentary of your design process, where you: - Define a problem (e.g., "Users abandon carts because checkout takes 5+ steps").
- Research why it happens (e.g., "80% of users drop off at the payment screen").
- Design solutions (e.g., "Simplified checkout to 2 steps with guest checkout").
- Test and iterate (e.g., "A/B tested the new flow; drop-off decreased by 30%").

Why it matters: Hiring managers don’t care about your final mockups—they care about how you think. A strong case study demonstrates design thinking, collaboration, and impact (e.g., "Redesigned a hospital’s appointment booking flow, reducing no-shows by 25%").

Key Terms & Principles

Portfolio-Specific Terms

• Case Study: A project narrative that walks through your process (problem → research → ideation → solution → impact). Example: "How I improved a food delivery app’s order tracking for 1M+ users."
• STAR Method: A storytelling framework for case studies:
• Situation (context: "Users struggled to find vegan options in the app").
• Task (your role: "I was tasked with increasing vegan order conversions").
• Action (what you did: "Conducted user interviews, redesigned the filter UI").
• Result (outcome: "Vegan orders increased by 40% in 3 months").
• Design Thinking: A 5-phase problem-solving framework (Empathize → Define → Ideate → Prototype → Test). Example: Using it to redesign a banking app’s onboarding flow.
• Heuristic Evaluation: A usability audit using Nielsen’s 10 Heuristics (e.g., "The ‘Submit’ button was too small—violates Fitts’s Law and Visibility of System Status").

Design Principles & Laws

• Hick’s Law: More choices = slower decisions. Example: Simplifying a restaurant menu from 50 items to 15 categories to reduce decision fatigue.
• Jakob’s Law: Users expect interfaces to work like ones they already know. Example: Placing a shopping cart icon in the top-right corner (like Amazon).
• Miller’s Law: The average person can hold 7±2 items in working memory. Example: Grouping a long form into 3-4 sections (e.g., "Personal Info," "Payment," "Review").
• Von Restorff Effect: Standout items are more memorable. Example: Making a "Pro" subscription tier a different color to draw attention.
• Progressive Disclosure: Show only what’s needed at each step. Example: A multi-step form that reveals fields as the user progresses (e.g., TurboTax).
• Affordance: Design elements should suggest their function. Example: A 3D button that looks "clickable" vs. a flat, ambiguous shape.
• WCAG Contrast Ratio: Text must have a 4.5:1 contrast with its background for accessibility. Example: Dark gray (#333) on light gray (#EEE) fails; black (#000) on white (#FFF) passes.

Research & Testing Terms

• Usability Testing: Observing users completing tasks to find friction points. Example: Watching a user fail to find the "Cancel Subscription" button.
• User Interview: A conversation to uncover pain points (not the same as usability testing!). Example: Asking, "What’s the most frustrating part of booking a doctor’s appointment?"
• A/B Testing: Comparing two versions of a design to see which performs better. Example: Testing a green vs. blue "Sign Up" button to see which gets more clicks.
• Guerrilla Testing: Quick, informal testing with random users (e.g., asking strangers in a café to try your prototype).

Step-by-Step: How to Build a Killer Case Study

Step 1: Pick the Right Project (Quality > Quantity)

✅ Do:
- Choose 2-3 deep case studies (not 10 shallow ones).
- Pick projects with clear impact (e.g., "Increased sign-ups by 20%").
- Include variety (e.g., one mobile app, one website, one physical product).

❌ Avoid:
- Redesigning Instagram (too generic; show your unique process).
- Projects with no research or testing (just "I made it look pretty").

Figma Action: Create a project selection matrix (spreadsheet or sticky notes) to compare: | Project | Problem Solved | Research Done? | Impact Measured? | Visuals Available? | |------------------|----------------|----------------|------------------|--------------------| | Food Delivery App | High cart abandonment | ✅ User interviews | ✅ 30% drop-off reduction | ✅ High-fidelity mocks | | Personal Website | Low engagement | ❌ No research | ❌ No metrics | ✅ Visuals only |

Step 2: Structure Your Story (STAR Method)

Use this template for each case study (adjust based on your project):

1. Situation (Context)

• Problem: "Users abandoned the checkout flow at the payment screen."
• Why it matters: "This cost the company $50K/month in lost sales."
• Your role: "I led UX research and redesign for the checkout flow."

Visual Example (describe in text):

"The old checkout had 5 steps (Cart → Shipping → Billing → Payment → Confirmation). Analytics showed 60% of users dropped off at the ‘Payment’ screen, where they had to manually enter card details."

2. Task (Your Goal)

• "Reduce checkout drop-off by 25% in 3 months."
• "Improve the payment experience for mobile users."

3. Action (Your Process)

Break this into 3-4 key phases (e.g., Research → Ideation → Design → Testing). For each: - What you did (e.g., "Conducted 10 user interviews").
- Why you did it (e.g., "To understand why users abandoned at payment").
- What you learned (e.g., "Users hated typing card details on mobile").
- How you applied it (e.g., "Added Apple Pay/Google Pay as one-tap options").

Figma Action:
- Create a process timeline (e.g., a horizontal flow with icons for each phase).
- Add screenshots of artifacts (e.g., interview notes, sticky notes from a workshop, wireframes).

Visual Example (describe in text):

"I sketched 3 wireframe variations for the payment screen: 1. Minimalist: One-tap payment buttons at the top.
2. Progressive: Card details auto-filled from saved info.
3. Hybrid: Both options, with a toggle for ‘Save card for later.’ I tested these with 5 users via guerrilla testing in a café. Version 1 performed best (80% success rate)."

4. Result (Impact)

• Quantitative: "Checkout drop-off decreased by 30%."
• Qualitative: "Users said the new flow felt ‘effortless.’"
• Business impact: "Increased revenue by $15K/month."

Figma Action:
- Add a before/after comparison (e.g., side-by-side screenshots with metrics).
- Include a quote from a user or stakeholder (e.g., "This is the first time I’ve seen our conversion rate improve in a year!" — Product Manager).

Step 3: Design Your Case Study Layout (Figma Tips)

Goal: Make it scannable, visual, and engaging (like a blog post + portfolio hybrid).

Recommended Structure:

1. Hero Section (1-2 lines + visual):
2. Headline: "Reducing Checkout Drop-Off by 30% for a Food Delivery App"
3. Subhead: "How I redesigned a 5-step payment flow into a 2-step, mobile-friendly experience."

4. Hero image: Before/after screenshot or a key moment (e.g., user testing a prototype).

5. The Problem (1-2 paragraphs + visual):

6. Describe the problem with data (e.g., "60% drop-off at payment screen").

7. Add a screenshot of the old design with annotations (e.g., "Users struggled to find the ‘Continue’ button").

8. My Role & Process (timeline or flowchart):

9. Use icons or a horizontal timeline (e.g., ? Research → ? Ideation → ✏️ Design → ? Testing).

10. Add photos of artifacts (e.g., sticky notes from a workshop, whiteboard sketches).

11. Key Insights & Solutions (3-4 bullet points + visuals):

12. "Insight: Users hated typing card details on mobile. Solution: Added Apple Pay/Google Pay as one-tap options."

13. Add side-by-side comparisons (e.g., old vs. new payment screen).

14. Results & Impact (metrics + testimonials):

15. "↓ 30% drop-off | ↑ $15K/month revenue | 4.8/5 user satisfaction score."

16. Add a quote from a user or stakeholder.

17. Reflection & Learnings (1 paragraph):

18. "What I’d do differently: Test earlier with low-fidelity prototypes to save time."
19. "Key takeaway: Small UI changes (like moving a button) can have huge business impact."

Figma Pro Tips:
- Use auto-layout for consistent spacing.
- Stick to 2-3 fonts (e.g., bold headers, regular body text).
- Add micro-interactions (e.g., hover effects on buttons) to make it feel interactive.
- Export as a PDF (for Behance/Dribbble) and interactive prototype (for your website).

Step 4: Polish for Clarity & Impact

• Kill jargon: Replace "I utilized heuristic evaluations" with "I audited the design for usability issues."
• Show, don’t tell: Instead of "I improved the onboarding," say "I reduced onboarding steps from 7 to 3, increasing completion by 40%."
• Add a "TL;DR" section (for recruiters who skim):

  "Problem: 60% of users abandoned checkout at payment.
  Solution: Simplified to 2 steps with one-tap payments.
  Result: 30% drop-off reduction, $15K/month revenue increase."

  
  

Common Mistakes (And How to Fix Them)

Mistake 1: The "Pretty Pictures" Portfolio

• What happens: Only showing final mockups with no process or impact.
• Why it’s bad: Hiring managers can’t tell if you solved a problem or just made something look nice.
• Fix:
• For every project, ask: "What problem did I solve? How did I solve it? What was the impact?"
• Add research artifacts (e.g., interview quotes, survey results) and process visuals (e.g., wireframes, user flows).

Mistake 2: Vague Problem Statements

• What happens: "I redesigned the app to make it better."
• Why it’s bad: "Better" is subjective—recruiters want specific, measurable problems.
• Fix:
• Use data (e.g., "Users spent 3+ minutes searching for products—2x longer than competitors").
• Frame it as a user pain point (e.g., "Parents struggled to find kid-friendly recipes in the app").

Mistake 3: No Story Arc

• What happens: A list of steps with no narrative (e.g., "I did research → I made wireframes → I tested").
• Why it’s bad: Feels robotic and forgettable.
• Fix:
• Use the STAR method to create a beginning, middle, and end.
• Add conflict (e.g., "Stakeholders wanted to add more features, but research showed users were already overwhelmed").

Mistake 4: Over-Explaining Tools

• What happens: "I used Figma’s auto-layout to create a responsive grid system."
• Why it’s bad: Recruiters care about outcomes, not tools.
• Fix:
• Only mention tools if they’re relevant to the story (e.g., "I used Figma’s prototyping tools to test micro-interactions with users").
• Focus on why you used a tool (e.g., "I chose Miro for remote card sorting to include global users").

Mistake 5: No Visual Hierarchy

• What happens: Walls of text with tiny screenshots.
• Why it’s bad: Recruiters spend <30 seconds per case study.
• Fix:
• Use large, bold headings (e.g., "The Problem" vs. "problem").
• Add white space (don’t cram everything into one screen).
• Highlight key metrics in a different color (e.g., "↓ 30% drop-off").

Design Interview / Portfolio Tips

What Interviewers Look For

1. Problem-First Thinking:
2. They want to see that you start with the user, not the solution.
3. Red flag: "I saw this cool animation on Dribbble and wanted to use it."

4. Green flag: "Users struggled to find the ‘Save’ button, so I moved it to the thumb zone."

5. Collaboration:

6. Show how you worked with developers, PMs, or stakeholders.

7. Example: "I presented 3 design options to the team and explained the trade-offs of each."

8. Impact Over Output:

9. They care about results, not just deliverables.
10. Weak: "I designed a new dashboard."

11. Strong: "I redesigned the dashboard, reducing task completion time by 40%."

12. Critical Thinking:

13. Be ready to explain why you made certain decisions.
14. Example: "I chose a bottom navigation bar because 80% of our users held their phones with one hand (thumb zone)."

Tricky Distinctions to Know

Quick Check Questions

Question 1:

A stakeholder insists on adding a "Refer a Friend" pop-up to the checkout flow, even though research shows users find pop-ups annoying. How do you push back using design principles?

Answer:
- Jakob’s Law: Users expect checkout to be fast and distraction-free (like Amazon).
- Progressive Disclosure: Don’t interrupt the primary task (purchasing) with a secondary one (referrals).
- Suggestion: Move the referral CTA to the order confirmation screen (post-purchase) or as a non-intrusive banner.

Question 2:

You’re designing a mobile app for seniors. How do you apply Fitts’s Law and WCAG to improve the "Call Support" button?

Answer:
- Fitts’s Law: Make the button large (48x48px min) and place it in the thumb zone (bottom-right corner).
- WCAG: Ensure 4.5:1 contrast (e.g., white text on a blue button) and add a clear label ("Call Support" vs. just an icon).

Question 3:

A client says, "I don’t like the color blue—can we change it to green?" How do you respond using design thinking?

Answer:
- Empathize: "Can you tell me more about why you prefer green?" (Uncover if it’s personal preference or brand alignment.) - Define: "Our research showed blue performed better for trust (important for a banking app)." - Ideate: "We could test both colors in an A/B test to see which converts better." - Prototype: "Let’s try a green version in the next iteration and compare metrics."

Last-Minute Cram Sheet

1. STAR Method: Situation → Task → Action → Result. Always tie to impact.
2. Nielsen’s 10 Heuristics: Memorize 3-4 (e.g., Visibility of System Status, Consistency & Standards, Error Prevention).
3. Fitts’s Law: Big buttons near the pointer = faster clicks. Mobile: thumb zone (bottom-right).
4. Hick’s Law: More choices = slower decisions. Simplify menus/forms.
5. WCAG Contrast Ratio: 4.5:1 for text (use WebAIM Contrast Checker).
6. Miller’s Law: Group info into 3-5 chunks (e.g., form sections).
7. Von Restorff Effect: Make the most important CTA stand out (color, size, animation).
8. ⚠️ User Interviews ≠ Usability Tests: Interviews = problems; tests = observing task completion.
9. ⚠️ Wireframe ≠ Prototype: Wireframe = static; prototype = interactive.
10. Design System ≠ Style Guide: Style guide = colors/fonts; design system = components + rules.

Bonus Figma Shortcuts:
- Shift + A = Auto-layout - Ctrl/Cmd + G = Group layers - Ctrl/Cmd + [ or ] = Move layer up/down - R = Rectangle tool (for quick wireframes)