CS374: Intro to HCI

Design Project 4: High-fidelity Prototyping

Studio: 6/9 (Tue), slides by 5pm
Final Write-up: 11:59pm on 6/10 (Wed)
7% toward your total grade
Submission Link

What do we do?

Now's the time for a fully 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.

Here's useful information regarding technical implementation of your prototype.
  • Everyone in your team should make UI-level contributions.
  • No dedicated server / DB / backend coder in the team.
  • Scope: web-based GUI for desktop / mobile.
  • No server, no native app, no custom database. Firebase is allowed.
  • If you absolutely need custom server-side, talk to us.
  • Git is a requirement: GitHub, BitBucket, etc.
  • Code won’t be graded directly, but we will look for equal contributions.
  • Peer evaluation at the end of semester on DP.

Hosting your prototype on the web

Your prototype should be hosted on a web server, and should be accessible by a URL you provide. Here are some options for uploading your prototype on the web: NOTE: You can keep improving your prototype after the studio and report deadline. Your score for this milestone will be based on the report and the UI available at the time of grading. We will notify a time period when grading will happen. In the next DP, you will show your interface to target users and get feedback. You can reflect their feedback into your interface and keep iterating until the final presentation.

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., test user's ID/password, 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, where main feature implementations are, etc. Several lines are enough.
    • Libraries and frameworks: List any external dependencies you used for your implementation (e.g., React, Bootstrap, Semantic UI, etc.).
    • 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 of 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 this milestone.
  • Studio Reflections: Summarize the feedback from the studio session, and mention how you addressed it or will address it later in the process.

Grading

  • 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?
    • 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?

Deliverables

Studio Presentation: In studio, your team will show a live demo of your prototype for 7 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 Tuesday. 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). Name the file with your team name, and submit it by visiting this link. You can submit multiple times until the deadline, and we'll use the most recent version for grading.