Interaction Design Prototype – From Analog to Digital

Project Overview

In Unit 3, we’ve moved from composition to interaction, explored design principles that have moved from arranging static elements towards choreographing experiences between humans and artifacts.

You’ve practiced reverse-engineering digital interfaces using wireframing in class, put together a two-screen interactive prototype in Figma for Activity 07, and you’ve been introduced to combining flow charts and wireframes to document states and screens, in Activity 08. This project tasks you with putting these skills together to create an interactive prototype.

For this project, you’ll imagine (or reimagine) and deign (or redesign) a digital interaction in Figma (optionally: informed by the affordances of the analog interface).

Your task is to design a multi-screen interactive prototype.

Your final submission will be individual.

This is a full design prototype: a small, well-observed, and intentional interaction built in Figma.

OPTIONAL: Feel free to inform your design through emulation of one of the following analog control schemes, as observed in class:

  • TV
  • Radio
  • Telephone
  • Remote Control
  • Camera
  • Music Player

You’ll share research with your community of inquiry, but you will work individually to build a modest interactive prototype that demonstrates your understanding of the principles of interaction design.

Objectives

  • Translate an analog interaction into a digital prototype.
  • Apply core interaction design principles in Figma.
  • Practice user-centered, iterative design methods.
  • Communicate interaction flow clearly with sketches and diagrams.

Your Task

  1. Choose an interaction to build Choose an analog interface
    • Have an idea! It could be as simple as ‘something to do with music’, as complex as an original, never before seen
    • Select an analog device (e.g., radio, TV, telephone, remote control, music player, camera)
    • Create or join a Discord channel of peers working on the same type of device so that you can share research materials.
    • Consider starting a shared Notion (to be introduced November 17). For now, work with a shared Google Drive folder.
  2. Research and analyze
    • Document your the affordances, signifiers, constraints, and feedback of a few (2-3) examples of digital and/or analog experiences that already do what you’re trying to do.
    • Working collaboratively, create a brief design narrative of your interface; what came before it? What led to this version? What other competitors or alternatives existed at the same time as it?
      • Each group member is responsible for submitting at least one resource (link, article, news story, et cetera), to contribute to this understanding.
    • Find at least one digital descendant of your object: an app, experience, or device that builds on the design language established by your object.
      • Each group member is responsible for submitting at least one resource.
    • Create a group presentation: each group member is responsible for one slide in the presentation, sharing their insights.
  3. Sketch, Userflow and Wireframe
    • Create simple sketches of your redesigned interface (low fidelity; sketches). One sketch per screen (though, of course, they could all be on a single sheet of paper).
    • Produce a userflow diagram (as in activity 08) to explore how interactors will move through the prototype.
    • Translate these lo-fi wireframes into mid fidelity Figma frames (boxes, text labels, minimal styling).
  4. Prototype
    • Build interactivity into your mid-fi Figma frames, building them into a three-screen interactive in Figma (using the Prototype tab).
    • Demonstrate at least one user interaction
      • e.g. tap -> transition;
      • on hover -> reveal a different component;
      • on press -> open overlay.
  5. Finalize
    • Complete a mid-fidelity multi-screen interactive prototype in Figma.
  6. Document Your Process
    • Save screenshots of your sketches, wireframes, and final prototype.
    • Write a design rationale (400-800 words), explaining:
      • The analog interaction you studied.
      • Your goals and choices in the redesign.
      • The design journey: tell us the story of how you achieved your redesign.
      • Which interaction principles you employed; what you emphasized, and why.

Document each stage of your process.

Deliverables

  • Have an idea, write a brief rationale for why you picked it (~100-300 words).
  • Produce a user flow diagram, and low-fidelity wireframes.
  • Multi-screen interactive prototype
    • Include the design of graphic elements unique to your design, in either Figma or Illustrator (which are then imported into Figma)
    • Your prototype can include affordances such as buttons, toggles, slides, as appropriate; they do not need to do what they should (ie: sound is impossible to include in figma). Bonus points if interacting with them creates interaction.
  • Process folder (wireframes, notes, iterations, original graphic pngs + .ais, if there are any). Upload a link to a shareable folder to #project03 on Discord. It should contain:
    • Link to Figma view-only prototype.
    • Link to Figma project.
    • Folders containing flow diagrams, wireframes, and written rationale.
    • Screenshots of process
    • Research folder / materials / presentation
    • Include your brief rationale as a PDF.
  • Entry for Project 3 in your ePortfolio, showcasing your high-fidelity prototype & incorporating elements of your process folder + design rationale.

Assessment Criteria

Your final interactive prototype should:

  • Demonstrate key interaction design principles.
  • Reflect user-centered design thinking, focusing on intuitive and responsive user interactions.
  • Show iterative improvements based on peer and instructor feedback.

Interaction Design & Usability (40%)

  • Demonstration of understanding of core IxD principles (affordances, signifiers, and constraints).
  • Effective, intuitive feedback mechanisms.
  • Logical, user-friendly interaction flow.

Prototype Quality (40%)

  • Functional and polished interactive elements.
  • Good negotiation of the affordances and constraints of your interactive prototyping platform.

Documentation & Reflection (20%)

  • Document design decisions and rationale.
  • Evidence of iterative refinements informed by peer and instructor feedback.

Tips for Success

  • Keep it simple – one or two good interactions beat a half-a-dozen half-baked, messy ones.
  • Design with behavior in mind, first; aesthetic follows behind.
  • Arrange for informal peer review sessions with people in your research cluster and with people outside the cluster. Does your control behave as your users expect? What does the way that people interact with it tell you about how you should be designing?
  • Be ready to revise early and often.
  • Don’t try and do this whole thing in one leap. Take your time. Chip away with it, a little bit, each day. Every day, sit down with it, put in five minutes of work. Walk around with it, like a friend.