Assignment 3: Paper Prototypes

DUE Thurs, Oct 31 at 11:59pm

In this assignment, you will create and test paper prototypes that implement the design ideas you sketched out in Assignment 2.

What to turn in

You can work on your assignment draft in whatever format you like (e.g., Google Docs). You will be turning in your final assignment in Figma using the A3 template we've set up for you.

Include the names and PIDs of all team members, or else those missing team members will get 0 points for this assignment.

Here is how we will grade this assignment, out of 10 total points:

  • 1 point: Paper Prototype A complete, with photos and captions
  • 1 point: Paper Prototype B complete, with photos and captions
  • 2 points: write-up explaining paper prototype designs
  • 1 point: user testing write-up
  • 2 points: user testing point-of-view and plan for next steps
  • 3 points: APS (aesthetics, polish, and substance/storytelling)

(Note that APS counts for 30% of your grade because we want you to make something that will impress potential employers.)

Do not edit your Figma project after the due date or else it will be marked late and we cannot give you credit because of our no-late policy. If you want to make adjustments after the deadline, make a copy and edit that copy.

Details about each component

See the Oct 25 lecture slides for details, examples, and tools you can use to make these components.

2 Complete Sets of Paper Prototypes

For this assignment, you will be making 2 complete sets of paper prototypes that should be sufficiently different from one another.

Print out copies of this paper phone template to use as the basis for your prototypes. If you're targeting a vastly different form factor, you can use your own template.

Complete: Each prototype should be complete in the sense that it should implement all of the screens in a particular UX flow (remember that each UX flow has around 5 screens at most, so it's not too many). It should also contain cut-out paper UI components so you can move them around during user testing. Cut-outs are useful for showing dynamic UI elements like pop-up dialog boxes, drop-down menus, etc. Not all UI elements need to be cut-outs, though; use your best judgment. (But if your paper prototypes don't have any cut-outs, then they're just UI sketches!)

Different: Your two prototypes (Paper Prototypes A and B) should be different enough to ensure that you're exploring two alternative ideas. Different can mean:

  • one prototype corresponding to each of the two UX flows you made in A2
  • if you like one UX flow better, stick with that one and just create two different UIs that implement that single UX flow
  • if you want to blend the UX flows or try other variants, that's fine too; we're flexible as long as you justify your rationale

For each prototype, take photos of all screens and cut-out UI components laid out on top of screens, then add a short caption to explain what's in each photo. Unlike UI sketches, do NOT use a scanner app; just take regular well-lit photos so you can show how UI elements stack on top of the screens.

Write-up explaining paper prototype designs

Write a section explaining why you chose to create these two paper prototype designs in particular. Specifically, relate your design decisions to A2's UX flows and UI sketches. For instance, what design ideas did you take from A2 to create these prototypes, and what (if anything) did you change from A2? It's perfectly OK to change your ideas now! You just need to justify your changes.

In your write-up, also explain how your two paper prototypes are different from one another. Again you should justify your design decisions. A bad explanation is that you simply made the UI elements look different or placed them in different locations because you needed to show some difference. A good explanation is one that conveys how your two prototypes explore different design ideas or approaches to addressing your problem statement.

User testing write-up

You need to perform user testing on at least 3 people, with each person trying both Paper Prototypes A and B. See lecture slides for user testing tips. In this section, write up your methods and findings from user testing. In particular, include:

  • Who the user test participants are (you don't need to use real names; general demographics or job titles are fine). Where did you find them? Ideally you should find people in your app's target user population. But if that's not possible, then explain why your participants are still appropriate for user testing.
  • What task(s) did you have your participants try to do?
  • What did they like most about each prototype?
  • What did they struggle with or get confused by?
  • Which prototype did they prefer, and why? Since each user is testing both Prototypes A and B, it's very important to ask them to compare them to one another.
  • Photos are good here to show your user testing process.
  • (Videos are great too, but optional.)

User testing point-of-view and plan for next steps

The most important outcome of user testing is creating a clear point-of-view and plan for next steps. (Note that this is worth 2 points while the user testing write-up is only 1 point.)

Point-of-view: Write down a clear point-of-view that expresses a strong opinion about how your team interpreted the findings from user testing. The details will depend on your prototypes, but you should form some opinion about what your findings mean for your design process.

Plan for next steps: Based on your point-of-view, come up with a plan for what you'll do next. The next few assignments will involve committing to a design and creating high-fidelity prototypes in Figma. Does your team want to proceed with the design in Prototype A, Prototype B, a mix of the two, or a completely different idea altogether? Why are you planning to do that?

Here's a sign that you've done a good job: If a potential employer asked you in-person to explain what your user test findings actually mean and what you plan to do now, if you can give an answer that impresses them, then you've done a good job.

OPTIONAL: How you took TA feedback into account

If you want, you can include a section describing how you took your TA's feedback into account (e.g., Figma comments on prior assignments, in-person/Piazza feedback) when creating this one. This will help jog your TA's memory when they're grading. (This section is optional and ungraded.)

OPTIONAL: Additional sections

If you want to add more sections to better explain your design process and connect design rationale to prior assignments, feel free to do so! After all, the purpose of these assignments is to build up the best case study for yourself, so anything that shows a coherent and thoughtful design process can be beneficial.

Frequently Asked Questions

Q: Can we use an electronic tablet for drawing paper prototypes?

A: No. We want you to hand-draw UI components on pieces of paper and cut them out so they are easily movable and stackable.

Q: Should paper prototypes be in black & white or color?

A: We discourage using color since we don't want you to focus on visual design aesthetics at this early stage. But if color is integral to your design idea, then go for it.

Q: How come some of the examples we saw in lecture didn't have all the requirements for this assignment?

A: Because they weren't from this class. You can use lecture examples as inspiration, but make sure to meet the requirements of this assignment.