Module 4: UX Design Process
Learn the systematic approach to solving design problems from research to final solution.
The UX Design Process
UX design isn't random creativity - it's a structured process that moves from understanding problems to creating solutions. Think of it like building a house: you don't start with paint colors, you start with blueprints based on how people will live there.
🔄 The Five Stages:
- 1. Empathize: Understand users and their needs
- 2. Define: Clearly state the problem you're solving
- 3. Ideate: Generate many possible solutions
- 4. Prototype: Build quick, testable versions
- 5. Test: Get feedback and iterate
This isn't linear - you'll loop back as you learn more!
Design Thinking Methodology
Stage 1: Empathize
Put yourself in users' shoes. Observe, interview, and experience what they experience.
Activities:
- • User interviews
- • Observation studies
- • Empathy mapping
- • User journey mapping
Stage 2: Define
Synthesize research into a clear problem statement. Frame it from the user's perspective.
Problem Statement Format:
"[User] needs a way to [need] because [insight]"
Example: "Busy parents need a way to plan healthy meals quickly because they lack time to research recipes and shop efficiently."
Stage 3: Ideate
Generate many ideas without judging them. Quantity over quality at this stage!
Ideation Techniques:
- • Brainstorming (no bad ideas!)
- • Crazy 8s (8 ideas in 8 minutes)
- • Mind mapping
- • "How Might We" questions
Stage 4: Prototype
Build quick, cheap versions to test ideas. Start with paper, move to digital.
Prototype Fidelity:
- • Low: Paper sketches, wireframes
- • Medium: Clickable mockups
- • High: Looks like final product
Stage 5: Test
Watch users interact with your prototype. Learn what works and what doesn't.
Testing Goals:
- • Can users complete key tasks?
- • Where do they get confused?
- • What delights them?
- • What frustrates them?
Information Architecture
Information Architecture (IA) is how you organize and structure content. Like organizing a library - books need logical categories so people can find what they need.
IA Principles
1. Hierarchy
Organize from general to specific. Home → Category → Subcategory → Item
2. Chunking
Group related items together. People can only remember 5-9 items at once.
3. Clear Labels
Use familiar words. "Shopping Cart" not "Basket of Goods"
4. Multiple Paths
Let users find content through search, navigation, or links.
🗂️ Card Sorting Exercise:
Give users cards with content items. Ask them to group and label them. This reveals how users naturally organize information.
Example: For a recipe app, do users group by meal type (breakfast, lunch) or cuisine (Italian, Mexican)?
User Flows & Task Flows
User flows map the path users take to complete a goal. Like GPS directions - showing every turn from start to destination.
Creating User Flows
Example: E-commerce Checkout Flow
Each box is a screen. Arrows show the path. Decision points create branches.
💡 Flow Best Practices:
- • Minimize steps - every extra step loses users
- • Show progress indicators for multi-step flows
- • Allow users to go back and edit
- • Provide clear error messages and recovery paths
- • Consider edge cases (what if payment fails?)
Wireframing Techniques
Wireframes are low-fidelity sketches of your interface. They focus on layout and functionality, not colors or images. Like architectural blueprints before the pretty renderings.
Fidelity Levels
Low-Fidelity (Lo-Fi)
Quick sketches, boxes and lines. Perfect for early exploration.
Fast to create, easy to change, focuses on structure
Mid-Fidelity (Mid-Fi)
More detail, actual content, still grayscale. Good for testing flows.
Includes: Real text, proper spacing, UI elements (buttons, forms)
High-Fidelity (Hi-Fi)
Looks like the final product. Colors, images, branding.
Use for: Final approval, developer handoff, stakeholder presentations
Design Sprints
A design sprint is a 5-day process to solve big problems and test new ideas. Popularized by Google Ventures, it compresses months of work into one week.
Monday: Map
Define the problem, pick a target, and map the user journey.
Tuesday: Sketch
Everyone sketches solutions individually. No group brainstorming yet!
Wednesday: Decide
Review all sketches, vote on best ideas, create storyboard.
Thursday: Prototype
Build a realistic prototype. Fake it till you make it!
Friday: Test
Test with 5 real users. Learn what works and what doesn't.
🎨 Hands-On Project: Complete UX Process
Apply the full UX process to design a feature.
Project: Design a Grocery Delivery Checkout
Follow the complete process:
- ✓ Empathize: Interview 3 people about online grocery shopping
- ✓ Define: Write a problem statement
- ✓ Ideate: Sketch 8 different checkout flow ideas
- ✓ Prototype: Create mid-fi wireframes in Figma (3-5 screens)
- ✓ Test: Have 2 people try to complete checkout, note issues
Deliverable: Figma file with wireframes + 1-page summary of findings
📚 Module Summary
You've learned the systematic UX design process:
- ✓ Design thinking methodology (5 stages)
- ✓ Information architecture principles
- ✓ Creating user flows and task flows
- ✓ Wireframing at different fidelity levels
- ✓ Running design sprints
- ✓ Iterative design and testing
Next: Master modern UI design patterns and visual design!