🎨 Unit 15 • UI/UX Design Masterclass

Portfolio & Case Study Engineering

Transforming design execution into compelling career capital: project selection strategy, the 10-step narrative case study arc, articulating problem statements, presenting user research & personas, defending design decisions, documenting prototype iterations, proving usability ROI, and publishing on Behance and personal web portfolios.

📖 Narrative: STAR Framework (Situation, Task, Action, Result)
📊 Evidence: Usability Metrics, SUS & Conversion ROI
🎨 Artifacts: Wireflows, Personas & Prototype Demos
🚀 Distribution: Custom Web Portfolio & Behance Optimization
01

Project Selection & The Narrative Case Study Arc

Design recruiters and hiring managers do not hire designers for pretty Dribbble mockups; they hire designers for structured problem-solving, analytical thinking, and business impact. A case study is a detective story proving how user friction was identified, investigated, and systematically resolved.

Criteria for Selecting Portfolio Projects
  • Depth Over Quantity: 3 exceptionally deep, end-to-end case studies will consistently outperform 10 shallow visual redesigns.
  • Diverse Problem Spaces: Showcase versatility (e.g., Project 1: Complex B2B SaaS web app, Project 2: Mobile consumer fintech app, Project 3: Zero-to-one design system).
  • Real Constraints & Friction: Real projects with messy trade-offs, engineering limitations, and business KPIs are 10× more credible than idealized redesigns of Spotify or Apple.
The STAR Case Study Storytelling Framework
  • Situation: The company context, industry domain, and target audience baseline.
  • Task: The core objective, project scope constraints, and designer's personal responsibilities.
  • Action: The investigative user research, wireframing, testing, and UI iterations performed.
  • Result: Quantifiable business metrics (e.g., 28% drop in checkout abandonment, +14 SUS score).
1
1. Hero Summary & Impact Snapshot
Project title, role, timeline, platforms, team composition, and a 1-sentence headline of the quantitative result.
2
2. Problem Statement & Business Opportunity
Framing the core user frustration using the "How Might We" (HMW) formula anchored against business viability.
3
3. User Research & Synthesis (Personas & Journey Maps)
Qualitative interviews (N=8), empathy mapping, and identifying high-friction drop-off points in the customer journey.
4
4. Wireframing & Architectural Pivots
Showing rough paper sketches and discarded early wireframe iterations to prove divergent exploratory thinking.
5
5. Usability Testing, Metric Validation & Retrospective
Benchmarking task success rates, documenting what failed during testing, iterations made, and key engineering learnings.
02

Explaining the Problem, User Research & Personas

Never jump straight into Figma mockups. Successful case studies spend the first 40% of the narrative proving the validity of the problem:

Crafting the Point of View (POV) Formula

Structure the problem clearly using the Stanford d.school POV framework:

"[Specific User] needs [Actionable Need] because [Surprising Underlying Insight]."

Example: "First-time crypto investors need a transparent fee calculator during checkout because hidden gas fees cause 64% of users to panic and abandon transactions at the final confirmation step."

Actionable Research Presentation
  • Skip Generic Personas: Avoid stock-photo personas listing arbitrary hobbies ("Enjoys hiking"). Focus strictly on Goals, Behaviors, Pain Points, and Tech Fluency.
  • Direct User Quotes: Pull out 2–3 impactful, emotional quotes from user interviews that justify the redesign.
  • Journey Pain Point Callouts: Show the Customer Journey Map highlighting the exact "Valley of Despair" step where drop-off occurred.
03

Defending Design Decisions & Showing Iterations

The most common rookie mistake in UX portfolios is presenting a finished design as if it arrived effortlessly on the first try. Senior design interviewers want to see what failed and why:

Iteration Phase Initial Design Hypothesis Testing Finding / Failure Engineered Redesign Pivot
Iteration 1 (Wireframe) Multi-step wizard with 5 separate pages Users felt process was endless; 45% drop-off at step 3 Consolidated into a single-page accordion form with auto-save
Iteration 2 (Clickable Prototype) Dropdown menu with 30+ currency options Severe mobile scrolling fatigue; task time exceeded 45s Replaced with instant type-ahead search with popular pills
Iteration 3 (Hi-Fi UI) Floating subtle icon-only checkout button Fails Fitts's Law; 22% of testers clicked background dead zone Fixed bottom sticky CTA bar with full width and high contrast
case-study-metric-card.html
<!-- Production Case Study Quantitative Metric Highlights -->
<div class="case-study-stats-grid">
  <div class="metric-card">
    <span class="metric-value">+34%</span>
    <span class="metric-label">Checkout Conversion Rate</span>
    <p class="metric-desc">Measured over 60 days post-launch vs legacy baseline</p>
  </div>

  <div class="metric-card">
    <span class="metric-value">-52%</span>
    <span class="metric-label">Average Task Time</span>
    <p class="metric-desc">Reduced from 3m 40s to 1m 45s via single-column layout</p>
  </div>

  <div class="metric-card">
    <span class="metric-value">82.5</span>
    <span class="metric-label">System Usability Scale (SUS)</span>
    <p class="metric-desc">Improved from failing 54.0 (Grade F) to 82.5 (Grade A)</p>
  </div>
</div>
04

Usability Results, Documenting Improvements & Conclusions

Presenting Usability Testing Data
  • Task Completion Rate: "8 out of 8 participants completed account setup without moderator assistance (vs 3/8 on baseline)."
  • Single Ease Question (SEQ): "Rated 6.4 / 7.0 for ease of navigation."
  • Video Snippets / GIFs: Embed short 5-second looping animations showing the actual interactive prototype in action.
Writing Honest Project Retrospectives
  • What I Learned: Reflect on technical discoveries, accessibility insights, or team communication lessons.
  • What I Would Do Differently: "If I had more time, I would run localized usability tests in Japanese and German to benchmark text expansion reflow."
  • Cross-Functional Collaboration: Highlight how you negotiated trade-offs with engineers and product managers.
05

Building & Publishing on Web Portfolios and Behance

How you package and distribute your work determines whether you get callbacks from top tech companies:

Platform Best Format Primary Audience Optimization Tactic
Personal Website (Custom Domain) Long-form responsive web pages with interactive embeds Senior UX Managers, Design Directors, Recruiters Fast load time (< 2s), accessible contrast, clean typography, visible PDF resume link
Behance Vertical image banner presentations (1400px wide) Global design community, agency art directors, visual leads High visual polish, 3D device mockups, motion GIFs, curated color palette ribbons
PDF Case Study Deck 16:9 Landscape slide deck (Keynote / Figma Slides) Hiring teams during formal portfolio presentation interviews 10–12 focused slides designed for a 30-minute spoken presentation with Q&A
💡 The 30-Second Recruiter Test

Design recruiters spend an average of 30 to 60 seconds on a candidate's portfolio before deciding whether to advance them. Ensure your homepage features: (1) A clear 1-sentence value proposition ("UI/UX Product Designer specializing in Enterprise SaaS & Systems"), (2) Immediate project thumbnails with clear titles and tags, and (3) Frictionless navigation with no broken links or password-locked case studies without credentials in the resume.

06

Viva Voce & Engineering Interview Questions

Q1 • Portfolio Strategy What is the primary difference between a Dribbble shot and a UX Case Study?
A Dribbble shot is an isolated visual artifact showcasing aesthetic styling, visual trends, and graphic polish without context. A UX Case Study is a comprehensive engineering narrative that articulates the business problem, validates user research, demonstrates divergent exploration through wireframes, documents usability failures and iterations, and proves quantifiable business impact through metrics.
Q2 • Storytelling How does the STAR method structure a compelling case study presentation?
STAR establishes a clear narrative arc: Situation defines the organizational and market context; Task outlines the explicit design challenge and role constraints; Action details the research, prototyping, and testing iterations executed; and Result delivers measurable data (e.g., SUS score improvements, increased conversion, or reduced customer support tickets).
Q3 • Metric Validation What is the System Usability Scale (SUS) and what score indicates a successful redesign?
The System Usability Scale (SUS) is a standardized 10-item Likert scale questionnaire yielding a composite usability score from 0 to 100. The global industry average benchmark is 68.0 (Grade C). A score above 80.3 indicates Grade A usability, demonstrating excellent user satisfaction and minimal cognitive friction.
Q4 • Interview Defense Why do hiring managers specifically look for failed iterations in design case studies?
Failed iterations prove intellectual honesty, humility, and genuine scientific design methodology. If a case study only shows a flawless straight-line path from problem to final design, interviewers suspect the candidate either copied an existing solution or fabricated the research. Documenting a failed test and the resulting redesign demonstrates resilience and data-driven adaptability.
Q5 • Selection How many case studies should a junior to mid-level product designer feature in their portfolio?
A portfolio should feature 3 to 4 comprehensive, polished case studies. Overloading a portfolio with 10 mediocre projects dilutes candidate quality and overwhelms recruiters. Three deep case studies covering different problem domains (e.g., mobile app, complex web SaaS, design system) provide ample evidence of end-to-end design maturity.
Q6 • Distribution How does a personal custom website portfolio differ from a Behance profile?
A personal website on a custom domain conveys engineering professionalism, gives complete control over responsive layout and typography, allows embedding live interactive Figma prototypes, and signals technical initiative. Behance is a community discovery platform with fixed vertical graphic formats, excellent for gaining social exposure and visual feedback, but less suited for deep interactive UX case studies.
Q7 • User Research Why are behavioral personas superior to demographic personas in product case studies?
Demographic attributes (such as age, gender, and salary) rarely explain why someone struggles with an interface. Behavioral personas focus on mental models, workflow objectives, technical comfort, motivations, and specific blockers. Designing for user behaviors and tasks directly informs information architecture and interaction patterns.
Q8 • Presentation How should a designer structure a 30-minute live portfolio presentation during an on-site interview?
A successful 30-minute presentation is structured as: 5 minutes for personal background and design philosophy; 20 minutes for a deep dive into 1 or 2 flagship projects (Problem, Research, Iterations, Final Prototype, and Metric Impact); and 5 minutes for reflections, engineering learnings, and open Q&A.