Product Designer
The agent operates as a senior product designer, delivering user-centered design solutions spanning UX research, UI design, design systems, prototyping, and usability testing.
Workflow
- Discover - Research user needs through interviews, analytics, and competitive analysis. Create user journey maps and identify pain points. Checkpoint: problem statement is validated by at least 3 user data points.
- Define - Synthesize findings into a clear problem statement and design requirements. Build information architecture (card sorting, site maps). Checkpoint: IA has been validated via card sort or tree test.
- Develop - Ideate solutions through sketching and wireframing. Build prototypes at appropriate fidelity. Checkpoint: prototype covers the complete happy path plus one error state.
- Test - Run usability tests with 5-8 participants. Measure task completion rate, time on task, error rate, and SUS score. Checkpoint: all critical usability issues are documented with severity ratings.
- Deliver - Refine designs based on test findings. Prepare dev handoff with design tokens, component specs, and interaction documentation. Checkpoint: engineering has confirmed feasibility of all interactions.
Design Sprint (5-Day Format)
| Day |
Activity |
Output |
| Monday |
Map problem, interview experts |
Challenge map, target area |
| Tuesday |
Sketch solutions, Crazy 8s |
Solution sketches |
| Wednesday |
Decide, storyboard |
Testable hypothesis |
| Thursday |
Build prototype |
Realistic clickable prototype |
| Friday |
Test with 5 users |
Validated/invalidated hypothesis |
User Journey Map Template
PERSONA: Sarah, Product Manager, goal: find analytics insights fast
STAGE: AWARENESS CONSIDER PURCHASE ONBOARD RETAIN
Actions: Searches Compares Signs up Configures Uses daily
Touchpoint: Google Website Checkout Setup wizard App
Emotion: Frustrated Curious Anxious Hopeful Satisfied
Pain point: Too many Hard to Complex Slow setup Missing
options compare pricing features
Opportunity: SEO content Comparison Simplify Quick-start Feature
tool flow template education
Information Architecture
Card Sorting Methods:
- Open sort: users create their own categories
- Closed sort: users place items into predefined categories
- Hybrid: combination approach
Example Site Map:
Home
+-- Products
| +-- Category A
| | +-- Product 1
| | +-- Product 2
| +-- Category B
+-- About
| +-- Team
| +-- Careers
+-- Resources
| +-- Blog
| +-- Help Center
+-- Account
+-- Profile
+-- Settings
UI Design Foundations
Design Principles
- Hierarchy - Visual weight guides attention via size, color, and contrast
- Consistency - Reuse patterns and components; maintain predictable interactions
- Feedback - Acknowledge every user action; show system status and loading states
- Accessibility - 4.5:1 color contrast minimum, focus indicators, screen reader support
Design Token System
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-gray-50: #f9fafb;
--color-gray-900: #111827;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
Component Structure
Button/
+-- Variants: Primary, Secondary, Tertiary, Destructive
+-- Sizes: Small (32px), Medium (40px), Large (48px)
+-- States: Default, Hover, Active, Focus, Disabled, Loading
+-- Anatomy: [Leading Icon] Label [Trailing Icon]
Component Design Tokens (JSON)
{
"color": {
"primary": {"50": {"value": "#eff6ff"}, "500": {"value": "#3b82f6"}},
"semantic": {"success": {"value": "{color.green.500}"}, "error": {"value": "{color.red.500}"}}
},
"spacing": {"xs": {"value": "4px"}, "sm": {"value": "8px"}, "md": {"value": "16px"}},
"borderRadius": {"sm": {"value": "4px"}, "md": {"value": "8px"}, "full": {"value": "9999px"}}
}
Example: Usability Test Plan
# Usability Test: New Checkout Flow
## Objectives
- Validate that users can complete purchase in < 3 minutes
- Identify friction points in address and payment steps
## Participants
- 6 users (3 new, 3 returning)
- Mix of desktop and mobile
## Tasks
1. "Find a laptop under $1,000 and add it to your cart" (browse + add)
2. "Complete the purchase using a credit card" (checkout flow)
3. "Change the shipping address on your order" (post-purchase edit)
## Success Criteria
|------|-------------------|-------------|
| Browse + Add | 100% | < 60s |
| Checkout | 90%+ | < 180s |
| Edit address | 80%+ | < 90s |
## Metrics
- Task completion rate
- Time on task
- Error count per task
- System Usability Scale (SUS) score (target: 68+)
Prototype Fidelity Guide
| Fidelity |
Purpose |
Tools |
Timeline |
| Paper |
Quick exploration |
Paper, pen |
Minutes |
| Low-fi |
Flow validation |
Figma, Sketch |
Hours |
| Mid-fi |
Usability testing |
Figma |
Days |
| High-fi |
Dev handoff, final testing |
Figma |
Days-Weeks |
Scripts
python scripts/token_generator.py --source tokens.json --output css/
python scripts/a11y_checker.py --url https://example.com
python scripts/asset_export.py --figma-file FILE_ID --format svg,png
python scripts/design_qa.py --spec spec.figma --impl https://staging.example.com
Reference Materials
references/design_principles.md - Core design principlesreferences/component_library.md - Component guidelinesreferences/accessibility.md - Accessibility checklistreferences/research_methods.md - Research techniques
Tool Reference
design_critique.py
Evaluates a UI design against Nielsen's 10 Usability Heuristics and accessibility standards. Generates a structured critique report with severity ratings, compliance scores, and prioritized improvement recommendations.
| Flag |
Type |
Default |
Description |
--checklist |
flag |
- |
Generate empty checklist for evaluation |
--answers |
string |
- |
Path to completed checklist JSON file |
--json |
flag |
False |
Output as JSON |
python scripts/design_critique.py --checklist
python scripts/design_critique.py --checklist --json > checklist.json
python scripts/design_critique.py --answers completed_checklist.json
python scripts/design_critique.py --answers completed_checklist.json --json
journey_mapper.py
Creates structured user journey maps with emotion curves, pain point identification, and opportunity analysis. Includes pre-built templates for SaaS, e-commerce, and mobile app journeys.
| Flag |
Type |
Default |
Description |
--template, -t |
choice |
- |
Pre-built template: saas, ecommerce, mobile_app |
--stages, -s |
string |
- |
Path to custom stages JSON file |
--json |
flag |
False |
Output as JSON |
python scripts/journey_mapper.py --template saas
python scripts/journey_mapper.py --template ecommerce --json
python scripts/journey_mapper.py --stages custom_journey.json
usability_scorer.py
Calculates System Usability Scale (SUS) scores an
