W3D1: Prototyping

Background

Why Prototyping?

Prototyping lets you explore and test out your ideas cheaply before you’ve invested in building a full system. Prototypes are useful for:

  • Exploring alternatives: You can try out different designs and see which works best.
  • Testing assumptions: You can see if people can use your design the way you expect.
  • Getting feedback: You can have people try out your design and see if they can use it.

Parallel Prototyping

Make multiple prototypes! Because:

Types of Prototypes

  • Low-fidelity prototypes: Easy to make, easy to change. Good for checking basic ideas.
  • High-fidelity prototypes: Look and feel more like a finished product. Good for testing detailed interactions and exploring aesthetic decisions.

The perceived quality of a prototype can affect the feedback you get.

  • Too high-fidelity: People might think it’s more finished than it is and be less likely to suggest meaningful changes.
  • Too low-fidelity: People might not take it seriously or be able to give you useful feedback.

So match the fidelity of the prototype to the stage of design you’re in.

Activity

We’re going to try out several prototyping tools today, to get a feel for their pros and cons. For each tool, we’ll evaluate how well it helps us test assumptions, explore alternatives, and get feedback.

Instead of coming up with a new design, we’re going to pretend we were prototyping a design for an app that already exists. We’ll use the event-creation feature of a calendar app as our example. You can pick any calendar app you like, or use the built-in calendar app on your phone.

Instructions

  1. Split into groups of 2 or 3.
  2. Each group pick a specific app screen to mimic for this activity. Remember that we’re focusing on the event-creation feature of a calendar app.
  3. Each group picks a tool; although many teams will probably pick digital prototyping tools, at least one team should make a physical prototype. Spend no more than 3 minutes picking a tool.
  4. Try using that tool to reproduce the basic structure of the app screen that you chose. As you do this, also try to create some alternative design choices that the designers of the app might have considered.

Tools

Discussion

After you’ve tried out your tool, discuss:

  • How easy was it to capture the basic structure of the app screen?
  • How easy was it to create alternative designs?
  • How easy would it be to get feedback on your design from someone else? What kinds of things could you learn from that feedback?

Discuss these among your teams first, then we’ll come back together to share our experiences.

Capture for Your Portfolio

You might want to include both your team’s prototype and your reflections in your portfolio for this class, so make sure you capture both.