Goal:

The goal of this assignment is to learn how to build prototypes of user interface ideas using an interactive user interface builder. To achieve this, you will revise your interface design, and then use interactive tools to build a prototype of the design.

UI Redesign:

Using the results of your low-fi prototyping sessions, come up with a revised UI design and storyboard. Make sure the ideas will work for your tasks scenarios. (The scenarios used in the low-fi assignment should work for this, but if you need to adjust them, that's ok.)

You have only three weeks (plus spring break) to come up with this prototype, so you should focus on only showing what is essential and try to avoid writing code where it is not necessary. This short period should force you to make some hard choices. You will have the opportunity to tell us what you had to leave out and why.

Prototyping:

Use a prototyping tool (e.g., DreamWeaver+Cold Fusion or PHP, Director, PowerPoint, Excel, DENIM, Visual Basic) or a user interface builder (e.g., Flash, Visual Cafe for java, python/TK) to create a prototype of your application. Which tool you use depends on the characteristics of your system. If you use a limited-interaction tool like DENIM or PowerPoint, you will probably want to move to one with more capabilities for the second interactive prototype.

This prototype should allow us to run through the scenarios that you worked with in the last assignment (if you have some reason to want to change these, that's fine, but you should have at least three). The underlying functionality does not have to work fully; you may fake much of the output.

Your prototype must work in such a way that other people in the class can run it, either over the web or by downloading files or code and running it. If the setup is something more complicated than a web interface, be sure to make it easy for other people to run it, since other students will also have to be able to run your interface in order to do the heuristic evaluation. Include a web page that informs us how to run the application, and that has links to the scenarios.

Write-up:

This is a group assignment, so please work as a group.

Your write-up should be no more than four pages of text, plus figures, turned in on the web. If you received detailed feedback from the instructors, please be sure to indicate your responses to the suggestions within the writeup. The writeup should include:

• Revised Interface design
  • At least 3 representative scenarios based on earlier task analyses (you can make links to the descriptions from earlier assignments if they haven't changed, otherwise include the updated versions)
  • Differences as a result of low-fi testing (refer to screen shots)
  • Storyboards of the scenarios (annotated screen shots)
  • Sketches of screens you planned but did not have time to implement (if applicable)
• Prototype overview
  • Overview of the UI you actually implemented (reference figures from next section)
  • What was left out and why
  • Any "wizard of oz" techniques that are required to make it work (if applicable)
  • Tools you used
    • how the tools helped
    • how the tools did not help
    • problems with the tools
• Screen shots (as many as needed)
• Description of how to run the interface and the scenarios
  • Remember this will be used by people doing the heuristic evaluation of your interface
  • This description (along with the screen shots) falls outside the four page limit.
• Contributions by each team member

Project Quality:

When working on your project, think about the following questions.
• How good are the user interface ideas?
  • Are they novel and creative?
  • Are they appropriate for the supported tasks?

• How well does the new design:
  • Accommodate the original task analysis?
  • Incorporate the results of the low-fi prototyping study?
  • Incorporate general sound reasoning?

• How much functionality is achieved in the interface prootype?
  • Enough to illustrate the representative tasks?
  • Enough to give a flavor of the interface?
  • Appropriate amount given difficulty of interface ideas?

• Does the writeup:
  • Properly cover the required material?
  • Exhibit good writing?

• Is the class presentation:
  • Clear and informative?
  • Within the time constraints?

Class Presentation:

Each group will get 20 minutes to discuss their project, and 5 minutes for questions. Be sure to make a link to your presentation from your project page, to save on setup time. The talk should cover at least the following:
• Goals of the project
• Main scenarios and personas
• Current design, including how/why it differs from the low-fi prototypes
• Demo of the interactive prototype (optional for Tuesday presenters)
• Biggest lesson learned so far

Presentation Schedule:

Tuesday, April 4
• Geneboree
• MessageWiz
• iBuyRight

Thursday, April 6

• LightsOn
• UC Hipo
• UI Design Patterns

HE Exchanges:

MessageWiz <-> iBuyRight
UC Hipo <-> UI Design Patterns
LightsOn <-> Geneboree