Design Project 4: Lo-fi Prototyping

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

What do we do?

Let's start giving your design idea a digital life by creating a low-fidelity digital prototype. Rather than use HTML and Javascript, you'll first use a prototyping tool to implement the tasks and scenarios. Specifically, we recommend Marvel, InVision, or You can also choose any prototyping tool of your choice.

Functionlity does not need to be fully implemented. Please use hard-coded but realistic data, Wizard-of-Oz, and fake results, so that you can focus on the essential: the user's task, scenario, and UI components to support them rather than the underlying implementation. You need to build a prototype that supports end-to-end scenarios captured in your paper prototype. 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 your paper prototype. Alternatively, you may choose different tasks, especially if results from the paper prototyping testing suggest that the approach you're taking doesn't seem quite promising.

After building your digital prototype, find at least three participants to test it. Make sure they are not friends who know about your project already, or classmates. Preferably, try to find participants who are close to your target user group or persona.

NOTE: Since there won't be enough time for teams to work on DP4 after the midterm week, in the DP4 studio section, you're only asked to present the digital prototype, but not any evidence from user tests. 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. Based on what you've learned so far, you can revise your POV.
  • Tasks: List three core tasks you've decided to support in your prototype. Again, you can reuse or improve what you had in DP3.
  • Prototype:
    • Prototyping tool: Which tool did you choose? Why? What worked well with the tool? What didn't?
    • Design choices: What did you intentionally choose NOT to implement (e.g., fake or hard-coded data, manual algorithm, etc.), and why?
    • Representative screenshots: Include a few most important screenshots that showcase the uniqueness of your application.
    • Instructions: Your prototype needs to be accessible and executable by anyone with the link. Please include instructions for running your prototype in detail, if needed.
  • Observations: List at least 10 usability problems you discovered. Organize them by high-level task or theme, not by each participant or time. But mention which participant ran into the problem by referring to them as P1, P2, ... (e.g., search results did not show the price information (P1, P3)). For each problem, indicate how critical the problem is: high, medium, and low. Finally, show how you plan to address each of the problems in the later stage of your design process.
  • Paper vs Digital: Briefly report how digital prototyping differed from paper prototyping, in terms of (1) types of usability issues they helped identify, (2) participants' reaction and expectation to prototypes, and (3) summarize what changes you made in the digital prototype based on the feedback from your paper prototyping testing.


  • POV & Tasks (10%)
    • POV is clearly written?
    • Tasks align with the POV?
    • Three or more tasks?
    • Are the tasks distinct from each other?
    • Are the tasks described concretely and clearly?
    • User-level description not functionality description?
  • Prototype (30%)
    • Tool description and justfication are clear?
    • Design choices are justified?
    • Design choices mention what's not selected by the team?
    • 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 is accessible and executable?
    • Instructions for running the prototype are clear?
  • Observations (20%)
    • 10+ submitted?
    • Are the usability issues described concretely and clearly?
    • Organized by task and theme?
    • Level of criticality included?
    • Is the plan for improvements reasonable and sound?
  • Paper vs Digital (20%)
    • Types of usability issues are convincingly outlined?
    • Participants' reaction and expectation are presented with clarity and depth?
    • Summary of changes from paper to digital are presented with enough detail and clarity?
  • 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 present your main findings for 5 minutes, with 5 minutes for Q&A and feedback. 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.