BCA155 UI/UX Design

UI/UX DesignUnit 109 min read

User Personas, Scenarios & UX Process Stages: Creation, Use & Iteration

Unit 10 of UI/UX Design explores how to craft realistic user personas, design scenarios, and map the UX process stages—from research to iteration—using tools like empathy maps, journey maps, and feedback loops. Learn how these elements bridge user needs with design solutions, with real-world examples from Nepalese apps


Core Concepts: Personas, Scenarios, and UX Process Stages

1. User Personas: The Heart of User-Centered Design

Definition: A user persona is a fictional, detailed representation of a target user based on real data (demographics, behaviors, goals, pain points). It humanizes user research, making design decisions more empathetic and data-driven.

Why Use Personas?

  • Focuses design efforts on real user needs.
  • Aligns stakeholders (developers, marketers) on who the product serves.
  • Prioritizes features by user impact, not assumptions.

How to Create a Persona:

  1. Gather data (interviews, surveys, analytics).
  2. Identify patterns (e.g., "Busy professionals who use eSewa for bill payments").
  3. Synthesize into a profile with:
    • Demographics (age, location, income).
    • Goals (e.g., "Pay bills in <5 minutes").
    • Frustrations (e.g., "Complex OTP steps on eSewa").
    • Quotes (e.g., "I hate waiting for the app to load during peak hours.").

Example: eSewa User Persona

classDiagram
    class Persona {
        +Name: "Ramesh Adhikari"
        +Age: 32
        +Occupation: Government employee
        +Location: Kathmandu
        +Goals: Pay utility bills, transfer money to family
        +Frustrations: Slow app during Diwali, unclear error messages
        +Quote: "I need a one-click payment option!"
    }
    class Needs {
        +Fast transactions
        +Mobile-friendly interface
        +Clear feedback after payment
    }
    Persona --> Needs : "Drives design decisions"

2. Design Scenarios: Storytelling for UX

Definition: A scenario is a narrative that describes how a persona interacts with a product to achieve a goal. It bridges the gap between abstract personas and concrete design solutions.

Types of Scenarios:

Type Purpose Example (Pathao Rider)
Goal-directed Focuses on completing a task. "Rajesh needs to earn ₹1,500 in 3 hours."
Exploratory Discovering new features. "Sarita tries Pathao’s new ‘Split Fare’ option."
Failure Highlights pain points. "Kabita’s ride gets canceled due to traffic."

How to Write a Scenario:

  1. Start with a persona (e.g., "30-year-old freelancer").
  2. Define the goal (e.g., "Book a ride to Thapathali").
  3. Add context (time, location, emotions).
  4. Include interactions (e.g., "Taps ‘Request Ride’ but sees no drivers nearby").

Example: Daraz Shopping Scenario

Context: It’s 8 PM, and Priya wants to buy groceries for her mother’s birthday.
Goal: Find and order a cake under ₹800 with delivery by 10 AM tomorrow.
Steps:
1. Opens Daraz app → searches "birthday cake Kathmandu."
2. Filters by price and delivery time → sees 3 options.
3. Clicks "Add to Cart" but forgets to check stock availability.
4. Proceeds to checkout → realizes no payment options accept Khalti.
Pain Point: "Why isn’t Khalti an option? I use it every time!"

3. The UX Process Stages: A Cyclical Journey

The UX design process is iterative (repeatable) and user-centered. It consists of 5 key stages:

flowchart TD
    A["Research"] --> B["Define"]
    B --> C["Design"]
    C --> D["Prototype"]
    D --> E["Test"]
    E -->|"Feedback"| A

Stage 1: Research

  • Methods: Interviews, surveys, analytics, competitor analysis.
  • Goal: Understand user needs (e.g., "Ncell users want faster internet speed checks").
  • Tools: Empathy maps, journey maps.

Stage 2: Define

  • Methods: Personas, user stories, prioritization (e.g., MoSCoW: Must-have, Should-have).
  • Goal: Clarify problems and opportunities.
  • Example: "For Pathao, the top pain point is ‘no real-time traffic updates.’"

Stage 3: Design

  • Methods: Wireframes, mockups, interaction flows.
  • Goal: Create solutions aligned with user needs.
  • Example: Redesigning eSewa’s OTP screen to auto-fill for frequent users.

Stage 4: Prototype

  • Methods: Low-fidelity (paper sketches) to high-fidelity (interactive digital prototypes).
  • Goal: Test usability before development.
  • Example: A clickable prototype of NTC’s new fare calculator.

Stage 5: Test

  • Methods: Usability testing, A/B testing, analytics.
  • Goal: Validate assumptions and refine designs.
  • Example: Testing Daraz’s new checkout flow with 50 users to see if Khalti integration reduces drop-offs.

In the Real World

  1. eSewa: Personas and Scenarios

    • Persona: "Tech-savvy youth who pay bills via mobile."
    • Scenario: "During Diwali, users struggle with app crashes due to high traffic."
    • Solution: eSewa created a "Priority Payment" feature for frequent users, reducing frustration.
  2. Pathao: Journey Mapping

    • Problem: Riders and passengers had unclear ETA updates.
    • Solution: Pathao added real-time traffic data integration, improving trust.
    • Scenario: "A passenger sees ‘Driver delayed by 5 mins’ and gets a discount."
  3. NTC: Prototyping for Accessibility

    • Challenge: Bus route information was hard to navigate for visually impaired users.
    • Solution: NTC tested a prototype with screen readers, adding audio cues for stops.

Worked Example: Designing a Loan App for Nabil Bank

Problem: Nabil Bank’s loan application process is too long (10+ steps). Goal: Reduce drop-offs by 30% using personas and scenarios.

Step 1: Create Personas

Persona Goals Pain Points
"Young Professional" Quick loan approval Too many document uploads
"Retiree" Low-interest rates Confusing interest calculators

Step 2: Write Scenarios

  • Scenario 1: "Rohan (28, IT employee) needs a ₹500K home loan. He fills the form but gets stuck at the ‘income proof’ step."
  • Scenario 2: "Mrs. Shrestha (65) wants a personal loan but can’t understand the EMI calculator."

Step 3: Design Solutions

  • For Rohan: Auto-fill income details from his bank (API integration).
  • For Mrs. Shrestha: Simplified EMI calculator with voice guidance.

Step 4: Prototype and Test

  • Low-fidelity wireframe:
    [Loan Amount: ₹500K] [Auto-fill from bank: ✅]
    [EMI: ₹12,345/month] [Play audio explanation: 🎧]
    
  • Test with 20 users: 70% completed the form in <5 minutes (vs. 30% before).

Comparing Personas, Scenarios, and Prototypes

Tool Purpose When to Use Example
Personas Represent user groups Early research phase eSewa’s "Busy Professional"
Scenarios Explore user interactions Design and validation Pathao’s "Traffic Delay" scenario
Prototypes Test designs before development Late design/early development NTC’s audio-enabled bus routes

Exam Tip

  1. Personas:

    • Always tie personas to real data (e.g., "Based on 50 user interviews").
    • Highlight contrasting personas (e.g., "Tech-savvy vs. elderly users").
    • Avoid stereotypes—use specific details (e.g., "Uses WhatsApp for payments").
  2. Scenarios:

    • Structure: Use the format Context → Goal → Steps → Pain Point.
    • Link to personas (e.g., "For our ‘Freelancer’ persona...").
    • Show, don’t tell: Describe emotions (e.g., "Frustrated when the app crashes").
  3. UX Process:

    • Memorize the 5 stages and their tools (e.g., "Research → Empathy Maps").
    • Explain iteration: Use phrases like "Feedback loops improve designs."
    • Relate to Nepalese apps: Compare eSewa’s old vs. new UX (e.g., "Added Khalti integration after testing").
  4. Common Pitfalls:

    • ❌ Generic personas (e.g., "A user who uses the internet").
    • ❌ Scenarios without clear goals or pain points.
    • ❌ Skipping prototyping—always mention low-fidelity tests.

Key Formulas and Checklists

  1. Persona Validation Checklist:

    • Based on real user data (not assumptions).
    • Includes goals, frustrations, and quotes.
    • Diverse (e.g., age, tech skills, income levels).
  2. Scenario Writing Template:

    [Persona Name]: [Brief description]
    [Context]: [Time, location, mood]
    [Goal]: [What they want to achieve]
    [Steps]: [1. Action → 2. System response → ...]
    [Pain Point]: [What went wrong?]
    
  3. UX Process Stage Tools:

    Stage Tools
    Research Interviews, Surveys, Analytics
    Define Personas, User Stories
    Design Wireframes, Mockups
    Prototype Figma, Adobe XD, Paper Sketches
    Test Usability Testing, A/B Tests

Based on the TU BCA syllabus for UI/UX Design (BCA155), unit 10.

Discussion

Loading…