Assignment 5: Refining Your High-Fidelity Prototype

DUE Thurs, Nov 14 at 11:59pm

In this assignment, you will get feedback on your Figma prototype from Assignment 4 and refine its design to make it more polished.

What to turn in

You will be turning in your final assignment in Figma using the A5 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:

  • 2 points: Figma prototype is complete, with all your app's screens visible and matching the target app's design style (we will be stricter than A4 about grading on visual aesthetics)
  • 1 point: all screens are labeled with meaningful captions
  • 2 points: write-up describing user / TA feedback and how you improved upon your A4 prototypes
  • 1 point: before-and-after versions of 2 screens (2 screens x 2 versions of each screen = 4 screens total)
  • 1 point: captions explaining your 2 before-and-after stories
  • 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 Nov 1 lecture slides for details, examples, and tools you can use to make these components.

User feedback and improved Figma prototype

Show your A4 Figma prototype to at least 3 potential users and get their feedback on it, especially asking them to compare the 2 alternative screen designs. Integrate that user feedback with your TA's feedback to improve your prototype design.

Similar to A4, create a complete Figma prototype containing all the screens of your app, with each screen as a frame with a meaningful text caption describing it. Note that all of your individual screen frames will reside within one giant frame that surrounds them all. For guidance, look at the A5 Figma template we've provided.

You can copy-paste your A4 app screens into the A5 template as a starting point; no need to start from scratch! (Note that unlike A4, you don't need to provide any alternative screen designs here. Just provide one complete set of screens for your entire app.)

If your prototype is already in great shape, you may not need to make many changes; but if your users and/or TA give you substantive feedback, this is your chance to improve upon A4. Since this prototype is nearly-finalized, we will be much stricter about grading based on visual aesthetics.

Write-up: Summarize the user feedback that you received. For instance, who did you get as participants? What meaningful feedback did they provide? How did that inform which of your alternative screens you chose to include in your final prototype? What feedback (if any) did you get from your TA that informed your designs? What else did you change from A4, and why?

Before-and-after stories

In a separate Figma frame (see A5 template for details), we want you to present before-and-after stories for 2 of your app's screens that you improved or redesigned based on user/TA feedback. For each of those 2 screens, show the original (before) version copied from A4 side-by-side with your improved (after) version. To show how specific parts have changed, add text annotations and lines pointing to the parts that correspond to each other in the before and after versions. (This is optional but useful for making the differences more clear!) Finally, write a caption underneath each of them to explain how you improved or redesigned that screen in particular after receiving user/TA feedback.

Before-and-after stories are critical for showing that you've been thoughtful about taking feedback into account to improve your designs. If done well, they look very impressive in a case study.

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.)

[It's OK if this section duplicates some content from the above sections.]

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.