Mid-Fi Prototypes & Design Critiques

Posted: Tuesday, October 28
Design Critique: Thursday, November 6
Final Deadline: Thursday, November 13 (before classtime)
Point Total: This assignment is worth approximately 11% of your project grade (4.5% overall).

Assignment Overview

There are two primary goals to this assignment:
  • first, to incorporate changes/improvements to your two designs based on the results of paper prototype user testing in TA05 and to translate these paper designs into higher fidelity, interactive representations using an interactive prototyping tool of your choice (see below);

  • second, to receive feedback during our second in-class design critique session and to decide upon a final design direction for your high fidelity prototypes (TA07).

To be clear, you are still working with your two separate designs. You will implement both as mid-fidelity prototypes and use design critiques to help select the most promising design.

A Brief Timeline
On Thursday, November 6, you must come to class with working mid-fidelity prototypes of your two designs. As before, we will use class time to conduct student-lead critiques of your designs.

On Thursday, November 13, you must post a link to your video report in Canvas.

In-Class Design Critiques

We will start with the following design critique groups and potentially rotate if there is time.

Round 1

EduMusic: Music learning in the palm of your hand
BlobPS: Giving gamers a reason to go out
Quadcopter Route Navigation
PaintDrip: A Mobile app for the creation and sharing of movement based artwork
Trailing Away: A custom catrography app

Find Me If You Can: Not your average child's playground game
Pandemize: Infect the world with your phone

uTracky: A context-aware application launcher
GPS One Button Coffee: Coffee how you want it, when you want it

Resolving Campus Issues Through Mobile Reporting
TerpsTrade: Making buying and selling easier for Terps

Round 2 (if time)

EduMusic: Music learning in the palm of your hand
BlobPS: Giving gamers a reason to go out
Quadcopter Route Navigation
PaintDrip: A Mobile app for the creation and sharing of movement based artwork
Pandemize: Infect the world with your phone

Find Me If You Can: Not your average child's playground game
Trailing Away: A custom catrography app

uTracky: A context-aware application launcher
TerpsTrade: Making buying and selling easier for Terps

Resolving Campus Issues Through Mobile Reporting
GPS One Button Coffee: Coffee how you want it, when you want it

Mid-Fidelity Prototypes

While lo-fidelity prototypes allow you to quickly, cheaply, and easily iterate through design ideas, they are limited in evaluating interaction. Paper-prototyping and user evaluation provides a nice bridge to an interactive system, but is still, fundamentally, a different medium than the one (a computer/tablet/mobile) that you will ultimately use in your designs and the interaction is not the same (as its mediated by a human and sticky notes). Mid-fidelity prototyping is a step towards a higher fidelity representation--and one that is interactive and embodied on your app's primary device platform--so it allows you to investigate different aspects of your design. In particular, interaction, navigation, functionality and a different manifestation of content, layout, and perhaps even some graphic design choices. Engelberg and Seffah (2002) provide the following high-level comparison in table form across different levels of prototype fidelity.


For more on the benefits of mid-fidelity prototypes, see Introduction to Medium-Fidelity Prototypes or refer to the Prototype readings.

Interactive Prototyping Tools

In this TA, you and your team members can choose your own mid-fidelity prototyping tool to complete the assignment. Here's a list to help you get started (if you find another promising prototyping tool, please post to Canvas and share it with others):

Some lists of (other) prototyping tools:

What to Do
  1. To start, experiment with some of the above tools. Figure out which one you like best and seems to be the best fit for your app (e.g., if you're working on a mobile app, does the prototyping tool support mobile widgets and form factors?). As noted in lecture, I often use Microsoft PowerPoint for my mid-fidelity mockups. You can link any graphical entity (including text) and make them clickable (see Section 5 of Greenberg et al., 2011). In addition, I like how easily you can duplicate designs (right click, and select "Duplicate Slide") to create different variations of a single design. I'll often make 10, 20 or even more different variations of a design and get feedback from my team and others I trust about my designs.

  2. Once you settle in on a tool, begin by elaborating on design ideas and creating design variations based on the results from TA05. As with any stage in the prototyping process, free yourself to elaborate and experiment before narrowing in on the two specific manifestations that you want to use for the design critique sessions in class. This elaboration process also allows you to play and experiment with the prototyping tool, which may inspire new directions/ideas about your interface.

  3. Mid-fidelity tools allow you to focus in on information architecture and navigation. That is, how does your interface fit together. How are the primary tasks supported? If you don't nail this aspect, your app will likely fail. The value proposition of your app has to be clear: it should offer clear, simple, useful value. Use the interactivity support in the mid-fidelity tools to really experiment with navigation, functionality, feedback, and responsiveness.

  4. Integrating design principles into your design. As you move upwards in fidelity, begin to think about typography, layout, colors, and the other IxD principles we've gone over in class and will go over (from consistency and coherency to responsiveness and feedback). I want you and your team to come up with three to five guiding design objectives/themes/principles for your app. How does your app embody these objectives?

  5. Now, prepare two different mid-fidelity prototype designs for the three primary tasks. This is just like TA05 but rather than using paper and lo-fidelity prototypes, you are using interactive prototyping tool to create a mid-fidelity prototype. The two designs should be largely based on your results from TA05; however, feel free to integrate new ideas (if you've been struck by a new design epiphany) or to remix in aspects from other designs that you think would be a good fit. The two designs should have their own design aesthetic, functional rendering, and "personality" that implement the three primary tasks of your app differently.

  6. Then, on Nov 6th, you must come prepared for in-class design critiques with your two mid-fidelity prototypes. You will take notes on this feedback (please include the raw notes in your Appendix), synthesize the most important findings in your report, and use the critique to help choose a final design with planned improvements. For TA08 (hi-fidelity prototype), you will implement only the most promising design (or design aspects) based on TA05 & TA06.

  7. You should screen record (i.e., video record) both of your mid-fidelity prototype designs. Rather than submitting a written report, you will submit these recordings as your gradeable artifact. You will also use these recordings in TA10 to show your mid-fidelity interfaces and to illustrate how your design progressed throughout the semester. If you're on a Mac, you can screen record using Quicktime (see here and here). If you are on Windows, there is simply no better tool than TechSmith's Camtasia Studio (you can use the free trial for this class). I have tried many alternatives to screen recording software but I always come back to Camtasia Studio, it is the most feature rich and "just works" (OK, advertisement over). Finally, if you developed a mobile interface, you can try screen recording (I've never done that, so I'm not as familiar with the tools) or you can simply setup a physical video camera to record a hand using the screen and interacting with your app.

  8. Finally, you need to submit the video report along with a brief text write-up. See below.

The Video Report (46 pts)

The video report should include:
  • Introduction (10 points)
    • A brief description of your problem domain, your prototype application, target users
    • Provide a high-level description of your three primary tasks. Justify why these tasks are important

  • Mid-Fi Prototypes (20)
    • Introduce and compare/contrast the two mid-fi prototypes
    • Describe how these mid-fi prototypes differ from the paper prototypes and why they differ (justify the changes)
    • Describe (and/or show) how the prototypes were made and the tool that was used
    • Walk through the three primary tasks with each prototype. Make sure that the viewer can see your interfaces! As an HCI course, this is critically important!
    • Discuss advantages/disadvantages of the two different prototype designs

  • Design Critiques (10)
    • Explain the design critique session and process at a high-level
    • Describe primary takeaways from the design critique and implications for design
    • Describe plans for future work/revisions

Small Text Write-up (6 pts of the 46)

In addition to the video link in Canvas, I would like a small, one-page maximum write-up that includes:
  • Primary Work Roles (1 point)
    • List each person on your team and include 1-2 sentences on their primary role/accomplishments on this assignment.
  • Reflecting on this Assignment (5 points)
    • What prototyping tools did you experiment with before selecting the tool you used for this assignment? What factors impacted your decision?
    • What are some of the advantages/disadvantages of using the tool that you selected? What were the primary limitations that you struggled with?
    • In your collective opinions, what value does mid-fidelity prototyping seem to have over paper-prototyping? Do you think you could have started with mid-fidelity prototyping rather than paper? Would this have affected your designs?
    • What would you do differently if you had to do this assignment again?

Producing the Video Report

  • You can add in text captions, annotation marks, etc. via most movie editing software including TechSmith's Camtasia Studio, Apple's iMovie, and Windows Movie
  • You can export slides from PowerPoint as a movie. Camtasia Studio also supports recording PowerPoint with vocal narration.