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:
(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:
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:
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.