12 KiB

Raw Blame History

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:

Do 3 quick variants (60 seconds each)
Photo/scan and share with Freya
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:

What's the purpose of this view?
Explore layout options
Connect to persona
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:

Landing Page — Value prop, prominent CTA

Signup Form — Minimal 2-field form

Email Verification — Check inbox prompt

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:

# 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 →

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

← Back to Lesson 3 | Back to Module Overview

Part of Module 09: Conceptual Sketching

12 KiB Raw Blame History