User Experience Design: Research, Wireframing & Prototyping
Overview
User Experience (UX) design is the process of creating products that provide meaningful and relevant experiences to users. This tutorial introduces the core UX discipline: understanding users through research, structuring content with information architecture, visualising solutions with wireframing and prototyping, and validating designs with usability testing.
1. What is UX?
User Experience (UX) encompasses all aspects of the end‑user's interaction with a company, its services, and its products. It is not just about usability; it's about the entire journey.
- UX vs UI: UI (User Interface) is the visual layer — the look and feel. UX is the overall experience, including emotions, efficiency, and ease of use. UX informs UI; UI brings UX to life.
- Don Norman's definition: "User experience encompasses all aspects of the end‑user's interaction with the company, its services, and its products."
- The UX Honeycomb (Peter Morville): Useful, Usable, Desirable, Findable, Accessible, Credible, Valuable.
2. UX Research
UX research helps you understand your users, their needs, and their pain points. It reduces guesswork and informs design decisions.
User Personas
A persona is a fictional character that represents a key user group. It includes demographic details, goals, frustrations, and behaviours.
User Journey Maps
A visual representation of the user's flow through the product. It highlights touchpoints, emotions, and pain points.
Research methods
- Interviews: One‑on‑one conversations to explore user needs.
- Surveys: Quantitative data from larger groups.
- Observational studies (ethnography): Watching users in their natural environment.
- Analytics: Data from your existing product (heatmaps, click‑through rates).
3. Information Architecture (IA)
IA is the structural design of shared information environments. It's how you organise, structure, and label content so that users can find what they need quickly.
- Organisation schemes: How you group content (alphabetical, chronological, topical, audience‑based).
- Navigation systems: Global navigation, local navigation, breadcrumbs, search.
- Taxonomies: The classification of content (e.g., categories and tags).
- Card sorting: A research technique where users group content items into logical categories.
4. Wireframing & Prototyping
Wireframes and prototypes are low‑ to mid‑fidelity representations of the interface, used to test and iterate on layout and flow before writing code.
Wireframes (Low‑fidelity)
- Focus on layout, structure, and hierarchy.
- Gray‑scale, no colours, fonts, or graphics.
- Tools: Pen and paper, Balsamiq, Figma (wireframe mode).
Prototypes (Mid‑ to high‑fidelity)
- Interactive, clickable models that simulate the user journey.
- May include visual design, animations, and micro‑interactions.
- Tools: Figma, Adobe XD, Sketch, InVision.
5. Usability Testing
Usability testing involves observing real users as they complete tasks with your prototype or product. It uncovers usability issues and validates design decisions.
Types of usability tests
- Moderated (in‑person or remote): A facilitator guides the user through tasks and asks questions.
- Unmoderated (remote): Users complete tasks independently, and their interactions are recorded.
- Guerrilla testing: Quick, low‑cost testing in public spaces (e.g., cafés).
Metrics to measure
- Task success rate: Percentage of users who complete the task.
- Time on task: How long it takes to complete.
- Error rate: Number of errors made during a task.
- Satisfaction: Post‑task surveys (e.g., System Usability Scale – SUS).
6. UX Metrics (HEART Framework)
Google's HEART framework helps you measure UX at scale:
- Happiness: Satisfaction, perceived ease, Net Promoter Score (NPS).
- Engagement: Frequency, depth, and intensity of use.
- Adoption: Number of new users over time.
- Retention: User returning to the product.
- Task Success: Efficiency, effectiveness, and error rate.
Use these metrics to track UX improvements over time and to justify design decisions.
Quiz
Question 1
What is the primary difference between UX and UI?
- UX is visual; UI is structural
- UX is the overall experience; UI is the visual interface
- UX is for mobile; UI is for desktop
- There is no difference
Show answer
Question 2
Which UX research method creates fictional characters representing key user groups?
- Journey mapping
- User personas
- Card sorting
- Heatmaps
Show answer
Question 3
What is the purpose of a wireframe?
- To add visual polish and colours
- To define the layout, structure, and hierarchy of a page
- To write the final HTML code
- To conduct user interviews
Show answer
Exercises
Exercise 1
Describe a user journey map for booking a flight. Include the steps: awareness, research, booking, post‑booking.
Sample answer
Awareness: User realises they need to travel. Searches for destinations.
Research: Compares prices, dates, and airlines. Reads reviews.
Booking: Selects flight, enters passenger details, adds seat preferences, pays.
Post‑booking: Receives confirmation email, manages booking (add baggage, check‑in), gets reminders.
Emotions: Excitement at the start, frustration if prices are high or the booking process is confusing, relief and satisfaction after successful booking.
Exercise 2
What are three key metrics you would track for a news website's UX, and why?
Sample answer
- Bounce rate: High bounce rate indicates that users are not finding relevant content or the page is not engaging.
- Average session duration: Longer sessions suggest that users are reading and finding value.
- Article completion rate: Percentage of users who scroll to the end of an article. Low rates may indicate readability issues or irrelevant content.
Homework
Homework 1
Create a simple user persona for a "busy professional who uses a meal‑delivery app." Include demographics, goals, frustrations, and a typical scenario.
Sample answer
Name: "Alex the Developer"
- Age: 28
- Occupation: Software Engineer
- Goals: Save time on cooking, eat healthy meals, easy reordering of favorites.
- Frustrations: Small menu, long delivery times, too many steps to reorder.
- Scenario: Alex finishes a 10‑hour day of coding and is exhausted. They open the meal‑delivery app, quickly selects a favorite meal from the "reorder" section, and chooses the fastest delivery option. They want the process to take under 2 minutes.
Mini‑Project
Mobile App Wireframing (Fitness Tracker)
Design low‑fidelity wireframes for a fitness tracking app. Include the following screens:
- Dashboard (today's steps, calories, heart rate).
- Workout log (list of exercises with sets and reps).
- Progress chart (weekly steps graph).
- Profile screen (user stats and settings).
You can sketch them by hand or use a digital tool. Annotate key elements (headers, buttons, labels).
Sample layout description
Dashboard:
- Top: User avatar + greeting ("Good morning, Alex!").
- Center: Three metric cards (Steps: 8,423 | Calories: 2,150 | Heart rate: 72 BPM).
- Bottom: Tab bar (Dashboard, Workouts, Progress, Profile).
Workout Log:
- Header: "Today's Workout".
- List of exercises (Squats: 3×12, Bench Press: 3×10, etc.).
- Floating "Add Exercise" button.
Progress Chart:
- Header: "Steps This Week".
- Bar chart showing steps for each day.
- Toggle buttons: Week / Month / Year.
Profile:
- User photo, name, and bio.
- Stats (total workouts, total distance).
- Settings menu (Notifications, Privacy, Logout).
Tutorial Summary
You explored the full UX design process: understanding users through research (personas, journey maps), structuring content with information architecture, visualising solutions with wireframes and prototypes, and validating designs with usability testing. You also learned how to measure UX using the HEART framework.
Key takeaway: UX is a user‑centred, evidence‑based discipline. Design decisions should be driven by research and validated with real users. Great UX is invisible; it makes the user's journey feel effortless.