In the first part of most class sessions we will dive into the topic with a hands-on exercise.

top E1: Paper Prototype — Coffee Ordering

IMGP5599Your job here is to (very quickly) design a tablet app that can be used to (very quickly) place an order at the MHCI+D Studio Cafe. Then you will (very quickly) construct a paper prototype that can be used to (very quickly) test your design. Next you will find someone who wants to (very quickly) place a coffee order with the Studio Cafe barista and you will (very quickly) run a small user test with him or her to (very quickly) evaluate your design.

Probably to do all of this (very quickly), you will want to be (very quickly) drinking a lot of coffee. More importantly, though, you’ll work in teams of 3. I had Canvas (very quickly) make up 10 teams at random for you.

Your app should do the following:

  • Allow the following drinks to be chosen (all the rest are completely ridiculous):
    1. Espresso ($1.50)
    2. Macchiato ($1.75)
    3. Cappuccino ($2.00)
  • Allow (although this pains me greatly) the following sizes:
    1. Normale (base price)
    2. Grande (add $1.00)
    3. Gigante (add $5.00, this should be vietato)
  • Do not, under any circumstances, allow heinous substances like caramel or white chocolate (what is that, anyway?) to be added to a perfectly good coffee. Issue a severe admonishment in that case, clear the current order, and force the user to start over. Mamma mia!
  • Allow multiple drinks to be ordered with a single submission.
  • Request a confirmation of each drink before adding it to the current order. (If you have time, you can allow modifying a drink order.)
  • Calculate and display the total amount of each drink and of the total order.
  • Issue a confirmation of the total order before finally sending it to the barista.

Once you have the app’s UI sketched out, build a paper prototype to mock it up. Use whatever supplies you can find to do this and DON’T worry about making beautiful design elements. The purpose of this exercise is to test out the functionality without worrying at all about the visuals. You might want to quickly skim chapter 6 of the Warfel book for some ideas. Or just wing it.

Now for the fun — try out your design. Have one person pretend to be the customer and order some drinks, while the other two people operate the app in response to his/her taps by shuffling pieces of the UI on and off the tablet. You will learn a lot, I bet!

For a final bit of fun, we’ll have a little app smackdown among teams and see whose prototype can (very quickly) place an order correctly.

top E2: Model Prototype — ecoATM Kiosk

top E4: Behavioral Prototype — Win SPECS

The purpose of this exercise is to give you an introduction to the use of behavioral prototyping in the practice of UX research and design. You will work in small teams to analyze a design problem and develop a plan for creating and testing a variety of design solutions for this problem.


You have recently been hired as a user experience designer for a new product: Windows 8 SPECS: Super Perspective Environmental Context Sight. Think Microsoft’s answer to Google Glass.


The product is planned to launch with an augmented reality (AR) feature for indoor “wayfinding” inside large buildings and on company or educational campuses. The feature is meant to augment or replace traditional internal signage and assist people in finding their way inside buildings they are unfamiliar with.

You recently were in a meeting where an engineering team presented their design concept and you immediately understood it was not designed with the end user or basic cognitive human factors in mind, and likely to be unsuccessful. You asked management for the opportunity to demonstrate why the proposal would not work and propose some alternative design concepts.

Due to resource limitations and other business issues, you’ve been given a very short time to prepare “evidence” that the design is problematic and to propose a convincing alternate direction. You have two colleagues to work with (fellow UX generalists) and only a few hours. You are limited to whatever tools you have in your office or can quickly pull together in an afternoon (camera, basic prototyping supplies, office supplies, your laptop, whiteboards).


Your mission is to quickly identify and prototype a couple of alternative interaction models and gain some credible evidence as to why they are an improvement on or a better approach than what the engineering product team has proposed.

Your in-class activity is to map out how you will define and build a behavioral prototype that will allow you to explore and evaluate a few variations of some basic design concepts. Consider how information or content is presented to the user, using elements such as transparency, real estate, contrast, or layout and complexity of information.

You have a team of 3 people and in 2 hours will need to present a plan that will detail:

  • What tools or materials you will use
  • A basic diagram or other demonstration of how your prototype will work
  • An explanation of how you will operate the prototype during an end user evaluation
  • Your assumed scenario, content and context

You do not have to actually build and operate this prototype in this short time frame. But if you have time, go crazy!


This prototype planning exercise is not focused on creating finished UI designs, but rather a quick, low to medium fidelity exploration of interaction concepts and enough of a creation of the experience to elicit real contextual feedback on the appropriateness of the UI concept. It does not need to be 100% scale.

It should address the following requirements:

  • Allow user to prompt the device either through touch or voice command to provide visual information that augments the users field of vision with real-time, contextual information about the space they are navigating.
  • Allow the design and evaluation team to make real time modifications to the experience and get feedback on those variations
  • Provide reasonable “suspension of disbelief,” the ability for the user to respond as though there was a real digital interaction