• Apply methods of scenario-based design;
• Develop and refine activity design based on requirements analysis;
• Practice detailed design skills through information and interaction design;
• Continue to develop and refine skills for working in a group.

Overview: During this phase you will design and prototype a Web-based interactive tool that will meet the needs of your client. This process will include the exploration of metaphors and technologies as an aid in generating activity, information, and interaction design ideas.

What to do:

2. Develop a Web-based tool/environment for your client: You can use examples of spaces in MOOsburg, such as the Virtual Science Fair, or your own ideas for developing a design. This should include a distinctive and appropriate background, and may also include instances of existing tools. Provide evocative labels for any objects you create. Be sure to give your customer representative a chance to look at this design.

3. Discuss and summarize relevant metaphors and information technologies: We have talked about using metaphors and technology to think about possibilities for system functionality as well as the system's user interface. You should explore ideas at all three levels -- activity, information and interaction. Choose a metaphor that can help you think about these three aspects of design; it may be the same metaphor used in different ways or different metaphors for each aspect. At the same time, choose 1-2 information technologies that suggest ideas for activity, information, and interaction design. Discuss what the metaphors or technologies suggest for your design problem.

4. Develop four design scenarios: Use the techniques demonstrated in the virtual science fair case case study. Begin with one of your problem scenarios and its claims, then use your design ideas to transform it into a user interaction scenario for your online tool. You do not need to include all of the user interaction details in the scenario (e.g., exactly what a button looks like or how an action takes place), but there should be enough detail that the claims you analyze for each scenario make sense. This means that if there is a specific user interface feature that leads to a claim, the relevant use/experience should be included in the narrative. 

Analyze 1-2 claims analyzed for each scenario. These claims can address features of the activity design, information design, or interaction design. As before, indicate with underline, font color, or other text formatting the piece of the narrative that gives rise to each claim. Each claim included should have at least one positive consequence and one negative. 

5. Build a scenario machine: Build a prototype of the information displays and user interactions needed for the scenario actors to step through each of the four scenarios. Be sure to cover all the functionality described in each scenario. You should also design help or error screen for cases when a user activates an inappropriate control (These screens can be generic, for example an error message stating that "This function is not available in this limited version of the online store"). Take screen shots of key points in each scenario for inclusion in the project report (see below).

Your prototype will be evaluated by stepping through your scenario scripts. It must also be functional enough to enable user testing in the third and final group project phase. Build the your scenario machine in HTML (extended with Javascript, etc.), so that it can be opened through a URL, or make other arrangements and plans so that you are able to deliver a demoable prototype to the GTA.

You do not need to build an actual Web application with input, output, database, etc., though you are welcome to do this if you choose. The requirement is simply that the GTA and other test users can go through your scenarios step by step. I.e., if they take the expected action, they will see get the appropriate feedback and other visual displays in response.

6. Write demonstration scripts: For each of the four scenarios, write a numbered list of steps that the GTA should follow to do a usability walkthrough of your prototype. These steps must be complete, i.e., including any input that needs to be typed, links selected, buttons pressed, etc. Each list should begin with a clear indication of the starting state, e.g., if any re-setting or additional navigation is needed to initialize the scenario. The GTA will have read your design scenario before trying the prototype, but she should not need to make inferences or fill in holes when figuring out what to do.

Include any special instructions that the GTA needs for using the prototype.  You may schedule a mutually convenient time to walkthrough the demonstration scripts with the GTA.

7. Prepare your design report: The design reports should have the following labeled sections. Number all pages that follow the Table of Contents, and use tabs or other separators to organize your report so that it is easy to review:

1. Cover Sheet: label the phase as "User Interface Design", and include group number, team member names and student numbers, and due date
2. Table of Contents: list page numbers for each required element
3. Overview: a 1-2 page introduction to this phase, introducing your online tool, summarizing the design work that you did, its current status, and any open issues that have not yet been addressed.
4. Metaphor and Technology Exploration: two separate tables, one that documents the metaphor(s) used to explore activity, information, and interaction design, and a second that documents the information technology exploration. The Tables in Chapters 3-5 can be used as models for this.
5. Design Scenarios, Claims, and Screenshots: the scenarios and associated claims, interleaved as before. For each scenario, reproduce the original problem scenario (even if the changes are dramatic), and then show the design scenario and claims. This will emphasize how the activities and interactions were transformed through design. Also for each scenario, include screenshots that provide concrete details about how each scenario works/looks.
6. Demonstration Scripts: the numbered lists of steps developed to guide the usability walkthrough.
7. Bibliography: cite sources you used in developing your design. Note that this is particularly critical to do if during your technology exploration you have adopted ideas from other online shopping applications or Web sites.

Grading: The project will be evaluated for overall completeness, as well as the quality of each component. Part of the project grade will be based on a usability inspection of your prototype. We will use this form to grade the project.