15%: First design (low-fidelity prototypes + description/tutorial)

From the task examples and requirements (in the following Appendix), your team should sketch out several competing interfaces. Discuss and choose the most promising of these, and develop a low-fidelity prototype that demonstrates how the interface fulfills the requirements. Specifically, use the key users, their tasks, and the prioritized requirements as a type of requirements document to help you brainstorm prototypes that illustrate how your system would appear to the customer. You should be creating low-fidelity prototypes e.g., paper sketches, storyboards, cut-and-paste mockups. You should not be concentrating on prettiness or completeness; rather, you are trying to show the overall interaction style of your system. Each early prototype should contain the core screens that illustrate how the system will work as a whole, including (perhaps) a sample interaction based upon some of the key tasks. Hint: To get diversity, each group member may want to try to create a few rough sketches before gathering as a group. You should also realize that some people may be better at this than others; this is not supposed to be a competition.

Submission:

  • Add a link from your overall project page to this phase.
  • Take pictures of each of your rough paper prototypes and add these pictures to the wiki.
  • On the wiki, write a section describing your evaluation phase. Include a description of what you did and what you learned.
  • Include a written description/tutorial of the final physical paper prototype on the wiki page
  • Submit the original physical paper prototypes in class on the due date. Please put them in a plastic bag or some container so different group's prototypes don't get combined.


Appendix: Developing and Evaluating Initial Prototypes

Step 1. Developing low-fidelity prototypes

Use the key users, tasks, and system requirements generated previously as a type of requirements document to help you brainstorm prototypes that illustrate how your system would appear to the customer. You should be creating several (at least one per group member) low-fidelity prototypes e.g., paper sketches, storyboards, or physical mockups. You should also be thinking about what mental model the system will portray to its customers. You should not be concentrating on prettiness or completeness; rather, you are trying to show the overall representation and interaction style of your system. Each prototype should contain the core screens that illustrate how the system will work as a whole, including (perhaps) a sample interaction based upon some of the key tasks. You should use the ideas of "psychology of everyday things" and "beyond screen design" to help you, as well as your general knowledge of other systems (there is nothing wrong with copying ideas, but you may not copy exact interfaces).

  • Your low-fidelity prototypes must be hand-drawn. These should convey the visual design for your project and show the main screens (probably 2-8 screens for each design), with text labels, buttons, graphics, etc. An easy way to do this and explain the system is to write an introductory tutorial, which largely shows the main screens and explains what is happening in each one as the user carries out a common task sequence (such as logging in, doing a search, seeing the search results, and sending it to someone).
  • Transition diagrams can give a good overview, be sure to provide at least one.

Hints. To get diversity, each of you may want to try to create a few rough sketches before gathering as a group. You should also realize that some people may be better at this than others; this is not supposed to be a competition!

Step 2. Evaluate the prototypes

Your next step is to evaluate the prototypes.
  • Discuss each prototype to see whether it is a possibility in principle (e.g., are there obvious problems with the conceptual model? Is it implementable?)
  • Do a task-centered system walkthrough for each of your key tasks, and each of your user types.
  • From the ones that are left, elicit informal reactions and further discussion from customers / counter people / appraisers. You may find that your end-users will tell you about further tasks and task details that were not thought about before.

Step 3. Reconsider priorities, and make a decision

Based on the prototype and evaluation exercise, you may wish to reconsider what customers you will address as well as what tasks and requirements you will support. It could be that you were wildly optimistic about what you could do! At this point, you should have a reasonable idea of which prototype styles are worth pursuing, or whether you should start again. Make your decision on what direction(s) to follow. If you have more than one direction, you may want to continue developing both a bit further. If you have no worthy candidates, return to step 2.

Hint. Don't feel committed to any prototype. This is the time where prototypes are quick to generate and cheap to discard. Use this time to explore the design space. While you may want to just get on with it, a bad design choice now can have disastrous and expensive repercussions later.

Step 4. Refinement

Refine your prototype by considering the nuances of each task, the functions that must be incorporated, and the expected reaction of each user. You may want to start considering the more subtle aspects of interface design at this point (e.g., psychology of everyday things, principles of graphical screen design, design principles).You will turn in the original paper refined and finalized paper prototype.