Design Project 6: Hi-fi Prototyping

Studio: 5/22 (Mon), slides by 5pm
Final Write-up: 11:59pm on 5/25 (Thu)
6% toward your total grade

What do we do?

Now's the time for a funlly functional and interactive prototype that is ready to be tested by your target users. You need to build a prototype that supports end-to-end scenarios captured in your earlier prototypes. Your prototype needs to support at least three distinct tasks. This does not mean you need to build three separate prototypes, but rather this means you need to build one complete prototype that is flexible enough to support the three tasks. You may choose to reuse or revise the tasks and the UI you created in earlier stages.

In addition, your prototype implementation and design should reflect the good practices covered in class, in terms of UI software architecture, output, input, visual design, layout, color, and typography. Optionally accessibility and internationalization can be considered if applicable to your target users.

NOTE: In the DP6 studio section, you're only asked to present the prototype and what each of the members did, but not to report detailed implementation notes. You'll get a chance to test other teams' prototypes and offer feedback in studio.

Your Report

Your report should include:

  • POV: Re-state the POV of your project.
  • Target users: In one sentence, say who your target users are.
  • Tasks: List three core tasks your prototype supports.
  • Implementation Notes:
    • URL of your prototype: A live version of the prototype for evalation. Note: the URL must work at least until your assignment is graded. If it doesn't work, you'll be penalized. If there are specific requirements (e.g., browser or device settings), include them as well.
    • URL of your Git repository: Make sure to add a README file that briefly describes the code, e.g., main JavaScript file, or where main feature implementations are, etc. Several lines are enough.
    • Libraries and frameworks: List any external dependencies you used for your implementation (e.g., Bootstrap, Semantic UI, etc.).
    • Lessons from heuristic evaluation: List at least three usability issues found by your classmates, and discuss how your prototype addressed them in the current design.
    • Representative screenshots: Include a few most important screenshots that showcase the uniqueness of your application.
  • Individual Reflections: Each member should write this part on their own, reflecting on their own experience. Merge all members' mini-reports in the final report. Answer the following questions:
    • Which part the UI did you directly contribute to?
    • What were some of the difficulties you faced?
    • List one useful implementation skill you learned while working on DP5 and DP6.
  • Studio Reflections: Summarize the feedback from the studio session, and mention how you addressed it or will address it later in the process.


  • POV, Target Users, & Tasks (15%)
    • POV is clearly written?
    • Targer users are clearly presented with enough concreteness?
    • Tasks align with the POV?
    • Tasks reflect target users's needs?
    • Three or more tasks?
    • Are the tasks distinct from each other?
    • Are the tasks described concretely and clearly?
    • User-level description not functionality description?
  • Implementation Notes (50%)
    • Prototype URL is accessible and works properly?
    • Repository URL is accessible and contains README?
    • Libraries and frameworks used are listed?
    • Issues found from heusric evaluation: three or more?
    • Issues found from heusric evaluation: carefully addressed?
    • Screenshots are added?
    • Screenshots capture representative moments of the prototype?
    • The prototype captures the three tasks?
    • The prototype is complete in that it supports an end-to-end scenario?
    • The prototype follows good practices in visual design, layout, color, etc.?
  • Individual Reflections (15%) -- graded individually
    • Individual contribution clearly specified?
    • Difficulty discussion has enough depth and insight?
    • Non-trivial implementation skill added?
  • Studio Reflections (10%)
    • Is feedback well summarized?
    • Is feedback addressed, or is the plan for addressing feedback concrete?
  • Studio Presentation (10%)
    • Preparation and organization?
    • Articulation and clear delivery?
    • Effective use of visual aids?
    • Time management?


Studio Presentation: In studio, your team will show a live demo of your prototype for 5 minutes, with 5 minutes for Q&A and feedback. In case your prototype fails to work during studio, we suggest adding representative screenshots to slides as a backup. You need to prepare a Google Slides presentation, by adding your slides to the link your TA will send you. The slides should be sent to your TA by 5pm on Monday. Every team member needs to participate in the presentation. Write down the questions and feedback you receive during your presentation, and reflect on them in your report.

Team Report: One report per team. Your report should be submitted as a zip file. The main report should be written in Markdown (please use the .md extension). We're going to publish your reports on the course website. Submit your team's report on KLMS.