Principles of UX / UI (Product Design): UX Interview Preparation (Portfolio Walkthrough, Design Critique)

UX Interview Preparation (Portfolio Walkthrough, Design Critique)

UX Interview Preparation: Portfolio Walkthrough & Design Critique

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

What This Is

A portfolio walkthrough is your chance to narrate your design process—from research to final solution—while a design critique tests your ability to analyze, defend, or improve a UI using UX principles. These skills prove you can think like a designer, not just make things look pretty.

Example: Imagine you redesigned a hospital patient portal’s appointment booking flow. Instead of a 5-step form, you used progressive disclosure (showing only essential fields first) and heuristic evaluation to reduce errors. In your walkthrough, you’d explain why these changes improved usability (e.g., fewer abandoned bookings, higher patient satisfaction).

Key Terms & Principles

• Design Thinking: A problem-solving framework with 5 phases: Empathize, Define, Ideate, Prototype, Test. Example: Before redesigning a food delivery app, you interview users to uncover pain points (e.g., “I can’t find my favorite restaurant quickly”).
• Heuristic Evaluation: A usability inspection method using Nielsen’s 10 Heuristics (e.g., Consistency and Standards, Error Prevention). Example: Flagging a mobile banking app’s “Submit” button as too small (violates Fitts’s Law).
• Fitts’s Law: The time to click a target depends on its size and distance. Example: Placing a “Checkout” button in the thumb zone (bottom-right corner) on mobile.
• Hick’s Law: Decision time increases with more choices. Example: Simplifying a dropdown menu from 20 options to 5 (e.g., “Sort by: Price, Rating, Newest”).
• Jakob’s Law: Users expect interfaces to work like ones they already know. Example: Keeping a shopping cart icon in the top-right corner (like Amazon).
• Progressive Disclosure: Showing only essential info first, hiding advanced options. Example: A flight booking form that reveals “Add baggage” only after selecting a flight.
• Affordance: A design element’s appearance suggests its function. Example: A 3D button that looks clickable (vs. a flat, ambiguous link).
• Cognitive Load: The mental effort required to use an interface. Example: Reducing cognitive load by breaking a long form into steps (e.g., “Step 1 of 3: Personal Info”).
• Accessibility (WCAG): Web Content Accessibility Guidelines (e.g., 4.5:1 contrast ratio for text). Example: Using dark gray (#545454) on white fails contrast; black (#000000) passes.
• Micro-interactions: Small animations/feedback for user actions. Example: A heart icon that fills red when liked (like Instagram).
• Design System: A library of reusable components (buttons, typography, colors) + rules for using them. Example: Google’s Material Design system.
• Usability Testing vs. User Interviews:
• Usability test: Observing users complete tasks (e.g., “Book a doctor’s appointment”).
• User interview: Asking open-ended questions (e.g., “What frustrates you about booking appointments?”).

Step-by-Step Process Flow

1. Portfolio Walkthrough: Structuring Your Story

Goal: Guide the interviewer through your process without overwhelming them.
Figma/Paper Actions:
- Start with the problem: “Users were dropping off at checkout because the form was too long.” - Show research: “I interviewed 5 users and found 80% abandoned at the ‘Shipping Info’ step.” - Sketch low-fidelity ideas: “I explored 3 wireframes—tabbed forms, accordions, and a single scroll.” - Prototype & test: “I built a Figma prototype and tested it with 5 users. The accordion version had the highest completion rate.” - Iterate: “Based on feedback, I added a progress bar and auto-fill for addresses.” - Final solution: “The new flow reduced drop-off by 30% in A/B testing.”

Pro Tip: Use the STAR method (Situation, Task, Action, Result) to keep it concise.

2. Design Critique: Analyzing a UI

Goal: Demonstrate you can spot issues and propose solutions using principles.
Figma/Paper Actions:
1. Observe first: “I notice the ‘Submit’ button is small and far from the form fields.” 2. Apply heuristics: “This violates Fitts’s Law (hard to click) and Error Prevention (no confirmation before submission).” 3. Suggest fixes: “I’d make the button larger, move it closer to the form, and add a confirmation modal.” 4. Prioritize: “The button size is a P0 (critical) fix; the modal is a P1 (important but not urgent).” 5. Sketch alternatives: “Here’s a quick wireframe of the improved layout.”

Pro Tip: Use the “What, Why, How” framework: - What is the issue? (e.g., “The search bar is hidden under a hamburger menu.”) - Why is it a problem? (e.g., “Users expect search to be visible—Jakob’s Law.”) - How would you fix it? (e.g., “Move it to the top nav, like Amazon.”)

Common Mistakes

Design Interview / Portfolio Tips

What Interviewers Look For

1. Process over polish: They care how you think, not just the final UI. Show sketches, user flows, and iterations.
2. Defensible decisions: Every choice should tie to a principle (e.g., “I used progressive disclosure to reduce cognitive load”).
3. Collaboration: Mention how you worked with developers, PMs, or researchers (e.g., “I paired with a dev to ensure the prototype was feasible”).
4. Tricky Distinctions:
5. Wireframe vs. Prototype: Wireframes = low-fidelity (gray boxes); prototypes = interactive (clickable).
6. Design System vs. Style Guide: Style guide = colors/fonts; design system = components + rules (e.g., “Buttons have 8px padding”).
7. Usability Test vs. User Interview: Usability test = observing tasks; interview = asking questions.

Portfolio-Specific Tips

• For case studies: Include before/after metrics (e.g., “Reduced errors by 40%”).
• For critiques: Record a 5-minute Loom video walking through a UI (e.g., “Here’s how I’d improve Airbnb’s search filters”).
• For live interviews: Practice thinking aloud (e.g., “I’m noticing the CTA is below the fold—visibility of system status is an issue”).

Quick Check Questions

1. Scenario: A stakeholder wants to add 3 new features to the homepage. How do you use design principles to advise against clutter?

2. Answer: Use Hick’s Law (“More choices = slower decisions”) and cognitive load (“Users will feel overwhelmed”). Propose progressive disclosure (e.g., “Show 1 feature now, others in a ‘More’ menu”).

3. Scenario: During a critique, you’re asked, “Why did you choose this layout?” How do you respond?

4. Answer: Tie it to principles: “I used Fitts’s Law to place the ‘Submit’ button in the thumb zone and consistency by aligning fields to a 8px grid.”

5. Scenario: A user test shows people ignore a key feature. What’s your next step?

6. Answer: Check affordance (does it look clickable?) and visibility (is it buried?). Redesign with clearer CTAs (e.g., a button instead of a text link).

Last-Minute Cram Sheet

1. Nielsen’s 10 Heuristics: Memorize 3–4 (e.g., Error Prevention, Consistency, Recognition over Recall).
2. Fitts’s Law: Big buttons near the pointer = faster clicks.
3. Hick’s Law: Fewer choices = faster decisions.
4. WCAG Contrast Ratio: 4.5:1 for text (use WebAIM Contrast Checker).
5. Jakob’s Law: Users expect interfaces to work like familiar ones (e.g., cart icon in top-right).
6. Progressive Disclosure: Hide complexity until needed (e.g., “Show more” buttons).
7. ⚠️ User Interviews ≠ Usability Tests: Interviews = problems; tests = task completion.
8. ⚠️ Wireframe ≠ Prototype: Wireframes = structure; prototypes = interaction.
9. Figma Shortcuts:
10. Shift + A = Auto-layout
11. Ctrl/Cmd + G = Group
12. R = Rectangle tool
13. Design System ≠ Style Guide: System = components + rules; guide = colors/fonts.

Bonus: Bring a notebook to interviews—sketching ideas live shows confidence!