412 lines
9.5 KiB
Markdown
412 lines
9.5 KiB
Markdown
# 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:
|
|
>
|
|
> 1. **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..."
|
|
|
|
```markdown
|
|
# 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
|
|
|
|
```markdown
|
|
## 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
|
|
|
|
```markdown
|
|
## 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
|
|
|
|
```markdown
|
|
## 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:**
|
|
```markdown
|
|
# 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 →](../module-17-usability-testing/module-17-usability-testing-overview.md)**
|
|
|
|
Test your design with real users.
|
|
|
|
---
|
|
|
|
[← Back to Lesson 1](lesson-01-validation-packaging.md) | [Back to Module Overview](module-16-design-delivery-overview.md)
|
|
|
|
*Part of Module 16: Design Delivery*
|