9.5 KiB

Raw Blame History

Tutorial 16: Create Your Delivery

Hands-on guide to validating specifications and packaging for handoff

Overview

This tutorial walks you through validating your complete design work and creating a delivery package for implementation.

Time: 30-40 minutes Prerequisites: All design work completed (Modules 08-15) Agent: Freya What you'll create: Validated specifications and delivery package

Before You Start

You'll need:

All your scenario outlines
All your page specifications
All your visual prototypes
Your component documentation (if applicable)

Freya will help you:

Audit specifications for gaps
Create delivery documents
Write acceptance criteria
Prepare for handoff

Step 1: Run the Validation Audit (10 min)

Start the audit:

You say:

"Please audit my specifications for S01-User-Registration. Check for completeness, traceability, and quality."

Freya audits:

"Auditing S01-User-Registration..."

Review findings:

Freya reports:

## Audit Results: S01-User-Registration

### Completeness
✓ All 3 pages specified
✓ All elements documented
⚠️ P02: Missing "rate limited" error state
✓ Content written (no lorem ipsum)
✓ Interactions described

### Traceability
✓ Connected to Trigger Map
✓ Persona: Felix
✓ Feature: F03-Quick-Signup
⚠️ P03 welcome screen: No business goal reference

### Quality
✓ Object IDs assigned
⚠️ Inconsistent terminology: "sign up" vs "signup"
✓ Accessibility considered

### Testability
⚠️ No acceptance criteria document yet

Resolve issues:

Freya:

"I found 4 issues. Let's resolve them:

Rate limited error — What message should show?"

You respond:

"'Too many attempts. Please wait 5 minutes before trying again.'"

Freya:

"2. P03 business goal — What goal does the welcome screen serve?"

You respond:

"User activation — converting signup to first meaningful action."

Freya:

"3. Terminology — Should we use 'signup' or 'sign up'?"

You respond:

"'Sign up' as two words for the action verb, 'Signup' as one word for the noun/form name."

Freya updates specifications with fixes.

Step 2: Create Delivery Overview (5 min)

Generate delivery document:

Freya:

"Creating delivery overview for DD01-User-Registration..."

# DD01: User Registration

## Summary
First-time user signup flow enabling new users to create an account
and reach the welcome dashboard.

## Business Context
- Persona: Felix the Full-Stack
- Driving Force: "Want to try before committing"
- Goal: Reduce friction in user acquisition

## Scenarios Included
- S01-User-Registration

## Pages

| ID | Page | Spec | Visual | Status |
|----|------|------|--------|--------|
| P01 | Landing Page | ✓ | ✓ | Ready |
| P02 | Signup Form | ✓ | ✓ | Ready |
| P03 | Welcome Screen | ✓ | ✓ | Ready |

## Components Used
- Button (primary, secondary, ghost)
- Input (text, email, password)
- FormField (wrapper component)

## Technical Dependencies
- Supabase Auth (authentication)
- Supabase Database (user storage)
- Email service (optional verification)

## Design System
- Mode: Building
- Tokens: See D-Design-System/tokens/
- Components: See C-UX-Scenarios/Functional-Components/

## Implementation Notes
- Mobile-first responsive design
- Real-time form validation
- Password strength indicator
- Form data preserved on error
- Keyboard accessible throughout

Step 3: Write Acceptance Criteria (10 min)

Define testable requirements:

Freya guides:

"Let's write acceptance criteria. Starting with the happy path..."

Work through each category:

Happy Path

## Happy Path

### Landing Page
- [ ] "Start Free" button is visible above fold
- [ ] Clicking "Start Free" navigates to signup form
- [ ] Login link navigates to login page

### Signup Form
- [ ] Form displays email and password fields
- [ ] Form displays "Create Free Account" button
- [ ] Button is disabled until form is valid
- [ ] Entering valid email removes email error
- [ ] Entering 8+ character password enables button
- [ ] Clicking submit shows loading state
- [ ] Successful submit navigates to welcome screen

### Welcome Screen
- [ ] Displays user's email address
- [ ] Shows clear next step guidance
- [ ] Provides navigation to main app

Error Handling

## Error Handling

### Validation Errors
- [ ] Empty email: "Email is required"
- [ ] Invalid email format: "Please enter a valid email"
- [ ] Empty password: "Password is required"
- [ ] Password < 8 chars: "Password must be at least 8 characters"

### Server Errors
- [ ] Duplicate email: "This email is already registered. Log in instead →"
- [ ] Server error: "Something went wrong. Please try again."
- [ ] Network error: "Connection lost. Please check your internet."
- [ ] Rate limited: "Too many attempts. Please wait 5 minutes."

### Error Recovery
- [ ] Form data preserved after error
- [ ] User can edit and resubmit
- [ ] Duplicate email links to login flow

Accessibility

## Accessibility

### Keyboard Navigation
- [ ] All interactive elements focusable
- [ ] Focus order matches visual order
- [ ] Focus visible on all elements
- [ ] Enter/Space activates buttons
- [ ] Tab moves through form fields

### Screen Reader
- [ ] All inputs have visible labels
- [ ] Errors announced when they appear
- [ ] Button states announced (loading, disabled)
- [ ] Form submission result announced

### Visual
- [ ] Color contrast passes WCAG AA
- [ ] Text resizable to 200% without breaking
- [ ] Touch targets minimum 44px

Step 4: Organize Delivery Package (5 min)

Create folder structure:

Freya:

"Organizing delivery package..."

E-PRD/Design-Deliveries/
└── DD01-User-Registration/
    ├── delivery-overview.md
    ├── acceptance-criteria.md
    ├── scenarios/
    │   └── S01-User-Registration/
    │       └── [references to C-UX-Scenarios/S01/]
    └── components/
        └── [references to C-UX-Scenarios/Functional-Components/]

Verify all links work:

Freya checks:

"Verifying all specification references...

✓ P01 landing page spec accessible

✓ P02 signup form spec accessible

✓ P03 welcome screen spec accessible

✓ Visual prototypes accessible

✓ Component docs accessible

Delivery package is complete."

Step 5: Final Review (5 min)

The Developer Test:

Freya asks:

"Can a developer who has never seen this project build it correctly from this delivery package?"

Review checklist:

All pages specified completely
All states documented
All content finalized
All error messages defined
Acceptance criteria testable
Visual prototypes match specs
Dependencies listed
No ambiguous requirements

Sign off:

Freya:

"Delivery package DD01-User-Registration is validated and ready for handoff to Idunn.

Summary:

3 pages specified

47 acceptance criteria

0 outstanding issues

4 components referenced

Design phase complete for this scenario."

Step 6: Handoff to Idunn (2 min)

Prepare handoff message:

Freya generates:

# Design Handoff: DD01-User-Registration

## For: Idunn (Implementation)
## From: Freya (Design)
## Date: [Today]

## Delivery Package
Location: E-PRD/Design-Deliveries/DD01-User-Registration/

## What's Included
- Complete specifications for 3 pages
- Visual prototypes (HTML)
- Component documentation
- Acceptance criteria (47 items)

## Dependencies Needed
- Supabase Auth configured
- User table in database
- Email service (optional)

## Priority
This is the primary user acquisition flow.
Recommend implementing before other scenarios.

## Questions?
Specifications should be complete. If anything is unclear,
the specification needs updating rather than verbal clarification.

---
Design phase complete. Ready for implementation.

What You've Created

Delivery Package:

Delivery overview — Summary for developers
Acceptance criteria — Testable requirements
Organized references — Links to all specs and visuals

Validated:

All specifications complete
All gaps resolved
All content finalized
All criteria testable

Tips for Success

DO:

Run the audit before declaring complete
Resolve all gaps before delivery
Write specific acceptance criteria
Reference, don't duplicate

DON'T:

Skip validation ("it's probably fine")
Leave vague requirements
Forget accessibility criteria
Package without final review

You've Completed the Design & Delivery Phase!

Congratulations! You've completed:

Design (Modules 7-13):

✅ Module 07: Design Phase Introduction
✅ Module 08: Outline Scenarios
✅ Module 09: Conceptual Sketching
✅ Module 10: Storyboarding
✅ Module 11: Conceptual Specifications
✅ Module 12: Functional Components
✅ Module 13: Design System

Build & Deliver (Modules 14-16):

✅ Module 14: Agentic Development
✅ Module 15: Visual Design & Assets
✅ Module 16: Design Delivery

Your design work is complete and handed off for implementation.

Next: Validate & Evolve

Module 17: Usability Testing →

Test your design with real users.

← Back to Lesson 1 | Back to Module Overview

Part of Module 16: Design Delivery

9.5 KiB Raw Blame History

Tutorial 16: Create Your Delivery

Overview

Before You Start

Step 1: Run the Validation Audit (10 min)

Start the audit:

Review findings:

Resolve issues:

Step 2: Create Delivery Overview (5 min)

Generate delivery document:

Step 3: Write Acceptance Criteria (10 min)

Define testable requirements:

Happy Path

Error Handling

Accessibility

Step 4: Organize Delivery Package (5 min)

Create folder structure:

Verify all links work:

Step 5: Final Review (5 min)

The Developer Test:

Sign off:

Step 6: Handoff to Idunn (2 min)

Prepare handoff message:

What You've Created

Delivery Package:

Validated:

Tips for Success

You've Completed the Design & Delivery Phase!

Next: Validate & Evolve

9.5 KiB

Raw Blame History