# Tutorial 09: Sketch Your Views

**Hands-on guide to visualizing logical views with Freya**

---

## Overview

This tutorial walks you through creating conceptual sketches for each logical view in your scenarios.

**Time:** 30-40 minutes
**Prerequisites:** Scenario outlines completed (Module 08)
**Agent:** Freya
**What you'll create:** Rough sketches showing default state for each logical view

---

## Before You Start

**You'll need:**

- Your scenario outlines (from Module 08)
- A way to sketch (paper, tablet, or just conversation)
- Your Trigger Map for persona reference

**Freya will help you:**

- Explore multiple layout options
- Connect visual decisions to personas
- Identify gaps before detailed specification
- Refine through conversation

---

## Step 1: Choose Your Entry Point (2 min)

### Decide how you'll visualize:

**Option A: Workshop (conversation-first)**
> "I want to talk through what this screen should contain, then you help me visualize it."

**Option B: You sketch first**
> "I'll sketch this on paper and share a photo for your feedback."

**Option C: AI generates options**
> "Show me 3 different layout approaches for this screen."

**Option D: Reference example**
> "I like how [product] handles this. Can we use similar patterns?"

All paths lead to the same outcome. Choose what feels natural.

---

## Step 2: Select First Scenario (2 min)

### Start with your most important scenario:

**You say:**
> "Let's sketch the views for S01-User-Registration. Starting with the landing page — the first logical view in the journey."

**Freya acknowledges:**
> "Perfect. S01-User-Registration takes the user from landing page to welcome screen. Let's start with the landing page — keyframe 0, the default state when the page loads."

---

## Step 3: Explore the First View (10 min)

### If using Workshop approach:

**Freya asks:**
> "What's the primary purpose of this landing page? What must the user understand immediately?"

**You respond:**
> "They need to understand what Dog Week is and feel confident it's worth trying. The primary action is clicking 'Start Free.'"

**Freya continues:**
> "For Felix, who fears complicated tools, how prominent should that CTA be? And what supporting information helps him feel confident?"

**Work through:**
- What elements are needed?
- What's the visual hierarchy?
- Where does the eye flow?

**Freya might suggest:**
```
Here's one approach:

┌─────────────────────────────────┐
│  Dog Week            [Login]   │
├─────────────────────────────────┤
│                                 │
│     Coordinate Your Family's    │
│          Dog Care               │
│                                 │
│     Everyone knows what to do.  │
│     No more missed walks.       │
│                                 │
│     [   Start Free   ]          │
│                                 │
│     No credit card required     │
│                                 │
└─────────────────────────────────┘

The CTA is prominent and the risk-reducer
("No credit card") addresses Felix's try-first
mentality.
```

### If sketching yourself:

1. Do 3 quick variants (60 seconds each)
2. Photo/scan and share with Freya
3. Discuss which elements work

**Freya responds:**
> "I see variant B has the CTA above the fold and minimal text. This aligns well with Felix. Variant C has more social proof — should we consider adding testimonials?"

---

## Step 4: Select Direction (5 min)

### Choose the layout that best serves the user:

**Freya helps evaluate:**
> "Looking at these options, which layout best addresses Felix's need for simplicity and quick start?"

**You decide:**
> "I think the centered layout with minimal distractions. It keeps the focus on the primary action."

**Freya confirms:**
> "Got it. The centered single-column layout becomes our selected direction for the landing page. Ready to sketch the next view?"

The WHY behind these decisions will be documented later in specifications (Module 11).

---

## Step 5: Continue Through Scenario (10 min)

### Move to next logical view:

**Freya prompts:**
> "Landing page is sketched. The next view in S01 is the Signup Form. What happens when Felix clicks 'Start Free'?"

**Repeat the process:**
1. What's the purpose of this view?
2. Explore layout options
3. Connect to persona
4. Select direction

**Example for Signup Form:**

```
Signup Form - S01-User-Registration - View 02

┌─────────────────────────────────┐
│  Dog Week            [Login]   │
├─────────────────────────────────┤
│                                 │
│     Create Your Account         │
│                                 │
│   ┌───────────────────────┐     │
│   │ Email                 │     │
│   └───────────────────────┘     │
│                                 │
│   ┌───────────────────────┐     │
│   │ Password              │     │
│   └───────────────────────┘     │
│                                 │
│   [    Create Account    ]      │
│                                 │
│   ← Back                        │
│                                 │
└─────────────────────────────────┘

Layout: Centered form, minimal distractions
Elements: Email field, password field, CTA button, back link
```

---

## Step 6: Complete the Scenario (5 min)

### Sketch remaining views:

For S01-User-Registration:
- ✓ Landing Page
- ✓ Signup Form
- Email Verification Prompt
- Welcome Screen

**Freya tracks progress:**
> "We have 2 of 4 views sketched. The Email Verification Prompt is next — this is a transitional view. What does Felix need to see and do here?"

### Keep moving:

Don't over-polish. Rough and complete is the goal.

---

## Step 7: Review and Refine (5 min)

### Look at the complete flow:

**Freya presents:**
> "Here's the full S01-User-Registration journey with sketches:
>
> 1. Landing Page — Value prop, prominent CTA
> 2. Signup Form — Minimal 2-field form
> 3. Email Verification — Check inbox prompt
> 4. Welcome Screen — Next step guidance
>
> Does this flow feel right for Felix?"

### Check for gaps:

- Does each view connect smoothly to the next?
- Is there any missing information?
- Does the layout serve the user's needs?

### Adjust as needed:

> "Looking at this, I think the welcome screen needs more guidance. Felix just signed up — what should he do next?"

---

## Step 8: Save and Organize (3 min)

### Save sketches with scenarios:

```
C-UX-Scenarios/
└── S01-User-Registration/
    ├── scenario-overview.md
    ├── sketches/
    │   ├── 01-landing-page-sketch.png
    │   ├── 02-signup-form-sketch.png
    │   ├── 03-email-verification-sketch.png
    │   └── 04-welcome-screen-sketch.png
```

Or keep sketches in the chat:

> "These sketches are saved in our conversation. Ready to reference when we create detailed specifications and document the WHY behind each decision."

---

## What You've Created

### For each logical view:

- **Rough sketch** showing default state layout
- **Selected direction** identified through exploration
- **Sketches ready** to serve as keyframe 0 for storyboarding

### Example deliverable:

```markdown
# S01-User-Registration Sketches

## View 01: Landing Page
[Sketch image or ASCII layout]

┌─────────────────────────────────┐
│  Dog Week            [Login]   │
├─────────────────────────────────┤
│                                 │
│     Coordinate Your Family's    │
│          Dog Care               │
│                                 │
│     Everyone knows what to do.  │
│     No more missed walks.       │
│                                 │
│     [   Start Free   ]          │
│                                 │
│     No credit card required     │
│                                 │
└─────────────────────────────────┘

Selected: Single-column, centered, mobile-first

## View 02: Signup Form
[Sketch image or ASCII layout]

┌─────────────────────────────────┐
│  Dog Week            [Login]   │
├─────────────────────────────────┤
│                                 │
│     Create Your Account         │
│                                 │
│   ┌───────────────────────┐     │
│   │ Email                 │     │
│   └───────────────────────┘     │
│                                 │
│   ┌───────────────────────┐     │
│   │ Password              │     │
│   └───────────────────────┘     │
│                                 │
│   [    Create Account    ]      │
│                                 │
│   ← Back                        │
│                                 │
└─────────────────────────────────┘

Selected: Centered minimal form, 2 fields only
```

---

## What Happens Next

### These sketches become:

- **Storyboards** (Module 10) — What changes after the default state
- **Specifications** (Module 11) — Detailed documentation of every element

### Your sketches inform:

- Layout structure
- Element hierarchy
- User flow
- Key interactions

---

## Tips for Success

**DO:**

- Keep sketches rough
- Explore multiple variants
- Focus on WHAT appears on screen
- Move quickly through all views
- Select a direction for each view

**DON'T:**

- Polish too early
- Settle on first idea
- Skip exploring alternatives
- Ignore mobile considerations
- Include colors/typography yet

---

## Common Questions

**Q: Do I need to be able to draw?**
A: No. Boxes and labels communicate structure. Freya can generate visual options too.

**Q: How detailed should sketches be?**
A: Just detailed enough to understand layout and hierarchy. Details come in specifications.

**Q: What if I change my mind later?**
A: That's the point of sketching. Better to change a rough sketch than a polished mockup.

**Q: Should I sketch every state?**
A: Just the default state for now. Other states (loading, error, success) come in storyboarding.

---

## You've Completed Module 09!

**Your logical views are visualized.** You have:
- Rough sketches showing default state for each view
- Selected layout directions identified through exploration
- Keyframe 0 ready for storyboarding

---

## Next Module

**[Module 10: Storyboarding →](../module-10-storyboarding/module-10-storyboarding-overview.md)**

Time to show what happens AFTER the default state — the transformations within each view.

---

[← Back to Lesson 3](lesson-03-why-hand-sketching.md) | [Back to Module Overview](module-09-conceptual-sketching-overview.md)

*Part of Module 09: Conceptual Sketching*