310 lines
6.9 KiB
Markdown
310 lines
6.9 KiB
Markdown
# Step 6.2: Create Design Delivery
|
|
|
|
## Your Task
|
|
|
|
Package your complete testable flow into a Design Delivery YAML file.
|
|
|
|
---
|
|
|
|
## Before You Start
|
|
|
|
**Ensure you have:**
|
|
|
|
- ✅ Completed step 6.1 (flow is complete)
|
|
- ✅ All scenario specifications ready
|
|
- ✅ All component definitions ready
|
|
- ✅ Clear understanding of user value
|
|
|
|
---
|
|
|
|
## Create Design Delivery File
|
|
|
|
### Step 1: Choose Delivery ID
|
|
|
|
**Format:** `DD-XXX-name.yaml`
|
|
|
|
**Examples:**
|
|
|
|
- `DD-001-login-onboarding.yaml`
|
|
- `DD-002-morning-dog-care.yaml`
|
|
- `DD-003-calendar-view.yaml`
|
|
|
|
**Numbering:**
|
|
|
|
- Start at DD-001 for first delivery
|
|
- Increment for each new delivery
|
|
- Use leading zeros (DD-001, not DD-1)
|
|
|
|
---
|
|
|
|
### Step 2: Copy Template
|
|
|
|
**Template location:** `templates/design-delivery.template.yaml`
|
|
|
|
**Create file:** `deliveries/DD-XXX-name.yaml`
|
|
|
|
```bash
|
|
# Create deliveries directory if it doesn't exist
|
|
mkdir -p deliveries
|
|
|
|
# Copy template
|
|
cp templates/design-delivery.template.yaml deliveries/DD-001-login-onboarding.yaml
|
|
```
|
|
|
|
---
|
|
|
|
### Step 3: Fill Out Delivery Metadata
|
|
|
|
```yaml
|
|
delivery:
|
|
id: 'DD-001'
|
|
name: 'Login & Onboarding Flow'
|
|
status: 'ready' # ready | in_development | in_testing | complete
|
|
priority: 'high' # critical | high | medium | low
|
|
version: '1.0'
|
|
created_at: '2024-12-09T12:00:00Z'
|
|
updated_at: '2024-12-09T12:00:00Z'
|
|
```
|
|
|
|
---
|
|
|
|
### Step 4: Define User Value
|
|
|
|
**What problem does this solve? What value does it deliver?**
|
|
|
|
```yaml
|
|
user_value:
|
|
problem: |
|
|
Users need to access the app securely and set up their
|
|
family structure before using core features.
|
|
|
|
solution: |
|
|
Streamlined onboarding flow that guides users through
|
|
account creation, family setup, and initial dog addition.
|
|
|
|
success_criteria:
|
|
- 'User completes signup in under 2 minutes'
|
|
- '90% onboarding completion rate'
|
|
- 'User satisfaction score > 4.5/5'
|
|
- 'Zero critical errors during onboarding'
|
|
```
|
|
|
|
---
|
|
|
|
### Step 5: List Design Artifacts
|
|
|
|
**Reference all scenarios and components for this flow:**
|
|
|
|
```yaml
|
|
design_artifacts:
|
|
scenarios:
|
|
- id: '01-welcome'
|
|
path: 'C-Scenarios/01-welcome-screen/'
|
|
description: 'Initial welcome screen with value proposition'
|
|
|
|
- id: '02-login'
|
|
path: 'C-Scenarios/02-login/'
|
|
description: 'Login flow for returning users'
|
|
|
|
- id: '03-signup'
|
|
path: 'C-Scenarios/03-signup/'
|
|
description: 'Account creation for new users'
|
|
|
|
- id: '04-family-setup'
|
|
path: 'C-Scenarios/04-family-setup/'
|
|
description: 'Family/household configuration'
|
|
|
|
user_flows:
|
|
- name: 'New User Onboarding'
|
|
path: 'C-Scenarios/flows/new-user-onboarding.md'
|
|
entry_point: '01-welcome'
|
|
exit_point: '04-family-setup'
|
|
|
|
design_system_components:
|
|
- component: 'Button'
|
|
variants: ['Primary', 'Secondary', 'Text']
|
|
path: 'D-Design-System/03-Atomic-Components/Buttons/'
|
|
|
|
- component: 'Input'
|
|
variants: ['Text', 'Email', 'Password']
|
|
path: 'D-Design-System/03-Atomic-Components/Inputs/'
|
|
|
|
- component: 'Card'
|
|
variants: ['Default', 'Elevated']
|
|
path: 'D-Design-System/03-Atomic-Components/Cards/'
|
|
```
|
|
|
|
---
|
|
|
|
### Step 6: Define Technical Requirements
|
|
|
|
```yaml
|
|
technical_requirements:
|
|
platform:
|
|
frontend: 'React Native 0.72'
|
|
backend: 'Supabase 2.x'
|
|
database: 'PostgreSQL 15'
|
|
|
|
integrations:
|
|
- name: 'Supabase Auth'
|
|
type: 'required'
|
|
provider: 'Supabase'
|
|
purpose: 'User authentication and session management'
|
|
|
|
- name: 'Email Verification'
|
|
type: 'required'
|
|
provider: 'Supabase'
|
|
purpose: 'Verify user email addresses'
|
|
|
|
data_models:
|
|
- model: 'User'
|
|
fields: ['id', 'email', 'name', 'created_at']
|
|
path: 'A-Project-Brief/data-models.md#user'
|
|
|
|
- model: 'Family'
|
|
fields: ['id', 'name', 'owner_id', 'created_at']
|
|
path: 'A-Project-Brief/data-models.md#family'
|
|
|
|
performance:
|
|
- 'Screen load time < 1 second'
|
|
- 'Form submission response < 500ms'
|
|
- 'Smooth 60fps animations'
|
|
|
|
security:
|
|
- 'Password must be hashed (bcrypt)'
|
|
- 'Email verification required'
|
|
- 'Session tokens expire after 30 days'
|
|
```
|
|
|
|
---
|
|
|
|
### Step 7: Define Acceptance Criteria
|
|
|
|
```yaml
|
|
acceptance_criteria:
|
|
functional:
|
|
- 'User can create account with email and password'
|
|
- 'User receives verification email'
|
|
- 'User can log in with verified credentials'
|
|
- 'User can set up family/household'
|
|
- 'User can skip dog addition during onboarding'
|
|
|
|
non_functional:
|
|
- 'All screens load in under 1 second'
|
|
- 'Forms validate input in real-time'
|
|
- 'Error messages are clear and actionable'
|
|
- 'Design system components used correctly'
|
|
- 'Accessibility: WCAG 2.1 AA compliance'
|
|
|
|
edge_cases:
|
|
- 'Handle email already exists error'
|
|
- 'Handle network timeout during signup'
|
|
- 'Handle app close mid-onboarding (resume state)'
|
|
- 'Handle invalid email format'
|
|
- 'Handle weak password'
|
|
```
|
|
|
|
---
|
|
|
|
### Step 8: Add Testing Guidance
|
|
|
|
```yaml
|
|
testing_guidance:
|
|
user_testing:
|
|
- 'Recruit 5-10 new users who have never used the app'
|
|
- 'Observe onboarding completion without assistance'
|
|
- 'Measure time to complete onboarding'
|
|
- "Ask: 'Was anything confusing?'"
|
|
- 'Target: 90% completion rate, < 2 minutes'
|
|
|
|
qa_testing:
|
|
- 'Test all happy paths'
|
|
- 'Test all error states'
|
|
- 'Test all edge cases'
|
|
- 'Test on iOS and Android'
|
|
- 'Test with slow network'
|
|
- 'Test with no network'
|
|
|
|
design_validation:
|
|
- 'Verify design system compliance'
|
|
- 'Verify accessibility'
|
|
- 'Verify animations and transitions'
|
|
- 'Verify copy matches specifications'
|
|
```
|
|
|
|
---
|
|
|
|
### Step 9: Estimate Complexity
|
|
|
|
```yaml
|
|
estimated_complexity:
|
|
size: 'medium' # small | medium | large | xlarge
|
|
effort: '2-3 weeks'
|
|
risk: 'low' # low | medium | high
|
|
|
|
dependencies:
|
|
- 'Supabase project setup'
|
|
- 'Email service configuration'
|
|
|
|
assumptions:
|
|
- 'Supabase Auth SDK is stable'
|
|
- 'Design system components are reusable'
|
|
- 'No major technical blockers'
|
|
```
|
|
|
|
---
|
|
|
|
## Validation
|
|
|
|
**Before proceeding, verify:**
|
|
|
|
- [ ] Delivery ID is unique and follows format
|
|
- [ ] All required fields are filled
|
|
- [ ] All scenarios are referenced
|
|
- [ ] All components are listed
|
|
- [ ] Technical requirements are clear
|
|
- [ ] Acceptance criteria are testable
|
|
- [ ] Complexity estimate is realistic
|
|
|
|
---
|
|
|
|
## Example Complete Delivery
|
|
|
|
See `design-deliveries-guide.md` for full example.
|
|
|
|
---
|
|
|
|
## Next Step
|
|
|
|
After creating the Design Delivery file:
|
|
|
|
```
|
|
[C] Continue to step-6.3-create-test-scenario.md
|
|
```
|
|
|
|
---
|
|
|
|
## Success Metrics
|
|
|
|
✅ Design Delivery file created
|
|
✅ All required fields filled
|
|
✅ All scenarios and components referenced
|
|
✅ Technical requirements documented
|
|
✅ Acceptance criteria defined
|
|
✅ Testing guidance provided
|
|
✅ Complexity estimated
|
|
|
|
---
|
|
|
|
## Failure Modes
|
|
|
|
❌ Missing required fields
|
|
❌ Incomplete scenario references
|
|
❌ Vague acceptance criteria
|
|
❌ Unrealistic complexity estimate
|
|
❌ Missing technical requirements
|
|
|
|
---
|
|
|
|
**Remember:** This Design Delivery is the contract between design and development. Be thorough!
|