Mid-Fi Prototypes and Design Critiques

Design Critique Deadline: Thursday, November 14 (before classtime)
Final Deadline: Tuesday, November 19 (before classtime)

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 (TA08).

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 14, 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 Tuesday, November 19, you must post a PDF of your report to your Wiki project page (before classtime).

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 Piazza 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 (from consistency and coherency to responsiveness and feedback). Just like we did in Lecture 19 [PDF, PPTX], 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 (see Remixing lecture, lecture 18 [PDF, PPTX]). 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 14th, 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. You will 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 write up the report. See below.

The Report (128 pts)

At the top of the report, please include a title (centered and bold) followed by the names of each team member. For each person listed, include 1-2 sentences on their primary role/accomplishments on this assignment.

At the top of the report, please include a title (centered and bold) followed by the names of each team member. For each person listed, include 1-2 sentences on their primary role/accomplishments on this assignment. Submit a report of no more than 5 pages of text (approximately 2,500-3,500 words in a font similar to a 11 pt. Times). Images, tables, figures, etc. are strongly encouraged, do not count against the page limit, and are thus effectively free.

Please use the following full section headers (style Headings 1) in your report; it makes it easier for us to grade. So, for example, you should literally have headings with Section 1: Abstract and Section 2: Task Descriptions in your report.

Section 1: Abstract (12 pts)

The abstract should provide a 6-8 sentence overview of your report including: (i) a description of your application, (ii) a description of your three primary tasks, (iii) a high-level description of the two mid-fidelity prototypes and how they differ, (iv) a description of your evaluation method, (v) a summary of your primary findings, (vi) plans for future revisions of application based on said findings.

For grading, you will receive up to:
  • 2 pts for each of the above points (2 x 6 = 12 pts total)
  • -------
  • 12 pts total

Section 2: Task Descriptions (20 pts)

Describe your three primary tasks (iterate from previous incarnations). This should be a four paragraph section. The intro paragraph summarizes the three tasks. Each subsequent paragraph should start with a bolded name of the task and a more lengthy description. If the tasks changed from the previous assignment, please describe these changes and why they were made (e.g., was it based on your own design reflections, was it based on the experiences of storyboarding, was it based on feedback from in-class critiques, etc.).

For grading, you will receive up to:
  • 5 pts for your introductory content
  • 5 pts per task description (15 points total)
  • ---------
  • 20 pts total

Section 3: The Mid-Fidelity Prototypes (45 pts)

The introductory paragraph to this section should introduce the two mid-fidelity prototype designs and, at a high-level, the primary similarities and differences between each. Why are they different? Then, there should be two sub-sections (one sub-section for each mid-fidelity design). Name the sub-sections Mid-Fidelity Prototype Design #1: <name> and Mid-Fidelity Prototype Design #2: <name>. In each of these sub-sections, describe the mid-fidelity prototype for the three primary tasks. Again, make it easy for your readers to understand the most important points and, in particular, how you made different design choices with each design. You should include as many inline figures as is appropriate to help describe your prototype but not so many that it makes your report difficult to read. If the mid-fidelity prototypes can be accessed online, please include a link. Finally, tools like FluidUI allow you to zoom out and take a screenshot of the "flow diagram" (see below). Please include this in the appendix (if applicable).

external image 7705073436_94bc341e5b_o.jpg

For grading, you will receive up to:
  • 5 pts for introductory content
  • 20 pts for each mid-fidelity prototype and description (2 x 20 = 40 pts)
  • -------
  • 45 pts total

Section 4: Running the Design Critique (10 pts)

Describe how you ran the design critique in class. Who were you paired up with? How was this design critique different than the one for the sketches/storyboards? Did you run your own internal design critique (within the team) before the external one in class?

Section 5: Results from the Design Critique (10 pts)

Describe your primary findings from the design critique. What was most surprising? What were some of the more useful pieces of feedback? Do you think you gained more value from this design critique session than the last one (for TA04)? Why?

Section 6: Implications for Design (10 pts)

Synthesize some key directions for future work based on your design critique results. Focus on changes you plan to implement for TA08 - The Final Interactive Prototype.

Section 7: Learnings from this Project Assignment (16 pts)

I would like you to address the following points (each bullet is worth 4 pts):
  • 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?

Section 8: Appendix (10 pts)

The appendix should include:
  • Notes from the in-class design critiques (and, perhaps, other critiques sessions that your team may have run on its own).
  • Screen flow diagrams of your two prototypes for the three primary tasks. Make sure these are appropriately labeled with figure captions so we can understand what is what.