10 KiB

Raw Blame History

Module 08: Outline Scenarios

Lesson 3: Mapping the Journey

How to structure scenario outlines using the 8-question dialog

The 8-Question Dialog

Every scenario outline is built through 8 strategic questions. Freya walks you through them one at a time — each answer shapes the next question naturally.

#	Question	What it captures
Q1	What transaction do we need to get right?	User purpose
Q2	Which business goal does it serve?	Strategic connection
Q3	Which user, in what situation?	Persona + real-life context
Q4	What do they hope and fear?	Driving forces
Q5	What device?	Design approach
Q6	How do they arrive?	Entry point + discovery
Q7	Best outcome for both sides?	Success criteria
Q8	Shortest path through the site?	Linear page flow

When all 8 are answered, the scenario outline writes itself.

Q1: "What transaction do we need to get really right?"

Start with the WHY. What's the most important thing a user needs to accomplish?

State as user purpose, not feature name.

Bad: "Homepage and service pages"
Good: "Verify service availability before booking"

A transaction isn't just purchases. Browsing content page-by-page counts. Comparing options counts. Any meaningful journey where the user moves through the site with intent.

Q2: "Which business goal does it serve?"

Connect to your Trigger Map immediately. Which specific business goal and objective does this transaction advance?

Business Goal: BG01 - 5,000 active teams
Objective: Drive trial-to-active conversion

This grounds the scenario in business strategy, not just user needs.

Q3: "Which user experiences this most, and in what real-life situation?"

Identify the persona AND their context. Not just "who" but "who, where, when."

Bad: "A customer looking for information"
Good: "Hasse, 55, motorhome tourist stranded in Byxelkrok with a broken vehicle during family vacation"

Use actual personas from your Trigger Map. The situation should feel visceral and specific.

Q4: "What do they hope and fear?"

The driving forces — hope and worry. These must be visceral and specific.

Hope: What they're hoping to find or achieve
Worry: What they're afraid of or want to avoid

One sentence max per component. Phrases, not paragraphs.

Bad: "User is interested in the product"
Good: Hope: "Find trustworthy mechanic nearby, get back on road today." Worry: "Being stranded for days, getting ripped off by unknown mechanic."

Q5: "What device are they on?"

Mobile, desktop, or tablet. This shapes the entire design approach.

Simple question, but it matters — a panicked tourist on mobile needs a completely different experience than a manager at their desk.

Q6: "How do they actually arrive?"

How the user ACTUALLY gets to the site. Be specific about discovery method.

Bad: "User opens the website"
Good: "Googles 'car repair Öland' on mobile while parked at gas station, clicks top organic result"

1-2 sentences max. Device + context + discovery method.

Q7: "What does the best possible outcome look like — for both sides?"

Mutual success — user AND business. Both specific and measurable.

User Success: Tangible outcome the user achieves
Business Success: Measurable result for the business
Bad: User: "Successfully use the site" / Business: "Get more customers"
Good: User: "Confirmed mechanic fixes motorhomes, has location and hours, feels confident calling" / Business: "High-intent tourist call captured, positioned as emergency-capable, info call avoided"

Q8: "What's the shortest path through the site?"

The linear sunshine path. Numbered steps, each with page name + what the user accomplishes.

Rules:

Completely linear — ZERO "if" statements, ZERO branches
Minimum viable steps — can you remove any without breaking the flow?
Each step moves meaningfully toward success

1. **Start Page** — Sees hero with emergency message, clicks "Vehicle Service"
2. **Service Page** — Confirms motorhome service available, sees phone number
3. **Contact Page** — Gets address, hours, and map directions ✓

After the 8 Questions

Name the Scenario

Use the persona name + purpose:

01: Hasse's Emergency Search
02: Harriet's Family Setup
03: Felix's Quick Registration

The number indicates priority order. The name tells you who and what.

Trigger Map Connections

Explicitly link back to your strategic foundation:

## Trigger Map Connections
Persona: Hasse (Primary)
Want: Find trustworthy mechanic nearby
Fear: Being stranded, getting ripped off
Business Goal: BG01 - Capture high-intent service calls

Pages Table

List the pages that will be designed:

| Page | Folder | Purpose | Exit Action |
|------|--------|---------|-------------|
| 1.1 | 1.1-start-page/ | See value, find service | Click "Vehicle Service" |
| 1.2 | 1.2-service-page/ | Confirm capability | Click "Contact" |
| 1.3 | 1.3-contact-page/ | Get address + hours | Call or navigate ✓ |

Scenario vs. Storyboard Boundary

This is crucial to understand:

Scenario = Journey between logical views

Start Page → Service Page → Contact Page

Storyboard = Transformations within a logical view

Service Page: Loading → Content visible → Phone number copied

Question	Answer
User clicks button and new screen loads	Scenario
Button changes from "Submit" to "Loading..."	Storyboard
Modal opens on top of current page	Scenario (modal is new logical view)
Form field shows validation error	Storyboard

Edge Cases: Where Do They Go?

Edge cases are real. They need documentation. But not in the scenario outline.

In scenario outline (Q8):

1. **Signup Form** — Enters email and password
2. **Welcome Screen** — Greeted, ready to explore ✓

In page specification (Module 11):

## Error States

### Email Already Exists
- Message: "This email is already registered. [Log in instead]"
- User action: Click link to login flow

### Network Error
- Message: "Connection lost. Your data is saved. [Retry]"
- User action: Click retry to resubmit

The scenario outline is the sunshine path. Page specifications handle the shadows.

Module progression:

Module 08 (now): Outline scenarios — 8-question dialog defines the journey
Module 09: Conceptual sketching — visualize each screen's default state
Module 10: Storyboarding — document state transformations within each screen
Module 11: Detailed specifications — document edge cases, error states, business rules

The Complete Template

Here's what a finished scenario outline looks like:

# 01: Felix's Quick Registration

**Project:** Dog Walker App
**Created:** 2026-02-26
**Method:** Whiteport Design Studio (WDS)

---

## Transaction (Q1)
Create account and experience first success with minimal friction

## Business Goal (Q2)
BG01 - Increase trial signups by 40%
Objective: Drive visitor-to-registered conversion

## User & Situation (Q3)
Felix (Primary) — Full-stack parent, late evening after kids asleep.
Saw Google ad, motivated to find solution but skeptical of time investment.

## Driving Forces (Q4)
Hope: Find a simple app the whole family will actually use
Worry: Complex onboarding that wastes his limited free time

## Device & Starting Point (Q5 + Q6)
Mobile — Googles "family dog care app", clicks top organic result

## Best Outcome (Q7)
User: Account created, feels confident this app will help the family
Business: New user in activation funnel, one step closer to subscription

## Shortest Path (Q8)
1. **Landing Page** — Sees value proposition, clicks "Start Free"
2. **Signup Form** — Enters email and password
3. **Welcome Screen** — Greeted, ready to add first dog profile ✓

## Trigger Map Connections
Persona: Felix (Primary)
Want: Try before committing
Fear: Complex onboarding that wastes time
Business Goal: BG01 - Increase trial signups

## Pages in This Scenario

| Page | Folder | Purpose | Exit Action |
|------|--------|---------|-------------|
| 1.1 | 1.1-landing-page/ | See value, click CTA | Click "Start Free" |
| 1.2 | 1.2-signup-form/ | Create account | Submit credentials |
| 1.3 | 1.3-welcome-screen/ | Feel welcomed, ready to explore | Scenario complete ✓ |

Folder Structure

Each scenario gets its own folder:

C-UX-Scenarios/
├── 01-felixs-quick-registration/
│   ├── 01-felixs-quick-registration.md
│   ├── 1.1-landing-page/
│   ├── 1.2-signup-form/
│   └── 1.3-welcome-screen/
├── 02-harriets-family-setup/
│   ├── 02-harriets-family-setup.md
│   └── ...

The scenario file contains the 8-question outline. Page folders are created via Freya's page outline dialog or when you jump to Phase 4 (UX Design).

Two Modes

Freya offers two ways to work through the 8 questions:

Conversation mode (default): Freya asks one question at a time. Your answers shape the next question naturally. Best for learning and complex scenarios.

Suggest mode: Ask Freya to suggest, and she answers all 8 questions based on your Trigger Map and Product Brief. You review and adjust. Best when you want speed or have a clear Trigger Map.

Common Mistakes

Mistake	Fix
Starting with pages	Start with Q1 — the transaction
Including branches in Q8	Keep it linear — zero "if" statements
Generic driving forces in Q4	Make them visceral and specific
Vague outcomes in Q7	Both user and business must be measurable
Skipping Q2	Every scenario must connect to a business goal

How to Start

From your Trigger Map:

Pick your highest-priority business goal
Identify which persona is critical to that goal
Find the transaction that satisfies both — Q1
Walk through Q2-Q8 with Freya
Name it using persona + purpose

What's Next

In the tutorial, you'll create scenario outlines for your own project. Freya will guide you through the 8-question dialog, building each scenario from your Trigger Map.

Continue to Tutorial: Create Scenario Outlines →

← Back to Lesson 2 | Back to Module Overview

Part of Module 08: Outline Scenarios

10 KiB Raw Blame History