Assignment 4: High-Fidelity Prototype

DUE Thurs, Nov 7 at 11:59pm

In this assignment, you will use Figma to create a high-fidelity prototype based on your paper prototypes from Assignment 3.

We also suggest you read ahead to see what's coming up in Assignment 5 before starting on this assignment.

What to turn in

You will be turning in your final assignment in Figma using the A4 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
  • 1 point: all screens are labeled with meaningful captions
  • 2 points: write-up describing your prototype
  • 1 point: alternative versions for 2 of your app's screens
  • 1 point: write-up justifying your alternative versions
  • 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.

Figma prototype

You should create a complete Figma prototype containing all the screens of your app design. Each screen should be 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 A4 Figma template we've provided.

Since this is a high-fidelity prototype, we will be grading based on visual aesthetics, especially on how well your prototype matches the visual design of the target app that you're extending or redesigning. See lecture slides for examples of UI components, fonts, and colors that you can use.

Write-up describing your prototype: As usual, you need to justify your design decisions by addressing questions such as:

  • Does this Figma prototype implement one of your original UX flows from A2? Or did you have to change the flow? If so, what changed, and why? (Remember, changing is OK as long as you explain it well to show your design process at work.)
  • How did you go from your 2 paper prototypes in A3 to this one Figma high-fidelity prototype? What did you learn from user testing or other feedback that informed this decision?

Alternative versions of 2 screens

We also want you to create alternative versions of 2 of your app's screens. Look at the Figma template for suggestions for where to place these alternatives; a good location is right next to the original versions, along with a caption. During A5, you will get feedback from your classmates on these alternative screens.

It's a good idea to pick your 2 most complex or core functionality screens here, since those will provide the greatest substance for considering alternative designs.

What counts as a good alternative? Examples include radically different UI layouts, different ways to perform similar actions, or different ways to present on-screen information. No matter what, your alternatives should look significantly different than the originals (but still match your target app's visual design aesthetics). If you have questions, talk to your TA soon!

What is a “bad” alternative? Just changing minor things like a button's location or color. If someone can't find meaningful differences at a quick glance, then that's bad.

Write-up justifying your alternative versions: Add a caption next to each of your 2 alternative screens to describe how they are meaningfully different than the originals and justify why you created them. Specifically, what do you hope to learn in A5 by getting feedback on your original and alternative versions?

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.