7.0 KiB

Raw Blame History

Phase 3: UX Scenarios (Scenario Outlines)

Agent: Saga the Analyst Output: C-UX-Scenarios/ (in your configured design artifacts folder)

What This Phase Does

UX Scenarios transforms your Trigger Map into concrete user journeys. Through the 8-question scenario dialog, you define each meaningful transaction a user performs on your site — starting with the most important one.

By the end, you'll have scenario outlines that ground every design decision in real user psychology and business goals.

The 8-Question Scenario Dialog

This is the core of Phase 3. For each scenario, you walk through 8 strategic questions — one at a time, as a natural conversation:

#	Question	What it establishes
Q1	"What transaction do we need to get really right?"	The key user journey
Q2	"Which business goal does it serve?"	Trigger Map connection
Q3	"Which user, and in what real-life situation?"	Persona + context
Q4	"What do they want and fear going into this?"	Driving forces
Q5	"What device are they on?"	Platform
Q6	"What's the natural starting point?"	Entry point + discovery
Q7	"What's the best possible outcome — for both sides?"	Mutual success
Q8	"What's the shortest path through the site?"	Linear sunshine path

What counts as a transaction: Not just purchases or bookings. Clicking through a menu item by item to research site content is a transaction. Comparing options is a transaction. Any meaningful journey where the user moves through the site with intent.

Two Modes

Conversation mode (default): Saga asks, you answer. One question at a time. Each answer shapes the next question naturally.
Suggest mode: Saga answers all 8 questions based on the Trigger Map and Product Brief. You review and adjust.

The Scenario → Page Flow

After the 8 questions define a scenario, the process continues with page outlining and design:

flowchart TD
    A["8-Question Scenario Dialog\nQ1-Q8 → Name → Quality Gates → Save"] --> B{"Post-Scenario Menu"}

    B -->|"[N] Next scenario"| A
    B -->|"[O] Outline pages"| C["Page Outline Dialog"]
    B -->|"[D] Design first page"| D["Create First Page Folder"]
    B -->|"[C] Overview"| Z["Generate Scenario Overview"]

    C --> E{"For each page:"}
    E --> F["1. What's the point of this page?\n2. What does the user do to move forward?"]
    F --> G{"Interaction type?"}
    G -->|"Leaves page"| H["New scenario step\n→ Create page folder"]
    G -->|"Stays on page"| I["Storyboard item\n→ Document in page spec"]
    I --> F
    H --> J{"Continue?"}
    J -->|"Next page"| E
    J -->|"Stop"| B

    D --> K["Phase 4: Design Page\nSteps 08-15"]

    K --> L{"Page Complete Menu"}
    L -->|"[N] Next page"| M["Outline → Design Loop"]
    L -->|"[R] Dashboard"| N["Phase 4 Scenario Dashboard"]
    L -->|"[V] Validate"| O["Audit Page Spec"]
    O --> L

    M --> P["Outline next page\nPurpose + Exit Action"]
    P --> Q["Create page folder"]
    Q --> K

The Page Outline Dialog

For each page in the scenario, ask two questions:

1. "What's the point of this page?" What does the user need to accomplish here?

e.g., "See a list of news articles" or "Find the phone number and opening hours"

2. "What does the user do to move forward?" What interaction takes them to the next step?

e.g., "Selects 'News' in the menu" → next page is the News listing

Two types of interactions:

Leaves the page → new scenario step (new page folder)
Stays on the page → storyboard item (documented within the page spec)

The Outline → Design Loop

After designing a page in Phase 4, the user can choose [N] to outline and design the next page. This creates a continuous loop:

Outline the next page (purpose + exit action)
Create the page folder with boilerplate spec
Design the page (Phase 4 steps 08-15)
Repeat until all pages are done

Page Folder Structure

Each page gets its own folder with a spec and a Sketches subfolder:

C-UX-Scenarios/01-hasses-emergency-search/
├── 01-hasses-emergency-search.md         # Scenario outline
└── pages/
    ├── 01.1-start-page/
    │   ├── 01.1-start-page.md            # Full boilerplate
    │   └── Sketches/
    ├── 01.2-services/
    │   ├── 01.2-services.md              # Minimal boilerplate
    │   └── Sketches/
    └── 01.3-contact/
        ├── 01.3-contact.md               # Minimal boilerplate
        └── Sketches/

Naming convention: {scenario-number}.{step-number}-{page-slug}

The first page gets rich context from the 8-question dialog (device, arrival method, mental state, user situation). Remaining pages get minimal boilerplate with page purpose.

What You'll Create

Scenario outlines — one per transaction, grounded in Trigger Map personas and business goals
Page folders — structured boilerplate specs ready for Phase 4 design
Scenario overview — summary of all scenarios with page assignments

Post-Scenario Options

After each scenario, you choose:

Option	What happens
[N] Next scenario	Define the next transaction for the next target group
[O] Outline pages	Walk through pages one at a time, creating folders
[D] Design first page	Create first page folder and jump to Phase 4
[C] Continue	Generate scenario overview (when all are done)

Quality Gates

Before moving on from a scenario, Saga verifies:

All 8 questions answered with specific, concrete responses
Mental state is visceral and specific (not generic "interested")
Entry point is realistic with device + context + discovery method
Path is truly linear (zero "if" statements, zero branches)
Both successes are specific and measurable
Scenario name includes persona name
Trigger Map connection is explicit

When to Use This Phase

Always use this phase — it's the bridge between strategy (Phases 1-2) and design (Phase 4). Without scenarios, page design lacks context and purpose.

Process scenarios in priority order:

Primary transaction for primary target group
Secondary transactions
Tertiary/edge case transactions

What to Prepare

Bring:

Product Brief (Phase 1) — strategic context
Trigger Map (Phase 2) — personas, driving forces, business goals
Page inventory — known pages from the Trigger Map's feature analysis

Connection to Phase 4

Phase 3 scenarios feed directly into Phase 4 design:

Scenario gate: Phase 4 checks for existing scenarios before page design. No scenario? It redirects you back to Phase 3.
Page handover: The first page spec includes device, mental state, and entry context — everything Freya needs to start designing.
Outline → Design loop: After designing a page, you can outline the next one and continue designing without leaving Phase 4.

Phase 3 of the Whiteport Design Studio method

7.0 KiB Raw Blame History