Posted: Sunday, October 25
Design Critique: Tuesday, November 10
Report Deadline: Saturday, November 14
Point Total: This assignment is worth approximately 11% of your team project grade (5% overall).


Note that there are TWO due dates for this assignment: one for having your prototype ready to critique, and the other for submitting your report.


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 Tuesday, November 10, 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.

By end of day Saturday, November 14, you must post a link to your video report in Canvas.

In-Class Design Critiques

In round one, the groups will split the time by taking turns presenting their design and receiving feedback. We will then switch groups for Round 2, and repeat the process. The group being reviewed should take notes of the critiques, AND each individual critic MUST record their impressions and critique and turn that in as IA07: Project Critique.

Round 1

1
Odd Jobs
Safe on the Streets
DOTS Direct
2
Jog Art
Time Ain't Free

3
Food 4 Thought
Myst

4
Frugal
Naboi

5
Safe Arrival Texter
Get Me Lost

Round 2

1
Odd Jobs
Jog Art

2
Safe Arrival Texter
Frugal
Food 4 Thought
3
Safe on the Streets
Time Ain't Free

4
Myst
Naboi

5
Get Me Lost
DOTS Direct


Mid-Fidelity Prototypes

While lo-fidelity prototypes allow you to quickly, cheaply, and easily iterate through design ideas, they are limited in evaluating interaction (as you found with your user testing, it is a labor-intensive process, and sometimes difficult for test subjects to understand). 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.

Engelberg_AFrameworkForMidFidelity.png
Engelberg_AFrameworkForMidFidelity.png

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

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. Each person should do this, and submit their results as IA06: Prototype Tool Review. Figure out which one 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?) and for your team. As noted in lecture, I have been using Balsamiq, and Pallabi used Invision, so you can ask us questions about our experience with them. I have also used Microsoft PowerPoint. You can link any graphical entity (including text) and make them clickable (see Section 5 of Greenberg et al., 2011). And, you can easily designs (right click, and select "Duplicate Slide") to create different variations of a single design. I'll often make a number of different variations of a design and get feedback from my team and others I trust about my designs. In Balsamiq, you can make multiple variations of a screen (right-click on a mockup thumbnail or use the down-arrow menu to Create Alternate Version).

  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 10th, 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 single final design, which you will use (with planned improvements) for TA08 (hi-fidelity prototype).

  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 TA09 (Final Video) 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). 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 Report

Video Report (44 pts of the 50)

The video report will be a bit more than just the screen grab of your mid-fi prototype. The additional material can be a screen grab from a presentation, or video of one or all of your team members talking, or a voice-over of your mid-fi screen grab. It should include:
  • Introduction (10 points)
    • Briefly describe your problem domain, prototype application, and target users (evolved from earlier iterations).
    • Provide a high-level description of your three primary tasks. Justify why these tasks are important.
  • Mid-Fi Prototypes (24)
    • 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.

This does not need to be a long video. As always, being clear and concise is a virtue.

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

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? Why did you choose the one you did?
    • 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 voice-over as you record the screen (I know this works with Quicktime and Camtasia, assuming you have a microphone on you computer).
  • You can add in text captions, annotation marks, mix screen recordings with live video, 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.
  • If absolutely necessary, you can submit two movies--one a screen recording and the other live video--but you will need to do some movie editing for your final video, so best to figure that out now.

Submitting Your Report

Use Canvas to submit your video and text write-up.
  • Submit a link to your video on Youtube or other video streaming service, or upload a video file in a standard format.
  • Upload the short write-up as a PDF, or enter it directly into the Canvas text box.