Week 5 - Prototypes - REVISED

Purpose

User-centered design requires feedback from ... users! It can be really painful to get feedback, even if constructive, after two hard weeks of polishing your product. The solution - prototypes! Having a go-to prototype program is critical for anyone with an interest in design.

Preparation

• Read LeanUX chapter 5, with particular focus on the Prototyping section.

Prototypes

In this unit you will first read about and select two prototype tools, then create a set of prototypes for your product.

Step 1 - Know the tools and procedures

Review prototype tool options:

• https://medium.com/@uixdesign/8-ux-and-ui-wireframe-tools-you-must-try-in-2019-3c6319658e90
• https://zapier.com/blog/best-wireframe-tools/

You should also read about A/B comparisons:

• https://uxdesign.cc/7-steps-of-a-b-testing-what-how-cf3b209467fd
• https://medium.com/vivareal-ux-chapter/why-ux-designers-should-care-more-about-a-b-testing-7ef88eaee3e9

Each person should select 1-2 tools of interest. Balsamiq has been a popular choice in the past, but you may prefer others. Your chosen tools should be free (maybe a trial version) and include some ability for "clickability" (i.e., link screens together).

Step 2 - Pick the tools and features

Your team should decide (via remote meeting/chat OR emails):

• What tools to use/critique. Pick at least two. A different one for each person is also OK.
• What features to prototype.
• These should relate to important user goals and should be fairly complex, likely spanning several screens (e.g., search for and modify a recipe with notes for future use, NOT a simple login screen).
• You may want to do an A/B comparison of some feature (i.e., have two team members create prototypes for the same feature, but with a different vision of how that feature should operate).
• You may want to create prototypes for two different core features (e.g., create Justinmind screens for practice interview questions, Mockplus screens for deciding the best job fit).
• Decide who will do each prototype.

INTERMEDIATE DELIVERABLE. Send an email from the team with a quick summary of the tools you plan to review (can modify if needed) and the functionality each team member will prototype (just a brief sentence).

Step 3 - Create the prototypes

Start early! If you can't get your chosen tool to work as desired, choose another. As you are working, do a critique of the prototype tool:

• Your goal is to quickly create a working prototype with some limited clickability - how well does it support that goal?
• A good UI mantra is "Don't make me think" - were any aspects of the tool confusing?
• Some tools have a larger learning curve because they have more extensive functionality - does that apply? If yes, does the tool provide any aids to help users learn?
• Other critiques (positive or negative), maybe based on ideas from Mind in Mind or other blogs you've read this semester? NOTE: probably most of us have aesthetic preferences. What I'm interested in here as how you apply what you've learned to your critique. For example, is there too much verbiage? Does the vocabulary (menus, etc.) match your expectations? Are there hints to guide your process? Could any steps be simplified? Are any error messages confusing?

You will need to a) record your thoughts in a pdf to share with both me and your teammates and b) think about how to submit your prototypes (also for review by both me and your teammates).

• For an online tool, you may be able to just provide a url. If possible, just place a clickable link at the bottom of your tool critique.
• If the output of the tool is a set of html pages, collect them all into a zip. Name the starting screen [yourlastname].html, so there's a clear way to execute the files.
• If neither of these apply, figure out what works best. Email me if you have questions.

Step 4 - Team discussion

Share your prototypes and critiques with your teammates, then prepare a team report (pdf) that includes:

1. For a future project, which tool would the team prefer? Does everyone agree? Explain.
2. Did the prototypes spark any new ideas about your program design?

Email me if you have questions about this (don't wait til the night it's due!)

Submit

Zip your individual prototype critiques, the individual prototypes, and the team discussion report.

Evaluation

In most CS courses, the "meat" of the final project is a fully functional version of some program. For us, the "meat" will be:

• A fairly extensive set of protypes (this unit!)
• a coded product that highlights the origin story and the "look-and-feel" of your product (unit 8)

Bottom line: plan to spend plenty of time creating your prototypes! I should be able to understand your ideas for the core part of your product by reviewing prototype screens. I'm the user - make me a hero!

I will assign three letter grades, one for the tool critiques, one for the prototypes, and one for the team report.