courses.pgbovine.net

Assignment 2: Personas, Competitive Audit, UX Flows, UI Sketches

DUE Thurs, Oct 24 at 11:59pm

In this assignment, you will start to formulate possible solutions to real users' problems that you identified in Assignment 1.

What to turn in

You can work on your assignment draft in whatever format you like (e.g., Google Docs is useful for collaborating). You will be turning in your final assignment in Figma using the A2 template we've set up for you. See this playlist for Figma tutorial videos.

First, 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: Personas: created at least 2 unique personas that fit your Problem Statement, with appropriate visuals
  • 1 point: Personas: written explanations that show how your personas are informed by A1
  • 1 point: Competitive Audit: visuals (comparison table or pictures/animations)
  • 1 point: Competitive Audit: written explanation
  • 1 point: UX Flows: at least 2 unique and complete UX flows
  • 1 point: UX Flows: written explanation
  • 1 point: UI Sketches: photo scans of at least 20 hand-drawn screens + 1 overview photo of all of your screens
  • 1 point: UI Sketches: written explanation
  • 2 points: APS (aesthetics, polish, and substance/storytelling)

(Note that APS counts for 20% 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 Week 4's lecture slides for details, examples, and tools you can use to make these components.

Personas

First write down your Problem Statement from A1 in the template box we've provided in Figma. You can always revise this statement if you discover something new while you're creating personas or doing the rest of this assignment; iterating is good!

Create at least 2 unique personas that fit your Problem Statement. For your persona images, create either cartoon avatars or use good-quality photos of people.

Written explanations: Write details about each persona like the examples you saw in lecture. Most importantly, your explanations should convey how your personas are directly informed by your Problem Statement and your user research findings from A1.

Competitive Audit

Perform a competitive audit of several existing apps/websites/services/etc. that perform similar (but not necessarily identical) tasks as what you'd like to do for your project. If you're redesigning a feature, look at other apps that have similar features or interaction flows for inspiration.

Communicate your results visually either in a comparison table or by showing selected pictures/animations of those apps.

Written explanation: Write details like the examples you saw in lecture. Most importantly, at the end of this section, write about how your competitive analysis findings will inform the design of your project. After all, that's why you're doing it in the first place!

UX Flows

Draw at least 2 unique and complete UX flows through your planned feature(s). These can either be two different possible features, two different ways of implementing the same feature, or one feature for each of your two personas. We just want you to plan out multiple ideas so you're not fixated on one specific idea.

Since you're extending/redesigning a feature of a widely-used app and not creating an entirely new app, each complete UX flow should probably have 5 screens at most (or maybe a few more if your feature is complex). Each flow should have a clearly-marked entry point. For instance, if you're extending Facebook Groups, an entry point might be right after a user joins a new group.

Your UX flows should not be hand-drawn sketches; use Figma, one of the suggested computer-based tools from lecture, or another tool that you like. UX flows are diagrams with shapes, labels, and arrows; they should not contain specific UI elements.

Written explanation: Write a paragraph explaining the design of each of your UX flows. Explain and justify the entry point of each flow. Most importantly, how does each flow provide a solution to your Problem Statement? Which persona(s) are these flows designed for, and why? Optionally, if the flows were inspired by apps analyzed in your competitive audit, explain that here too.

UI Sketches

Sketches are most effective when you make lots of them: quantity over quality (but see lecture slides for how to maintain APS).

Make at least 20 hand-drawn sketches that somehow correspond to the screens you outlined in your UX flows. Each sketch doesn't need to be overly detailed, though. You can organize the sketches however you like. For instance, if each UX flow has 5 screens and you have 2 complete UX flows, that's 10 sketches. Double that amount will make 20 sketches; that will let you make 2 alternative UIs for each screen. If you want to sketch more alternatives for certain important screens and fewer alternatives for other simpler screens, that's fine too. But just get to at least 20!

Take photos of each of your 20+ sketches individually and use a phone scanner app if possible to make them look good.

Then take 1 overview photo of all of your 20+ sketches laid out in a grid. Including this in your case study will show that you explored many alternatives in this part of your design process.

UI sketches must be hand-drawn! Don't use a computer-based tool for sketches like you did for your UX flows.

Written explanation: Reflect on your UI sketching experience. Questions you could address here include: What did your team learn from making so many UI sketches? How do your sketches tie into the UX flows you created in the prior section? How were your sketches inspired by the apps you analyzed in your competitive audit, if relevant?

Frequently Asked Questions

Q: Can we use an electronic tablet for UI sketches?

A: Yes, as long as you use a sketching app so it looks like pen/pencil sketches instead of computer-generated graphics.

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.