8.3 KiB
Module 08: Outline Scenarios
Time: 30 min | Agent: Freya | Phase: Design | Focus: UX
Scenarios, Not Pages
You don't design "a login page."
You design "new user creates account and experiences first success."
Scenarios are linear journeys across logical views.
The Sunshine Scenario
WDS forces linear motion. No branching. No decision trees.
A scenario is the shortest path from current state to desired state — for both business and user.
| Who | Current State | Desired State |
|---|---|---|
| User | Wants to sign up | Has an account, feels welcomed |
| Business | Visitor on site | Registered user in funnel |
Both must be satisfied. That's what makes software sustainable.
Selective Ignorance
By focusing on the primary scenario first, you get the important stuff done and usable.
Less important things? Deprioritized. Not ignored forever — just not now.
WDS applies selective ignorance to all the itsy-bitsy stuff "you have to have" in favor of what matters most.
Everything else? Treated as an edge case.
The Tradeoff
| What Happens | |
|---|---|
| Upside | More space and attention for what matters. Clean, focused designs. |
| Downside | You may redraw as secondary cases pile up. |
Worth it. The alternative is unbearable.
When you start with intricate navigation schemes, you end up with 100 buttons on the screen. Nobody wins.
What Is a Logical View?
A logical view is a distinct screen state in your application.
- A page is a logical view
- A modal overlay is a logical view
- A wizard step is a logical view
When the user navigates from one logical view to another — that's a scenario.
When elements transform within a single logical view — that's a storyboard (Module 10).
Scenario vs. Storyboard
| Concept | What Changes | Example |
|---|---|---|
| Scenario | Logical views change | Signup → Email Verification → Welcome |
| Storyboard | Elements within a view change | Button loading → success animation |
This module focuses on scenarios — the journey between views.
You'll learn storyboarding in Module 10. For now, focus on mapping the linear flow between screens. The detailed state transformations within each screen come later.
Why This Matters
Pages in isolation are meaningless. A button only makes sense in context.
- Where did the user come from?
- What are they trying to accomplish?
- What happens after they succeed?
- What if something goes wrong?
Scenarios answer these questions.
What Makes a Good Scenario
1. Linear
One path. No branches. The shortest way from A to B.
Error handling and edge cases exist — but they're not the scenario. They're exceptions documented separately.
2. Dual Value
Serves both user and business.
| Check | Question |
|---|---|
| User value | Does completing this satisfy the user's goal? |
| Business value | Does completing this advance a business objective? |
If either is missing, the scenario isn't sustainable.
3. Connected to Persona
Who is doing this?
- Which persona from your Trigger Map?
- What driving forces brought them here?
4. Testable
Can you verify it works?
- Clear start and end states
- Observable outcomes
- Measurable success
Mapping the Journey
A scenario traces the linear path through logical views:
┌─────────────┐ Click CTA ┌─────────────┐ Submit ┌─────────────┐
│ Landing │ ──────────────► │ Signup │ ───────────► │ Welcome │
│ Page │ │ Form │ │ Screen │
└─────────────┘ └─────────────┘ └─────────────┘
START END
Each box is a logical view. Each arrow is a navigation event.
No branches. Error states and edge cases are documented separately — they don't clutter the sunshine path.
What happens within each box (loading states, animations, validation feedback) — that's storyboarding.
Naming Convention
01-felixs-quick-registration
02-harriets-family-setup
03-kids-daily-overview
The number prefix keeps them ordered by priority. The name includes the persona and their purpose.
Not: login-page, dashboard, settings
The 8-Question Dialog
Freya outlines scenarios through an 8-question dialog. Each question builds on the previous answer, creating a complete scenario outline from strategy to page flow.
Two modes — same 8 questions:
- Conversation (default): Freya asks, you answer. One question at a time.
- Suggest: Freya answers all 8 based on your Trigger Map, then you review and adjust.
The questions:
| # | Question | What it defines |
|---|---|---|
| Q1 | What transaction do we need to get right? | The user purpose |
| Q2 | Which business goal does it serve? | Strategic connection |
| Q3 | Which user, in what situation? | Persona + context |
| Q4 | What do they hope and fear? | Driving forces |
| Q5 | What device? | Design approach |
| Q6 | How do they arrive? | Entry point |
| Q7 | Best outcome for both sides? | Success criteria |
| Q8 | Shortest path through the site? | Linear page flow |
Scenario Outline Template
# 01: Felix's Quick Registration
## Transaction (Q1)
Verify service availability before booking
## Business Goal (Q2)
BG01 - Increase trial signups by 40%
## User & Situation (Q3)
Felix (Primary) — Full-stack parent, evening after kids asleep, skeptical but motivated
## Driving Forces (Q4)
Hope: Find a simple app that the whole family will actually use
Worry: Wasting time on another tool nobody adopts
## Device & Starting Point (Q5 + Q6)
Mobile — Googles "family dog care app", clicks top result
## Best Outcome (Q7)
User: Account created, feels confident this will help
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 explore ✓
## Trigger Map Connections
Persona: Felix (Primary)
Want: Try before committing
Fear: Complex onboarding that wastes time
Business Goal: BG01 - Increase trial signups
Error states and edge cases are documented in the page specifications, not the scenario outline.
Output
C-UX-Scenarios/
└── 01-felixs-quick-registration/
├── 01-felixs-quick-registration.md
├── 1.1-landing-page/
├── 1.2-signup-form/
└── 1.3-welcome-screen/
Each scenario gets its own folder. Pages use NN.step-page-slug naming and are created via the page outline dialog or when you jump to Phase 4 (UX Design).
How Many Scenarios?
Depends on your product. Common patterns:
| Product Type | Typical Scenarios |
|---|---|
| Simple landing page | 2-3 |
| Web application | 8-15 |
| Complex platform | 20+ |
Start with the core user journeys. Add more as needed.
Practice
From your Trigger Map:
- List your personas
- For each persona, identify their primary goal
- That goal becomes a scenario
- Map the logical views they'll pass through
- Name it clearly
Lessons
Lesson 1: Scenarios, Not Pages
Why linear journeys matter more than isolated screens
Lesson 2: From Trigger Map to Scenarios
How to identify which scenarios to create from your Trigger Map
Lesson 3: Mapping the Journey
How to structure scenario outlines for clarity and action
Tutorial
Tutorial 08: Create Your Scenario Outlines
Hands-on guide to defining user journeys with Freya
Next Module
Module 09: Conceptual Sketching →
Time to sketch the default state of each logical view.
Part of the WDS Course: From Designer to Linchpin