20%: Phase #4: High-fidelity Prototype

This is the initial coding phase of the project. Based on all of the work you have done so far, you need to create a functioning system that implements your design. You are free (and encouraged) to modify your design based on what you have learned so far. The primary goal of this prototype is to enable you to perform a user test (which is the following phase). So, the way to think about how much of this prototype that you must build is to think about the parts that will be needed to perform the usability test. Build those needed parts for this prototype. Thus, you should look ahead at the user study requirements to inform your thinking about this prototype. In general, the prototype does not have to be finished (you will have one more chance for completing the application). But all of the elements that you want to study need to either be finished, or have hooks for "wizard of oz" scenarios.

You are encouraged (but not required) to use the "tuple" service that was introduced in the Javascript homework assignment to store information for your project. You do not need to worry about security for this project, but you will need to have some mechanism for users to log in to distinguish between different users and their activities.

There is a new tool available for your use called App Sketcher. This is a multi-platform client application which (like Balsamiq) lets you design interfaces. But unlike Balsamiq, App Sketcher generates HTML & CSS (with jQuery UI objects) which you can then edit and use in your actual application. You can download App Sketcher form their site directly. We will email each registered student a license file that you can use for the duration of the semester. Note that you are welcome, but not required to use App Sketcher.


  • Add a link from your overall project page to this phase.
  • Write a short (<1 page) description of what you have done, and what remains to be done for the final project submission.
  • Include a link to the live functioning prototype.

Grading Criteria:

  • Description clear and complete
  • Prototype works without errors, and missing elements are clearly indicated
  • High quality design (meets design guidelines discussed throughout semester)