HCD Agile AI

Appearance

Agent.MD: Design Phase ​

Phase Overview ​

Phase: Design (Phase 3 of 5)

Purpose: Ideate, prototype, and test potential solutions to the defined problems.

Duration: Typically 2-4 sprints (iterative cycles)

Mindset: "Diverge then converge" - Explore many ideas, then narrow to the best

HCDAgile Design Principles ​

In the Design phase, we prioritize:

  1. Quantity First, Quality Second: Generate many ideas before judging
  2. Prototype to Learn: Build to test, not to perfect
  3. Fail Fast, Learn Faster: Embrace quick failures as learning
  4. User Validation: Test early and often with real users
  5. Iterate Relentlessly: Refine based on feedback

Primary Goals ​

  • [ ] Generate diverse solution concepts
  • [ ] Create low-fidelity prototypes
  • [ ] Test concepts with users
  • [ ] Iterate based on feedback
  • [ ] Converge on validated solution direction
  • [ ] Create high-fidelity prototypes
  • [ ] Validate design with stakeholders

Key Activities ​

Ideation ​

  • Conduct brainstorming sessions
  • Use "How Might We" questions as prompts
  • Generate 50+ ideas per HMW question
  • Avoid judgment during ideation
  • Build on others' ideas
  • Document all concepts

Concept Development ​

  • Group similar ideas
  • Develop promising concepts
  • Create concept sketches
  • Define user flows
  • Map interaction patterns

Prototyping ​

  • Build low-fidelity prototypes (paper, wireframes)
  • Create clickable prototypes
  • Develop interactive mockups
  • Build testable experiences
  • Iterate rapidly

User Testing ​

  • Test prototypes with 5-8 users per iteration
  • Observe user behavior
  • Gather feedback
  • Identify friction points
  • Validate assumptions
  • Document findings

Iteration ​

  • Analyze test results
  • Identify patterns in feedback
  • Refine designs
  • Retest with users
  • Repeat until validated

Deliverables ​

  1. Concept Sketches: 20-50 rough solution ideas
  2. Low-Fidelity Prototypes: Paper or basic digital mockups
  3. User Flow Diagrams: Visual representation of user paths
  4. High-Fidelity Prototypes: Interactive, realistic mockups
  5. Usability Test Reports: Findings from user testing sessions
  6. Design Specifications: Detailed design documentation
  7. Pattern Library: Reusable design components

AI Agent Instructions ​

Your Role in Design ​

As an AI agent in the Design phase, your role is to:

  • Generate diverse solution concepts
  • Create user flow diagrams and wireframes
  • Draft design specifications
  • Suggest interaction patterns
  • Identify accessibility considerations
  • Document design decisions
  • Assist with usability test planning
  • Synthesize user feedback

Ideation Guidelines ​

  • Go for quantity: Generate many ideas before evaluating
  • Defer judgment: Don't critique during brainstorming
  • Build on ideas: "Yes, and..." not "No, but..."
  • Think diverse: Explore different approaches
  • Visualize: Sketch ideas, even roughly
  • Stay on topic: Use HMW questions to focus

Prototyping Principles ​

  • Start low-fidelity: Paper, sketches, wireframes first
  • Build just enough: Prototype what you need to test
  • Iterate quickly: Create, test, refine, repeat
  • Make it testable: Ensure users can interact with it
  • Don't get attached: Be ready to throw away and restart

Design Fidelity Progression ​

  1. Sketches: Rough ideas on paper (minutes to create)
  2. Wireframes: Basic layout and structure (hours to create)
  3. Mockups: Visual design applied (day to create)
  4. Prototypes: Interactive, clickable (days to create)
  5. Specifications: Detailed implementation guide

Working Approach ​

  • Diverge First: Generate many options before narrowing
  • Test Assumptions: Validate through user testing
  • Follow Patterns: Use established UX patterns when appropriate
  • Design Accessible: Consider all users from the start
  • Document Decisions: Explain the "why" behind choices

Prohibited Actions ​

  • ❌ Do not skip user testing
  • ❌ Do not fall in love with first idea
  • ❌ Do not design in isolation without feedback
  • ❌ Do not ignore accessibility requirements
  • ❌ Do not build high-fidelity before validating concept
  • ❌ Do not assume you know what users want

Success Criteria ​

The Design phase is complete when:

  • ✅ Multiple concepts have been explored
  • ✅ Users have tested prototypes (5+ users, 2+ iterations)
  • ✅ Major usability issues are identified and addressed
  • ✅ Design validates against success metrics
  • ✅ Accessibility requirements are incorporated
  • ✅ Stakeholders approve design direction
  • ✅ Design is ready for development

Common Pitfalls to Avoid ​

  1. First Idea Bias: Falling in love with the first solution
  2. Skipping Lo-Fi: Starting with high-fidelity designs
  3. Design in Vacuum: Not testing with users
  4. Over-Designing: Perfecting before validating
  5. Ignoring Feedback: Defending design instead of learning
  6. Feature Creep: Adding features not validated by users
  7. Accessibility Afterthought: Not considering from the start

Usability Testing Guide ​

Test Preparation ​

  • Define test objectives
  • Create test scenarios/tasks
  • Recruit representative users (5-8 per round)
  • Prepare testing environment
  • Create observation guide

During Testing ​

  • Have users think aloud
  • Observe, don't lead
  • Ask follow-up questions
  • Note friction points
  • Watch body language
  • Record sessions (with permission)

After Testing ​

  • Synthesize findings
  • Identify patterns
  • Prioritize issues
  • Create action plan
  • Share with team

Key Questions to Ask ​

  • "What are you trying to do here?"
  • "What do you expect to happen?"
  • "Is this what you expected?"
  • "What's confusing about this?"
  • "How would you improve this?"

Design Best Practices ​

Interaction Design ​

  • Use familiar patterns
  • Provide clear affordances
  • Give immediate feedback
  • Make actions reversible
  • Show system status

Visual Design ​

  • Maintain visual hierarchy
  • Use consistent styling
  • Ensure sufficient contrast
  • Align with brand guidelines
  • Design for all screen sizes

Content Design ​

  • Use clear, concise language
  • Write in active voice
  • Avoid jargon
  • Provide helpful error messages
  • Guide user through flows

Accessibility ​

  • Follow WCAG 2.1 guidelines
  • Ensure keyboard navigation
  • Provide text alternatives
  • Use semantic HTML
  • Test with screen readers
  • Design for color blindness

Transition to Develop Phase ​

You're ready to move to the Develop phase when:

  • Design has been validated through user testing
  • Major usability issues are resolved
  • Stakeholders approve the design
  • Specifications are complete
  • Development team understands requirements
  • Accessibility requirements are defined
  • Success metrics can be tracked

Tools & Templates ​

Ideation Tools ​

  • Brainstorming techniques (SCAMPER, 6-3-5, etc.)
  • Crazy 8s exercise
  • Mind mapping
  • Affinity diagramming

Prototyping Tools ​

  • Paper prototyping
  • Figma/Sketch/Adobe XD
  • InVision/Marvel for clickable prototypes
  • Principle/Framer for interactive prototypes

Testing Tools ​

  • Usability test plan template
  • Test scenario scripts
  • Observation note-taking sheets
  • Feedback synthesis frameworks

Design System ​

  • Component library
  • Design tokens
  • Interaction patterns
  • Accessibility guidelines

Iteration Checklist ​

After each round of user testing:

  • [ ] Synthesize user feedback
  • [ ] Identify top 3-5 issues to address
  • [ ] Prioritize based on impact
  • [ ] Refine design to address issues
  • [ ] Validate changes don't create new problems
  • [ ] Plan next testing round

Resources & References ​

Design Methods:

Prototyping:

Usability Testing:

Accessibility:

Remember: Design is not about creating something pretty; it's about creating something that works for users. Test early, test often, and be willing to throw away ideas that don't work.

Released under the MIT License.

Copyright © 2025 Turnberry Labs