Wireframing and User Flow

Deliverable: Submit user flow diagram, wireframes and reflection to #activity08 in the class Discord.

Overview

In Project 3, you will redesign an analog interface (radio, TV, remote, telephone, camera, et c.) into a multi-screen digital interactive prototype in Figma.

Activity 08 is a rehearsal for that project.

  1. Identify a single interaction that your analog object supports (tuning the radio, changing channels, power on/off, adjusting volume, taking a picture, opening a menu, et c)
  2. Map that interaction as a user flow (a simple flowchart describing the user’s steps)
  3. Sketch two digital wireframes that translate the analog action into a possible digital UI.

This isn’t a full design; it’s a quick thinking-through-doing kind of activity.

Don’t feel like you have to be precious or precise; the goal is to practice flow and structure. Polish comes later.

Objectives

By completing Activity 08, you will:

  • Understand how to break an interaction into discrete user actions.
  • Represent those actions as a user flow (flowchart).
  • Translate analog interaction logic into low-fidelity digital wireframes.
  • Prepare for the Project 3 Pitch Session (user flow + low-fi prototype).

The Task

1. Choose One Analog Interaction

Select one specific action that your analog object supports. For example:

  • Turning on/off
  • Navigating stations/channels
  • Adjusting volume
  • Saving a favorite station
  • Switching inputs/modes
  • Setting brightness or tuning
  • Taking a picture
  • Rewinding/fast-forwarding, etc.

Choose just one. Keep it simple.

2. Develop a User Flow Diagram

On paper or digitally:

  • Break the action into 3 – 6 steps.
  • Use the tools of the flowchart to show processes (boxes), decision points (diamonds) and terminal points (beginnings/endings, rounded oval-square-stadium).
  • Use arrows to show direction/sequence; label arrows, as necessary (yes/no, et c)
  • Keep wording short, concrete, precise:
    • User presses power button -> Device boots -> Menu appears -> User taps “Channels.”

A user flow describes the journey. Here are the key symbols: https://openlab.citytech.cuny.edu/mtec1101-sp2026/files/2025/04/image.png. A tool like this ‘User flow template’ from Brooke Clifton on Figma could be helpful! https://www.figma.com/community/file/1174820493855619258

3. Sketch Two Digital Wireframes

Create two low-fidelity digital sketches (paper or Figma):

  • Use simple boxes and labels only (no color, no decoration).
  • Include:
    • Navigation or controls
    • Any primary buttons/signifiers
    • The part of the screen where the action happens
  • Add small notes/arrows:
    • “tap -> next screen”
    • “swipe left -> reveal menu”
    • “disabled when no signal”

These wireframes should represent the start and result of the analog interaction translated to digital.

Deliverables (Post to #activity08)

  1. A photo or PNG or PDF (etc) of your User Flow diagram
    (hand-drawn or digital, either is fine).
  2. Two annotated wireframes
    • Can be photographs of paper sketches or screenshots from a Figma file.
  3. Short Reflection (100-150 words)
    Prompt options (pick one):
    • What changed when you translated the analog interaction to digital?
    • Which interaction-design principles (affordance, signifier, mapping, etc.) were most visible in your flow/wireframes?
    • What confused you, and what made sense?

Evaluation

Completion-based; full credit if you submit:

  • One user-flow diagram
  • Two wireframes
  • Short reflection