My Collection #1

This template is designed to help emerging designers structure their first high-impact portfolio case study. By documenting a solo design project through five clear phases, you will show hiring managers and stakeholders your methodical, human-centered design approach.

Below, you will find structural guidelines, actionable tips, checklists, and fill-in-the-blank sections tailored specifically to a grocery app checkout friction project. Use the structured tables and metrics provided to back up your design decisions with empirical evidence.

Phase 1: Problem

The Setup

Start your case study by framing the problem around your user as the Hero of the story. Define the product context, the target user, the business viability, and a clear, testable research hypothesis. Do not write a generic "redesign goal"; focus on the specific structural bottleneck.

Fill-in-the-Blank: Project Context & Hypotheses

The Product: [Name of Grocery App] is a mobile application designed to help busy shoppers order household groceries.
The Hero: The primary user is [e.g., Sarah, a working parent who relies on rapid home delivery to manage a busy weekly schedule].
The Problem: During the checkout flow, shoppers experience a steep drop-off at the scheduling and transaction steps. The current interface forces users to navigate nested elements, causing high cart abandonment rates.
The Viability Goal: By resolving this friction, we aim to recover lost transactions and improve overall cart conversion rates, addressing the financial viability of the platform.
Research Hypothesis: We believe that the [e.g., nested delivery-slot selector and forced registration fields] cause high [e.g., cognitive load and physical interaction cost], leading users to abandon their orders because they [e.g., cannot easily compare available times and prioritize checkout speed over account setups].

Phase 1 Checklist & Tips

Avoid using the application as the "hero" of your case study; keep the focus on the user.
Explicitly define how usability failures hurt business metrics (viability).
Tip: Strip away the visual styling of the existing app during your initial audit to map the skeleton layout. This is called App Deconstruction.

Phase 2: Observation

The Setup

In this section, explain your evaluative research process. Even as a solo designer, you can run a lean study with 3 to 5 participants. Provide the target goal and explain how you structured a non-leading scenario to observe natural user behaviors without introducing researcher bias.

Usability Test Plan Template

Research Goal: Evaluate if the registration fields and delivery scheduling layout cause completion delays or interaction drop-offs.
Testing Method: [e.g., Moderated testing setup utilizing qualitative usability observations and quantitative performance metrics].
Target Audience: 5 participants who purchase groceries online at least once a week.
Non-Leading Task Scenario: "Imagine you want to prepare a family dinner this Thursday evening. Use the application to find your required ingredients, add them to your cart, and schedule a delivery that fits your schedule. Walk me through your thinking process as you proceed."
Task Success Criteria: The participant must successfully select their delivery slot and complete the checkout sequence within 3 minutes without seeking clarification or utilizing workarounds.

Phase 2 Checklist & Tips

Ensure task scenarios do not contain UI action verbs like "click the delivery tab" or "search for items."
Track actual user interaction metrics alongside subjective verbal satisfaction feedback.
Tip: Watch for social desirability bias. Users will often say a process was "easy" or "satisfactory" even after struggling. Trust what they do, not what they say.

Phase 3: Synthesis

The Setup

Here, demonstrate your qualitative synthesis. Show how you cleaned up raw observations and mapped them organically into thematic clusters using an Affinity Diagram. This step bridges the gap between raw behavioral friction and actionable layout strategies.

Qualitative Coding Matrix

Use this table structure to represent how observed user behaviors and quotes were categorized into actionable insight statements:

Observed Behavior (Do)	Participant Quote (Says)	Actionable UX Insight Statement (Problem + Impact)
Spent 3 minutes navigating; clicked 3 incorrect tabs; backed out twice to compare slots.	"I just wanted to see if Thursday morning was cheaper than Thursday afternoon."	Hiding scheduling windows inside nested menus increases interaction cost, forcing users to abandon checkouts because they cannot compare delivery pricing on a single screen layout.
Attempted to proceed but stopped when forced to enter a 12-character password.	"I don't want to make an account just to buy five apples. I'm in a rush."	Forced account creation during checkout increases cognitive friction, causing users to abandon purchases because they prioritize immediate transaction speed over long-term account setup.
Hesitated for 8 seconds at payment processing; double-clicked "Submit" during a blank loading screen.	"Did it go through? I don't see any confirmation message."	The lack of immediate visual feedback during payment processing triggers system anxiety, driving redundant actions that risk duplicate transactions.

Empathy Map Structure

Translate these insights into an Empathy Map organized around your central user persona:

Says: Direct verbal quotes regarding scheduling issues, forced profiles, or slow payment loading.
Does: Observed physical behaviors (e.g., clicking nested tabs, hesitating, backtracking, repeated clicking).
Thinks: Expectations of how online checkout systems should behave (e.g., auto-filling, visible scheduling, guest checkout).
Feels: Anxieties and frustrations caused by slow load times and hidden interaction options.

Phase 3 Checklist & Tips

Make sure your affinity clusters emerge naturally from organic user behavior patterns, rather than forcing them into pre-existing app screen categories.
Frame each insight statement with a clear [User Need/Problem] + [Impact/Why] formula.

Phase 4: Redesign

The Setup

Present your Redesign Strategy. Walk the reader through your structural layout changes. Explicitly prove that your new layouts directly address the actionable insights discovered during Phase 3, keeping personal aesthetic opinions out of the narrative.

Redesign Strategy Matrix

Actionable UX Insight (From Phase 3)	Target Wireframe Revision	Human-Centered Design Principle Applied
Hiding scheduling windows inside nested menus increases interaction cost and cognitive fatigue.	Replace nested dropdowns with an open, horizontal calendar strip displaying days, time windows, and pricing surcharges on a single view.	Reduce Cognitive Load: Minimizes working memory by putting all comparison parameters in a single visual layout.
Forced account creation creates checkout barriers, driving cart abandonment.	Implement a prominent Guest Checkout route at the registration gate.	Minimize Interaction Cost: Reduces physical form fields to allow users to prioritize immediate transactional speed.
Feedback latency during transaction loading triggers system anxiety and double-clicks.	Add a modal overlay with a dynamic loading spinner and clear text ("Processing your order...").	System Visibility: Provides immediate visual feedback to indicate progress, protecting transaction safety.

Phase 4 Checklist & Tips

Present your structural ideas as low-fidelity wireframes first, proving that you optimized the spatial information architecture before introducing high-fidelity colors or brand elements.
Show your iterative design journey—including layout options you tested and discarded.

Phase 5: Validation

The Setup

Conclude your case study with objective before-and-after usability metrics. Frame these statistics as a findings matrix to demonstrate the measurable return on investment (ROI) of your design revisions to stakeholders and developers.

Quantitative Validation Matrix

Usability Metric Tested	Original Layout (Baseline)	Redesigned Layout (Validated)	Measurable Design Impact
Average Time-on-Task (ToT)	4 minutes, 12 seconds	1 minute, 15 seconds	70% Reduction in interaction time and cognitive load.
Task Completion Rate (TCR)	60%	95%	35% Increase in user success and checkout confidence.
Average Navigation Errors	3.2 misclicks per user	0.4 misclicks per user	87% Drop in physical frustration and navigation confusion.

Defending Your Redesign: Quick Stakeholder Q&A

Stakeholder Question: "The visual updates look clean, but why should we spend engineering resources changing the checkout flow if our current users aren't explicitly sending us complaints?"
Your Design Defense: "While our users haven't written to complain, our observational validation data reveals a critical baseline error rate of 3.2 misclicks and an average checkout time of over 4 minutes. These metrics reveal hidden layout friction. Users are simply tolerating the struggle due to habituation and politeness (social desirability bias). Redesigning this layout to include guest checkout and open scheduling direct addresses this friction, unlocking a 35% increase in task completion and securing transaction conversion rates."

Phase 5 Checklist & Tips

Classify and prioritize your issues clearly (e.g., treating form blockers as Critical and aesthetic additions as Minor).
Link your final quantitative metrics directly back to the business objectives defined in Phase 1.
Tip: Conclude your case study by highlighting that HCD is a continuous, iterative cycle that goes beyond the final validation phase.