Project 3

From Interaction Design: Beyond Human-Computer Interaction, 4th ed:

A prototype is one manifestation of a design that allows stakeholders to interact with it and to explore its suitability; it is limited in that a prototype will usually emphasize one set of product characteristics and de-emphasize others. When you hear the term prototype, you may imagine something like a scale model of a building or a bridge, or maybe a piece of software that crashes every few minutes. But a prototype can also be a paper-based outline of a screen or set of screens, an electronic picture, a video simulation of a task, or a three-dimensional paper and cardboard mockup of a whole workstation.
Prototypes answer questions and support designers in choosing between alternatives. Hence, they serve a variety of purposes: for example, to test out the technical feasibility of an idea, to clarify some vague requirements, to do some user testing and evaluation, or to check that a certain design direction is compatible with the rest of the product development.
Prototypes involve compromises. Two common compromises that often must be traded against each other are breadth of functionality provided versus depth. These two kinds of prototyping are called horizontal prototyping (providing a wide range of functions but with little detail) and vertical prototyping (providing a lot of detail for only a few functions).

The project will focus on a vertical prototype of a specific interaction of a new system.

Learning Objectives

Through the application of reading materials and completion of this project in light of its corresponding rubric:

1. Students will be introduced to lo-fidelity prototyping
   1. Describe the value of lo-fidelity prototyping
   2. Explain the difference between lo-fidelity and rapid digital prototyping
2. Students will develop a lo-fidelity paper prototype
   1. Test the prototype with a user of their choice
   2. Evaluate their prototype based on user feedback
   3. Reflect on the feedback to improve the prototype

Tasks

1. Research
   1. Complete all the materials listed as “Consumables” in this module.
   2. Watch: Rapid Prototyping: Sketching
2. Design
   1. Decide on an interface metaphor for the interaction (reference: 12.3.1 – Interface Metaphors for information).
   2. Decide on an interaction type (see 12.3.1, p. 402).
   3. Complete and included the conceptual model a couple pages down that covers everything in your interface.
   4. Create lo-fidelity prototype to represent the interaction using paper and pencil (black and white only)
   5. Photograph each stage of the prototype, numbering them clearly (the numbering system is up to you). Include in your submission a list of these numbers and the description/purpose of the relevant screen/action/etc. (This is to help you stay organized just as much as to help your instructor understand your process.)
   6. Explain the situation (ie, this project) to a friend/relative/classmate. Have them go through your paper prototype interface and talk about their experience as they’re “using” it. Try not to tell them what to do, only nudge them if they get stuck. Write up your thoughts, reactions, feelings, realizations, etc., in a one page (250-350 word, double spaced, APA format) paper. You’re to reflect on how you felt and reacted during their “test.”
   7. Create and submit a PDF that includes the interface metaphor description, interaction type description, the completed conceptual model, the images and descriptions of the prototype, and the narrative of your reaction to your tester’s experience. The PDF should be titled as: 401-Project3-YourLastname.pdf

Persona

Rick, late 60s, widower with one child and two grandchildren.

Rick plays a very active role in the life of his grandchildren, but particularly in that of his grandson, Morty, often acting as his guardian while Morty’s parents are both working. Rick wanted to treat Morty today so he took him out of school for lunch.

Though they have time for lunch, Rick is a busy person, and also needs to run a few errands and do some work back in his lab garage. The reason he is interested in the newly opened Burger Express is in hopes of running into its owner, whom Rick has heard much about. Though Morty doesn’t like hamburgers (and Rick knows this), he is hopefully they will find menu items everyone enjoys.

Rick has a low tolerance for ambiguity and is in a hurry. He uses technology every day—-including being familiar with the hardware being utilized by Burger Express-—and can be critical of poorly designed technology and interfaces.

The Scenario

Rick is a first-time customer to Burger Express. He has brought his son Morty, 14, to lunch. The hostess seats them in a booth and turns the tablet toward them. She asks if they have been to Burger Express before and if they need help with the tablet. Rick uses similar technology daily and Morty is pretty good, himself. He tells the hostess that they will be fine and skips the server’s instructions. On the screen it says to slide a credit card to begin. Rick assumes this is like a gas station, placing a hold on an account to prevent customers skipping payment later.

Once activated, the system displays a list of available drinks. Rick selects a Diet Coke and then changes his mind and orders water. Morty wants milk.

Rick decides on a hamburger with lettuce, tomato, mayo, and pickles and selects french fries for his side and a Szechwan dipping sauce. He orders Morty a personal pepperoni pizza and a half-dozen wings with lemon and pepper flavoring.

The food arrives quickly and is very tasty. Rick goes back to the tablet, selects to pay, and the system offers 15%, 18%, 20%, or ‘other’ as gratuity choices. He pays with the credit card he scanned when sitting down and enters his email to have the receipt emailed to him. He signs up for coupons, sent weekly.

Conceptual Model

Note that this conceptual model is incomplete and possibly even wrong in spots! It’s your job to complete and/or fix it.

Rubric

Gateway requirements: your completed assignment should include every item listed above presented as a PDF and include all numbered photos. Read the tasks and all the content above very carefully as the details hidden in the scenario and persona are absolutely necessary to your design.

Timeliness: Submission prior to due date. No late assignments accepted.
Conceptual model: All items in the conceptual model are accounted for and the model has been updated and/or fixed.
Interface metaphor: Interface metaphor identified and described demonstrates a clear understanding of the relevant readings, including a description of what the system is supposed to do and what tasks might be complicated for customers to achieve.
Interaction type: The match between selected interaction type and the prototype make clear the student understands how customers will flow from one interaction to another.
Prototype: Visual design: Prototype is presented clearly, with the required elements to complete the interaction and with labels to explain any wireframe elements.
Prototype: Explanation of use: The steps provided (numbered photographs and relevant descriptions) clearly guide the reviewer through the interaction.
Prototype: Creativity: Prototype displays creativity in design and description.
Reflective paper: Content: Paper shows thoughtful reflection based on the “tester’s” feedback and experience. Also depicts what the designer would add/upgrade/change in light of that feedback.
Reflective paper: Format: Citation/paper formatting is consistent and accurate throughout and meets length requirement.
Organization: Photographs are clearly labelled, numbered, and organized.
Mechanics: No errors in spelling or grammar.