CSE 440 - Introduction to HCI - Autumn 2024

Assignment 5: Digital Mockup

Due: Monday, December 2, 3:00pm

This assignment is a component of Milestone 5. Be sure you have reviewed that larger context for this assignment.

The goal of this milestone is to transition your paper prototype into a digital mockup of your design.

Create your digital mockup based on your final paper prototype. Do not begin working with digital prototyping until you finish revising your paper prototype. It is much easier to iterate on your design in the form of a paper prototype.

The digital mockup should effectively communicate your design in a manner appropriate for your poster and web post. This includes one or more overview images needed to provide high-level design context for key functionality as well as key frames that illustrate your design in walkthroughs for your two focus tasks. Because your focus is now on communicating your design, you may not need to mockup all elements that you prepared for testing with your paper prototype. However, be sure that a person can understand key steps in your task walkthrough.

Be sure to note decisions or changes you make as you transition from paper to a digital representation. Transitioning into digital prototyping will require you to consider other aspects of the design. This can include detail you may not have previously considered (e.g., visual design, layout, color, typography), but can also include constraints or mismatches introduced by the technology itself.

We have no preference regarding what digital tools you use to create your mockup. But the mockup must be digital (e.g., you may not use pictures of a hand-drawn sketch). Some tools support creation of interactive mockups (e.g., allow clicking active regions to move between screens). You are welcome to use such a tool, but interactive mockups are neither expected nor required.

Figma is a widely-used web-based collaborative tool:

Many other tools are available and can be used, varying in the extent to which they are general-purpose illustration tools or are more tailored to prevalent interface design patterns. Other tools include:

Present your digital mockup together with discussion of the decisions and changes you made:

  • Provide one or more overview images that give high-level design context for key functionality.

  • Provide key frames that illustrate your design in walkthroughs for your two focus tasks.

    Because your focus is now on communicating your design, you may not need to mockup all elements that you prepared for testing with your paper prototype. However, be sure a person can understand key steps in your task walkthrough.

  • Report 3 decisions or changes you made in developing the digital mockup.

    Decisions may be small or large. Describe each decision or change in a few sentences, including why the change was necessary or desired. Include images to be sure it is easy to understand the decision or change (e.g., an image of the relevant portion of your paper prototype and your digital mockup).

As you assemble this documentation of the iterative development of your design, you may find that some changes feel minor relative to the overhead of documenting those changes. Your goals in this documentation are to:

  • Show your work in the iterative design process, giving enough insight to understand your progress.
  • Capture a record of revisions to which you can return in communicating your design process.

You may choose to not fully document minor changes, but be sure to document enough for these two goals.

Submission

Due: Monday, December 2, 3:00pm

Within the Drive folder for course project files:

  • Identify the Slides deck corresponding to this assignment for your group. The deck provides a template for this assignment. Edit the deck in-place, so that you can easily share it in critique.

  • Prepare a Slides deck with the following structure:

    Overall digital mockup:

    • 1 slide: Design name and brief description of its key idea or approach.
    • 1 slide: One or more overview images that give high-level design context for key functionality.

    For each focus task (2 total):

    • 1 slide: Focus task title.
    • Multiple slides: Step-by-step task walkthrough with the digital mockup.

    Decisions or changes in digital prototyping (3 total):

    • 2 or 3 slides for each decision or change:
      • A description of the decision or change.
      • At least one image of the relevant portion of the paper prototype.
      • At least one image of the relevant portion of the digital mockup.

Reminders and requirements:

  • Submission via Canvas is also required, in support of grading.

    • Remove instruction slides and template markings from your deck before submission.

    • Export a PDF of your deck, via the menu: File -> Download -> PDF Document (.pdf).

  • This is a group submission. Ensure your section and names of all group participants are appropriately clear.

  • Review and follow guidance on Clarity and Presentation.

  • Names of participants should be replaced with pseudonyms in all documents. It is important to protect participant anonymity, even in the case that reporting seems harmless.

The Drive folder for course project files is here:

https://drive.google.com/drive/folders/1Sm12CpuMNsKBqk6E_Ri875hfFs0A-IRS?usp=drive_link

Submit via Canvas here:

https://canvas.uw.edu/courses/1746586/assignments/9795140

Completion Grading

This assignment will be graded on completion of the following components:

  1. Design Name & Summary

    Choose a short, creative, and marketable name that captures the key idea or approach in your design.

    Concisely and effectively convey the key idea or approach of your design.

  2. Overview of Digital Mockup

    One or more overview images that give high-level design context for key functionality.

  3. Focus Task Walkthroughs

    For each focus task, develop key frames that illustrate a step-by-step task walkthrough with your digital mockup. Include enough detail to be sure a person can understand key steps in your task walkthrough.

  4. Clarity and Presentation

Prior Samples

Samples are from prior offerings that had different requirements. Samples are also intended only to illustrate a variety of approaches, and were not selected to be ideal or exemplary. These may help to see how prior students approached elements of a project, but be sure to understand and consider requirements and feedback in your own work.