Interaction Design 101: User flows, Wireframes, Prototypes, and More!

Kayla Heffernan, UX Design Lead, PhD Candidate & Public S

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (32m)
    • 1. Welcome to Interaction Design 101

      1:43
    • 2. What is interaction design

      2:41
    • 3. Mapping user flows

      4:41
    • 4. Sketch the interface

      3:10
    • 5. Create wireframes

      8:21
    • 6. Prototyping

      7:07
    • 7. Documenting the interaction

      3:18
    • 8. Recap - Interaction design 101

      1:23

Project Description

With each lesson you’ll learn how to do a step in interaction design and apply it to your project. The project can be any app or product idea you have, or you can use a fictitious example to practice the steps such as an alcohol delivery app, a car sharing app etc. You may even want to use an existing product to practice on.

By the end of the class you will have:

  • A user flow for your app
  • Some sketches of designs for your app
  • Wireframes of these sketches
  • A prototype
  • And documentation showing the interactions.

In each lesson I'll mention which tools you may want to use for each activity, but really it's up to you 

User Flow

You can create this with pen and paper or using any online tool. 

Upload a photo of your user flow

Sketches

Do this activity using pen and paper 

Upload an image of your designs.

Wireframes

Create these using any program you are comfortable with, many have a free trial period. You can even use PowerPoint or KeyNote for this. Links to some other software: 

Upload an image of your designs.

Prototypes

Create these using any program you are comfortable with, many have a free trial period. You can even use PowerPoint or KeyNote for this. Links to some other software: 

Clickable / tappable prototype

Fully interactive prototypes

For the prototypes make a shareable URL from the tool you are using (e.g. Axshare for Axure, InVision link, or save a ppt presentation and host on dropbox of the like)

Documenting

Create these using any program you are comfortable with.

Upload an image.

Student Projects