1519  Interactive Design Process

1519.1 Learning Objectives

By the end of this chapter, you will be able to:

  • Apply the Six-Phase Design Process: Execute each phase from discovery through iteration effectively
  • Distinguish Divergent and Convergent Thinking: Know when to generate options versus select best solutions
  • Use Design Thinking Framework: Apply the Empathize-Define-Ideate-Prototype-Test cycle to IoT projects
  • Create “How Might We” Questions: Reframe problems as opportunities for innovation
  • Navigate Non-Linear Progress: Understand when and how to loop back to earlier phases

1519.2 Prerequisites

Before diving into this chapter, you should be familiar with:

  • Interactive Design Principles: Understanding the core principles of iterative design provides the foundation for applying the process effectively
  • User Experience Design: Knowledge of UX principles helps you understand user-centered goals at each process phase

1519.3 Introduction

Most interactive design processes follow a cycle of divergent exploration (generating many options) followed by convergent decision-making (selecting best options). This chapter provides a structured six-phase methodology for applying interactive design principles in practice.

1519.4 The Six-Phase Design Process

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#2C3E50', 'primaryTextColor': '#fff', 'primaryBorderColor': '#16A085', 'lineColor': '#16A085', 'secondaryColor': '#E67E22', 'tertiaryColor': '#7F8C8D', 'clusterBkg': '#ECF0F1', 'clusterBorder': '#2C3E50', 'edgeLabelBackground':'#ffffff'}}}%%
graph TD
    A[1. Discover &<br/>Empathize] --> B[2. Define &<br/>Frame Problem]
    B --> C[3. Ideate &<br/>Explore Solutions]
    C --> D[4. Prototype<br/>Solutions]
    D --> E[5. Test &<br/>Learn]
    E --> F[6. Iterate]

    F -->|Refine Idea| D
    F -->|Reframe Problem| B
    F -->|New Direction| C
    F -->|More Research| A
    F -->|Validated| G[Ship Product]

    A -.-> A1[User interviews<br/>Observation<br/>Journey mapping]
    B -.-> B1[Problem synthesis<br/>How Might We<br/>Success criteria]
    C -.-> C1[Brainstorming<br/>Sketching<br/>Storyboarding]
    D -.-> D1[Paper prototypes<br/>Digital mockups<br/>Functional builds]
    E -.-> E1[User testing<br/>A/B testing<br/>Pilot deployment]

    style A fill:#16A085
    style B fill:#16A085
    style C fill:#16A085
    style D fill:#16A085
    style E fill:#16A085
    style F fill:#E67E22
    style G fill:#2C3E50,color:#fff

Figure 1519.1: Six-Phase Interactive Design Process with Iteration Loops

{fig-alt=“Interactive Design Process cycle showing 6 phases: 1) Discover & Empathize (user interviews, observation, journey mapping), 2) Define & Frame Problem (synthesis, How Might We questions, success criteria), 3) Ideate & Explore (brainstorming, sketching, storyboards), 4) Prototype Solutions (paper, digital, functional), 5) Test & Learn (user testing, A/B testing, pilots), 6) Iterate (with multiple feedback loops back to earlier phases or forward to shipping).”}

This variant shows the Double Diamond framework - a different lens on the same design thinking process, emphasizing the alternation between divergent thinking (exploring many options) and convergent thinking (narrowing to best solution).

%% fig-cap: "Double Diamond Design Process"
%% fig-alt: "Double diamond diagram showing design process: First diamond covers Discover phase (diverge - broad research, many users, explore context) converging to Define phase (converge - synthesize findings, create problem statement). Second diamond covers Develop phase (diverge - brainstorm solutions, many prototypes) converging to Deliver phase (converge - test, refine, ship product). Diamonds show expansion and contraction of possibilities at each stage."

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#2C3E50', 'primaryTextColor': '#fff', 'primaryBorderColor': '#16A085', 'lineColor': '#16A085', 'secondaryColor': '#E67E22', 'tertiaryColor': '#ecf0f1', 'noteTextColor': '#2C3E50', 'noteBkgColor': '#fff3cd', 'textColor': '#2C3E50', 'fontSize': '16px'}}}%%

graph LR
    subgraph Diamond1["Problem Space"]
        direction TB
        Start[Challenge] --> D1["DISCOVER<br/>Diverge<br/>Research broadly<br/>Interview users<br/>Explore context"]
        D1 --> D2["DEFINE<br/>Converge<br/>Synthesize insights<br/>Frame problem<br/>How Might We?"]
    end

    subgraph Diamond2["Solution Space"]
        direction TB
        D2 --> D3["DEVELOP<br/>Diverge<br/>Brainstorm ideas<br/>Multiple prototypes<br/>Explore alternatives"]
        D3 --> D4["DELIVER<br/>Converge<br/>Test with users<br/>Refine solution<br/>Ship product"]
    end

    D4 --> Ship[Launched<br/>Product]

    style Start fill:#2C3E50,stroke:#16A085,stroke-width:3px,color:#fff
    style D1 fill:#16A085,stroke:#2C3E50,stroke-width:2px,color:#fff
    style D2 fill:#E67E22,stroke:#2C3E50,stroke-width:2px,color:#fff
    style D3 fill:#16A085,stroke:#2C3E50,stroke-width:2px,color:#fff
    style D4 fill:#E67E22,stroke:#2C3E50,stroke-width:2px,color:#fff
    style Ship fill:#2C3E50,stroke:#16A085,stroke-width:3px,color:#fff

Figure 1519.2: Double Diamond view emphasizing divergent-convergent thinking patterns in design process.

1519.4.1 Phase 1: Discover and Empathize

Goal: Understand users, their context, and their needs.

Activities:

  • User interviews and ethnographic observation
  • Journey mapping to understand current workflows
  • Identifying pain points and opportunities
  • Creating user personas representing key user types

Deliverable: Problem statement and user insights

IoT-Specific: Observe users in physical environments where IoT system will operate, not just lab or office.

1519.4.2 Phase 2: Define and Frame the Problem

Goal: Synthesize insights into clear design challenge.

Activities:

  • Affinity diagramming to find patterns
  • Creating “How Might We” questions to reframe problems as opportunities
  • Prioritizing which problems to solve first
  • Defining success metrics and acceptance criteria

Deliverable: Point-of-view statement or design brief

Example: “How might we help elderly users feel safe living independently without constant intrusive monitoring?”

1519.4.3 Phase 3: Ideate and Explore Solutions

Goal: Generate many possible solutions before committing to one.

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#2C3E50', 'primaryTextColor': '#fff', 'primaryBorderColor': '#16A085', 'lineColor': '#16A085', 'secondaryColor': '#E67E22', 'tertiaryColor': '#7F8C8D', 'clusterBkg': '#ECF0F1', 'clusterBorder': '#2C3E50', 'edgeLabelBackground':'#ffffff'}}}%%
graph TD
    A[Problem Statement:<br/>How might we help elderly<br/>users feel safe?] --> B[Brainstorm Session]

    B --> C[Idea 1:<br/>Wearable panic button]
    B --> D[Idea 2:<br/>Motion sensors in rooms]
    B --> E[Idea 3:<br/>Daily check-in calls]
    B --> F[Idea 4:<br/>Video monitoring]
    B --> G[Idea 5:<br/>Social activity tracker]
    B --> H[... 45 more ideas]

    C --> I[Sketch & Evaluate]
    D --> I
    E --> I
    F --> I
    G --> I

    I --> J{Select Top 3-5}
    J --> K[Prototype Chosen Ideas]

    style A fill:#2C3E50,color:#fff
    style B fill:#E67E22
    style I fill:#16A085
    style K fill:#16A085

Figure 1519.3: Ideation Process: From Problem Statement to Prototype Selection

{fig-alt=“Ideation process flowchart: Problem statement ‘How might we help elderly users feel safe?’ leads to brainstorm session generating 50+ ideas (wearable panic button, motion sensors, check-in calls, video monitoring, social activity tracker, etc.). Ideas are sketched and evaluated, top 3-5 selected for prototyping.”}

Activities:

  • Brainstorming with diverse team members
  • Sketching multiple design alternatives
  • Creating storyboards showing system in use
  • Considering extreme or provocative ideas to expand thinking

Principle: Quantity breeds quality—aim for 50+ ideas before evaluating.

Deliverable: Concept sketches and storyboards for top 3-5 ideas.

1519.4.4 Phase 4: Prototype Solutions

Goal: Make ideas tangible for testing.

Approaches (detailed in Prototyping Techniques):

  • Paper prototypes and cardboard mockups
  • Wizard of Oz prototypes (human simulating system intelligence)
  • Digital mockups and clickable wireframes
  • Functional prototypes with limited capabilities

Deliverable: Testable prototypes at appropriate fidelity level.

1519.4.5 Phase 5: Test and Learn

Goal: Validate assumptions and identify improvements.

Activities:

  • Usability testing with representative users
  • A/B testing different design alternatives
  • Pilot deployments in realistic environments
  • Analyzing usage data and user feedback

Deliverable: Insights about what works, what doesn’t, and why.

1519.4.6 Phase 6: Iterate

  • Return to earlier phases based on learnings
  • Refine successful elements
  • Redesign or discard unsuccessful approaches
  • Gradually increase prototype fidelity as confidence grows
  • Continue cycling until solution meets success criteria

Key Insight: This is not a linear process. Teams frequently jump between phases as new insights emerge.

1519.5 Design Thinking Methodology

Design thinking provides a structured framework for interactive design, particularly valuable for wicked problems where requirements are unclear and solutions non-obvious.

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#2C3E50', 'primaryTextColor': '#fff', 'primaryBorderColor': '#16A085', 'lineColor': '#16A085', 'secondaryColor': '#E67E22', 'tertiaryColor': '#7F8C8D', 'clusterBkg': '#ECF0F1', 'clusterBorder': '#2C3E50', 'edgeLabelBackground':'#ffffff'}}}%%
graph TD
    A[Design Thinking Framework] --> B[Empathize]
    A --> C[Define]
    A --> D[Ideate]
    A --> E[Prototype]
    A --> F[Test]

    B --> B1[User Research<br/>Interviews<br/>Observations]
    C --> C1[Synthesize Insights<br/>Problem Framing<br/>How Might We]
    D --> D1[Brainstorming<br/>Many Ideas<br/>Defer Judgment]
    E --> E1[Build to Think<br/>Make Ideas Tangible<br/>Low to High Fidelity]
    F --> F1[User Testing<br/>Feedback Gathering<br/>Learning]

    F --> G{Iterate}
    G -->|Refine| E
    G -->|Reframe| C
    G -->|New Ideas| D
    G -->|More Empathy| B
    G -->|Validated| H[Implement]

    style A fill:#2C3E50,color:#fff
    style B fill:#16A085
    style C fill:#16A085
    style D fill:#E67E22
    style E fill:#E67E22
    style F fill:#16A085
    style H fill:#2C3E50,color:#fff

Figure 1519.4: Design Thinking Framework: Five Phases with Iteration Loops

{fig-alt=“Design Thinking framework showing five phases in cycle: Empathize (user research, interviews, observations), Define (synthesize insights, problem framing, How Might We questions), Ideate (brainstorming, many ideas, defer judgment), Prototype (build to think, make tangible, low to high fidelity), Test (user testing, feedback, learning). Iteration loops connect back to any phase based on learnings until validated for implementation.”}

1519.5.1 Core Tenets

  1. Human-centered: Start with empathy for users
  2. Show don’t tell: Make ideas tangible through prototypes
  3. Bias toward action: Build to think, don’t just think
  4. Radical collaboration: Diverse teams generate better solutions

1519.5.2 Divergent vs. Convergent Thinking

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#2C3E50', 'primaryTextColor': '#fff', 'primaryBorderColor': '#16A085', 'lineColor': '#16A085', 'secondaryColor': '#E67E22', 'tertiaryColor': '#7F8C8D', 'clusterBkg': '#ECF0F1', 'clusterBorder': '#2C3E50', 'edgeLabelBackground':'#ffffff'}}}%%
graph TD
    A[Design Challenge] --> B[Divergent Thinking]
    B --> B1[Generate Many Ideas]
    B1 --> B2[Explore Possibilities]
    B2 --> B3[Defer Judgment]
    B3 --> B4[Quantity over Quality]

    B4 --> C[100+ Ideas Generated]

    C --> D[Convergent Thinking]
    D --> D1[Evaluate & Critique]
    D1 --> D2[Select Best Options]
    D2 --> D3[Apply Constraints]
    D3 --> D4[Make Decisions]

    D4 --> E[Top 3-5 Ideas]

    E --> F[Prototype Top Ideas]
    F --> G[Test]
    G --> H{Learn}

    H -->|Need More Options| B
    H -->|Refine Selection| D
    H -->|Validated| I[Implement]

    style B fill:#E67E22
    style B1 fill:#E67E22
    style B2 fill:#E67E22
    style D fill:#16A085
    style D1 fill:#16A085
    style D2 fill:#16A085
    style I fill:#2C3E50,color:#fff

Figure 1519.5: Divergent and Convergent Thinking: From 100+ Ideas to Implementation

{fig-alt=“Divergent vs Convergent thinking cycle: Divergent thinking (generate many ideas, explore possibilities, defer judgment, quantity over quality) produces 100+ ideas. Convergent thinking (evaluate & critique, select best, apply constraints, make decisions) narrows to top 3-5 ideas. These are prototyped, tested, and learnings determine whether to diverge again, converge differently, or implement.”}

Alternate between divergent and convergent modes throughout process.

Common mistake: Converging too quickly, selecting first acceptable idea rather than exploring broadly.

1519.5.3 Reframing Problems as Opportunities

Transform problem statements into “How Might We” questions:

Problem Statement How Might We Reframe
“Elderly patients forget to take medication” “How might we make medication routines engaging and memorable?”
“Users don’t understand automation rules” “How might we visualize system logic in intuitive ways?”
“Installation takes too long” “How might we create zero-setup IoT devices?”

Impact: Reframing shifts mindset from problem-solving to opportunity-seeking.

1519.6 Summary

Key Takeaways:

  1. The six-phase process provides structure without being rigid—expect to loop back frequently
  2. Divergent thinking generates options while convergent thinking selects best solutions—both are essential
  3. “How Might We” questions reframe problems as opportunities for innovation
  4. Each phase has clear deliverables but the process is non-linear
  5. Design thinking provides a human-centered framework for tackling complex IoT challenges

1519.7 What’s Next

The next chapter covers Prototyping Techniques, providing detailed guidance on low, medium, and high-fidelity prototypes for IoT systems, including a case study demonstrating the full design process in action.