Concrete prototypes elicit a very different kind of feedback than storyboards. For this project, student teams will develop their idea as a web prototype
and then create a variation that can be evaluated in an online A-B comparison. First, student teams will create paper prototypes and test them in class.
Teams will then develop a web prototype and run an online evaluation using participants from
Mob4Hire,
Optimizely, or
Mechanical Turk.
The high-level goal is to find ways to improve the interface.
Paper prototypes and heuristic evaluation. Student teams will create paper prototypes to help them move design ideas to a first draft of a user interface.
The paper prototype should be hand-drawn, show all the elements and states of a user interface.
It should be concrete enough to run users through tasks. For interactive elements, pieces of the interface will get swapped in.
Each team member should learn how to "operate" the paper prototype in time for an heuristic evaluation.
Using Nielsen's heuristics as a guide, teams will evaluate their paper prototypes in class. One teammate should operate the prototype and another should take notes.
A fellow student from another project will play the role of an expert evaluator and will run through at least five tasks. Be thorough, and honest, and write down all problems.
The feedback should help the group understand and decide which features of the interface to implement in the coming weeks.
An implemented web page and an alternative design. Create a mostly functional website using html, css, and javascript. Create a home page and add links to other screens.
Use fake data when necessary, but otherwise complete all aspects of the site. (If your team has the skills, feel free to implement a database, but this is not required.)
The goal is to create a navigational skeleton that someone can click around and understand the application's flow.
Select ONE design feature on your website (e.g., navigation, a check-out procedure, imagary, etc.) and implement an alternative to that design as a second website.
Make sure to deploy two separate URLs so that the difference between your two prototypes is explicit. Install Google Analytics on both versions.
Online evaluation (plan, A-B test, and summary of results). Develop an evaluation plan based on what the team wants to learn about the design.
The plan should include user tasks (e.g., what the user should do when they visit the site) and a method for obtaining feedback (e.g., online questionnaires, post-test interviews, etc.).
Outline how the user test will be run, write instructions for the users, and prepare all materials that will be used during the session.
For the A-B evaluation, choose a platform to recruit participants. Here are some options:
Mechanical Turk
Mob4Hire
Optimizely
The evaluation should include at least 20 users and run online on its own for about a week.
It's important to gather comparative feedback, therefore users should experience both versions.
After testing, take time as a team to reflect on the findings and produce a summary of results.
List the advantages and problems with each version and create a list of changes you will implement.
Students should include a link to both versions of the website and post all materials (photos of paper prototypes, website files, evaluation data and summary) on the team wiki.