299 lines
8.3 KiB
Markdown
299 lines
8.3 KiB
Markdown
# 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
|
|
|
|
```markdown
|
|
# 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:
|
|
|
|
1. List your personas
|
|
2. For each persona, identify their primary goal
|
|
3. That goal becomes a scenario
|
|
4. Map the logical views they'll pass through
|
|
5. Name it clearly
|
|
|
|
---
|
|
|
|
## Lessons
|
|
|
|
### [Lesson 1: Scenarios, Not Pages](lesson-01-design-experiences-not-screens.md)
|
|
Why linear journeys matter more than isolated screens
|
|
|
|
### [Lesson 2: From Trigger Map to Scenarios](lesson-02-from-trigger-map-to-scenarios.md)
|
|
How to identify which scenarios to create from your Trigger Map
|
|
|
|
### [Lesson 3: Mapping the Journey](lesson-03-mapping-the-journey.md)
|
|
How to structure scenario outlines for clarity and action
|
|
|
|
---
|
|
|
|
## Tutorial
|
|
|
|
### [Tutorial 08: Create Your Scenario Outlines](tutorial-08.md)
|
|
Hands-on guide to defining user journeys with Freya
|
|
|
|
---
|
|
|
|
## Next Module
|
|
|
|
**[Module 09: Conceptual Sketching →](../module-09-conceptual-sketching/module-09-conceptual-sketching-overview.md)**
|
|
|
|
Time to sketch the default state of each logical view.
|
|
|
|
---
|
|
|
|
*Part of the WDS Course: From Designer to Linchpin*
|