Category: Course Activities (Page 2 of 3)

Key Dates

Research Presentation (online): TBD; but preferably Feb 23

Prototype Presentation (in-person): TBD; but preferably Feb 25

Project Overview

Over the past few weeks, we’ve explored the meaning of design, design thinking, rapid prototyping, and how constraints define creativity.

Over the next few weeks, we’ll practice what designers do:
research, collaborate, build prototypes and adapt to changing constraints.

Working in small groups, we’ll
research a designed object,
create a shared research archive, and
redesign that object under an ambiguous design brief (a new constraint or user need).

The goal is not just a finished project. This project is about learning how to work as a designer by doing the work a designer does: finding and organizing sources, experimenting with low-fidelity prototypes, documenting your process, and sharing our work with others.

Most important of all, this is about learning how to effective collaborate across difference, over time, through iteration and prototyping activities.

Objectives

• Learn how to research the history and impact of a designed object.
• Build and organize a simple research archive (with image + sources).
• Practice collaboration in a small group.
• Use low-fidelity prototyping to redesign an object under new constraints.
• Document your design process as you go.

Process

1. Groups will be assigned an object & a group in Lab Section (Lab 3).
2. Research Archive
   • Document…
     • A short description of your object (what it is, who designed it, when and why, and how it works)
     • An origin story: what constraint, problem, context, insight, or opportunity led to its invention?
     • Its impact: what difference has it made in the world, positive, negative, and otherwise?
   • Gather three good images of the object (they can be images you create yourself!)
   • Gather three credible sources that inform you about the object (articles, patents, websites, videos). Stay away from Claude / ChatGPT / Gemini as a source; likewise, stay away from listicles, and so forth.
     • Write 1-2 sentence notes for each source about what it contributed to your understanding.
   • Organize all materials in a shared folder + simple sources spreadsheet.
3. Redesign Challenge – After your in-class prototyping exercise (Lab 3), post pictures + caption of your prototype to #classnotes.
   • I will provide your group with an ambiguous design brief (a new constraint, context, or user).
   • Brainstorm and briefly sketch at least 5 possible redesign ideas.
   • Build at least one lo-fi prototype using everyday, commonly available materials and/or further modify the prototype you built in class during Lab 3.
   • Demonstrate at least two iterations, seeking and incorporating feedback (friends, instructor, other groups, parents, friends, strangers), refining and improving as you go.
4. Documentation
   • Save sketches, notes and process+prototype photos to your archive.
5. Final Presentation
   • Groups present:
     • Research archive (online, lecture)
     • Redesigned prototype (in person, lab)
6. Each student writes a short reflection when the process is complete:
   • What did you learn about collaboration?
   • How did the new constraint change your ideas?
   • What would you do if you had another three weeks?
   • What will you do differently next time?

Deliverables

• Group Research Archive (shared folder with images, sources, spreadsheet, and notes)
  • Process Documentation (sketches, notes, photos, iterations)
• Research Presentation
• Prototype(s) Presentation (lo-fi builds documented with photos; demonstrated in person in class)
• Individual Reflection
  

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.

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

---

Project Overview

Over the past few weeks, we have explored core principles of composition in visual and audio media. We’ve analyzed real-world examples, built collections of material, and developed audio interpretations of visual material and visual interpretations of audio material. This final assignment is an opportunity to further refine the material you’ve worked on.

By building our work methodically in Activity 04, 05 and 06, we have completed the lion’s share of this project! It was a challenge to demonstrate technical skill and comprehension of design principles. Now, you’ll have an opportunity to refine your work + reflect on your personal design sensibilities and decision-making process.

Objectives

• Develop a multi-modal composition that integrates sound and visuals.
• Apply principles of visual composition and audio design.
• Use an iterative process to refine and enhance design choices.
• Justify creative decisions through critical analysis and documentation.

Your Task

Refine the work developed in Activities 04, 05, and 06 into a final, polished piece. This will include:

• A 15-45s refined soundscape, using multiple sound sources (it can be longer, but we’ll only assess 15-45s of it)
• A revised visual composition.
• A written design rationale explaining how sound and image interact, how each informs the other, and how iteration and refinement proceeded.

This project should demonstrate thoughtful and intentional use of the principles of composition across media. There should be a clear and meaningful relationship between sound and image.

Assessment Criteria

• Visual Composition (35%) – Effective use of the principles of composition and technical skill.
• Sound Composition (35%) – Effective use of technology and layering, effects, spatial depth, and sonic storytelling.
• Design Rationale & Process (30%) – Clarity and depth of analysis in explaining design choices, composition, and iteration.

Deliverables

Research Archive & Process Documentation

Submit a well-organized Google Drive folder containing:

• All original materials (e.g., source images, recorded or found sounds)
• Project files (.ai for Illustrator, .sesx for Audition)
• Final exports (.png for image, .mp3 or .wav for audio)
• Notes, sketches, test versions, and process documentation
• A clearly labeled folder structure

Final Composition

Sound Composition (Adobe Audition)

• A 30-45 second soundscape refined from your Activity 05 materials and your Activity 06 soundscape
• Should demonstrate a clear connection to your visual work. It may reinforce, contrast, or complicate the image.

Visual Composition (Illustrator)

• A refined (and/or abstracted) version of your Activity 06 visual design. Emphasize the elements that are most reinforced or reflected in your soundscape.
• Consider the use of typography, abstraction, contrast, spatial organization, et cetera.

Presentation (In-Person)

• Show and tell visual + sound.  No need for a slide deck.  The work should stand on its own, but be ready to answer questions and receive peer critiques.
• Feel free to present either in-person, online, or record + submit a video.

Design Rationale (500-1000 Words)

• Explanation of how your choice of image shaped your sound design.
• Explanation of how your sound design shaped your revision of your image.
• Describe the techniques you used in Adobe Audition and Illustrator.
• Talk about how principles of composition guided your decisions.
• Reflect on what you learned through the process of iteration and refinement.

Final Deliverables

1. Presentation: Presentations of the elements in process, submitted for peer review.  Peer feedback will be collected to inform the final iteration.
2. End of the Semester: Final version of the composition will be submitted as part of the Research Archive to the instructor, showcasing the completed multi-modal composition, along with a design rationale.

Final submission will come in the form of addition to your portfolio, which is built from the material of Project 2.