Assignment 3: Prototyping


Brief

This is the first team assignment. Review and share the user needs you brainstormed. This week, your team will develop blueprints for your mobile web app, fleshing out your design ideas by creating a point of view, seeking inspiration, storyboarding, and making paper prototypes.

Assignment

Step 1: Make a Team Point of View

First, your team should write down a point of view (that relates to the brief) in a sentence or two.

What's a point of view? It's your take on a high-level design strategy, before actually designing a solution.

  • For example, if you wanted to improve the check-out experience at the grocery store, your point of view might be: "waiting in line is intrinsic, but the boredom is not". This would lead to design solutions like showing news or playing games while waiting in line.
  • Alternatively your point of view might be "with a good scheduling interface, no one should have to wait in line." This might lead to better ways for employees to staff registers and consumers to pick them.
  • Or, you might have a totally different point of view: let's make grocery stores more like farmers' markets, where payment is distributed across the stands that have the food.

All of these are valid points of view---they do suggest different possibilities and have different implications/entailments for what constitutes a good design. They do not restrict your thinking to one solution - they are general enough to give scope for multiple solutions.

What makes a good point of view? It should clearly express the problem/opportunity. And it should make clear what a good solution would accomplish. Write yours down.

Remember that you will work on this project for the rest of the quarter. Thus, coming up with a good point of view that you can successfully tackle in the remaining weeks is crucial.

Step 2: Make an Inspiration board

Your next step is to find inspiration for the solutions you will be brainstorming. Inspiration can be existing applications, artifacts, products, services, or anything that relates to your concept. Here, web search is your friend (potentially useful sites include Google, Google Scholar, the ACM Digital Library, TechCrunch, Engadget...). Some things you find will be quite related, but it is important to interpret "related" broadly. The relationship could be very concrete or very abstract. It may be that a carrot-peeler or a measuring cup is your inspiration for an elegant and ergonomic software interface design. You may be inspired to improve upon an existing service or go in a totally different direction. Cast the net wide and find as much (i.e., diverse inspirations) as you can. An "inspiration board" is a tool to help you do this.

Team Inspiration Board:

  1. Start an inspiration board by listing 5-10 words that relate to your design idea or point of view. These words can be anything -- from similar designs to feelings that the idea evokes.
  2. Once you’ve listed your words, come up with at least five inspirations, and share them by providing links or images within your assignment submission. For each inspiration, give a brief (1-2 sentences) and insightful explanation of why you chose it (What did you take away from it? What did you learn from it?... In other words, why did it inspire you?). Each of these inspirations should offer a different perspective to the design you are working on.

Benefits of Inspiration Boards:

  • Making an inspiration board helps you understand the existing landscape, sort of like a competitive analysis.
  • Inspiration boards help inspire you to do things you wouldn’t have otherwise thought of.

As an example, if you were making a travel app, your words could be: relaxing, paradise, getaway, Europe, blue, etc. Then, some inspirations could be tripadvisor.com, souvenirs, twitter, Bank of America mobile banking app, and so on. You should not be submitting inspirations with tripadvisor.com, travelocity.com, expedia.com, as these websites all offer the same type of services and therefore, do not add anything “diverse” to the set. While it’s true that Google has a clean minimal layout and the iPhone has a beautiful design, citing those as inspiration wouldn’t be very specific.

Here's a concrete example of an inspiration board, found below the overview section, where you can see the existing products/systems/etc. that help establish the problem space being explored. On the right are the words that related to the designer's design ideas.

Remember to be creative. Think big, then focus in with an insightful and specific explanation of how your inspirations inspired you.

Step 3: Create 2 Storyboards

Next, use your inspiration to come up with two different design ideas that address/engage your point of view. Illustrate each of these ideas with a storyboard.

A storyboard is a comic-strip-like set of drawings about what your interface does and how it is used to accomplish tasks in a real usage scenario. Feeling stumped about how to show your ideas visually? Check out "Understanding Comics" by Scott McCloud, and Amal Dar Aziz's excellent Guide to Storyboarding. A good storyboard should clearly demonstrate who the user is, the usage situation, and the user's motivations for using the interface. It should show what the user can accomplish with your interface, but it needn't (and often shouldn't) show a specific user interface design. For a storyboard including an app screen, the details of the screen are not relevant, but what those screens enable you to accomplish is. Check out these lecture videos to learn more.

Each storyboard should comprise 5-8 panels and fit on two 8.5" x 11" sheets of paper. Use a thick pen like a Sharpie---ballpoint pen or pencil is not acceptable. A thick pen is a good reminder to focus on the high-level and not sweat the details at this point. (Don't worry, in a few weeks you'll have plenty of time to sweat the details.)

Remember that the two storyboards should diverge, meaning that they each represent different design ideas that address the same point of view. As an example, the following storyboards both address the point of view "Through clever scheduling, homework doesn't have to be a time-consuming and dreaded process:" Storyboard 1, depicts a way to prioritize tasks, Storyboard 2, depicts a way to factor in breaks.

Step 4: Build 2 Paper Prototypes

For step 4, lay out your storyboards so the team can see them. Take some time to discuss the different ideas you've had. Make sure you discuss the strengths and weaknesses of each design, and how well they achieve the goals set out by your point of view. Buy-in and joint ownership are critical here. If the discussion takes a while, that's cool. Disenfranchisement at this point is way bad, as it means you'll be up alone pulling late nights, while your teammate is sleeping, angry you didn't pick their idea.

Working as a group, make two paper prototypes. Each should clearly connect to your point of view, but do so in a different way. (Can you see we really value enumerating alternatives?) Quite likely, each prototype will instantiate one of your storyboards, but that's not required. A paper prototype concretely shows all the essential elements of a user interface, except that it's implemented with pen on paper, as opposed to pixels and code. Paper prototypes must be hand-drawn. No computers and printers are allowed. Again, it helps focus on the concepts, and saves you from wasting hours twiddling pixels. Years after taking this course, students often come back and tell us that paper prototyping was their favourite part of the class because of its effectiveness for rapid ideation.

For example, if you were designing a mobile transit application, your two prototypes could take two different approaches to addressing the point of view that users should be able to find out when the next bus will come. The prototypes should be complete enough to "run" a new user through each task. When you're done, everyone on your team should sign the prototypes. (Note: the story here is very linear, but your process doesn't have to be. You can start making a paper prototype, then change your mind. Align your prototype with your storyboard as much as you can; no need to be perfect. Don't try to split up the work just to get the assignment done, where one person makes the storyboard while the other makes the prototype. That's not very effective.) Your prototype interface should enable people to navigate, recover from errors, and change their mind. Check out the Hanmail video for an awesome example and inspiration.

Your paper prototypes should show sketches for all important areas of your site. If X is an area of your site that's not very relevant to your task (like maybe the copyright policy of piazza isn't very important for designing the use case of this class) then you don't need to show it. Remember, this prototype is all hand-drawn (no computer tools), so it should be really fast to come up with ideas. In fact, that's precisely the point of this assignment: now is the time to do the hard conceptual work of figuring out your information architecture and functionality.

In Studio

You will present your storyboards/prototypes. Also, you'll be assigned 3 evaluators from different groups. You will need to arrange time to meet with these evaluators before lecture next week. See Assignment 4 for details.

What’s this for? A UX agency perspective

by Mike Davison, Community TA and UX Project Manager

Agencies use storyboards to convey to clients potential solutions to a given problem....problems discovered during needfinding. Doing it this way allows you to tell a story and explain how a user will interact with your design, without the need to draw a single pixel or code a single line. Storyboards are generally used during the discovery phase of a project, or during pitching activities when we are trying to dazzle a client with our creative thinking!

Student Examples

Here are three student examples from previous years. Keep in mind that the assignment was slightly different.

  • Example 1 - They did a great job brainstorming inspiration. The storyboards were not above and beyond, but they did a thorough inspiration board.
  • Example 2 - This project had a great inspiration board, and nice captions for the prototypes. The organization and formatting of the prototype section was poor, but the ideas were still good.
  • Examples 3 & 4 - This link has two project examples. The first shows two prototypes that are too similar, and a disjointed link between POV and storyboards. The second has a great POV, and markedly distinct prototypes that each address the POV in their own way.

Frequently Asked Questions

How complete should our prototypes be?

Your paper prototypes should show sketches for all important areas of your site. If X is an area of your site that's not very relevant to your task (like maybe the copyright policy of piazza isn't very important for designing the use case of this class) then you don't need to show it. Remember, this prototype is all hand-drawn (no computer tools), so it should be really fast to come up with ideas. In fact, that's precisely the point of this assignment: now is the time to do the hard conceptual work of figuring out your information architecture and functionality.

What target platform should we be designing for?

The final project will be a mobile web app. You'll use web technologies to build a web app for a mobile device.

Does the storyboard have to be on a piece of a paper?

You need to bring paper storyboards to studio. If you choose to use a different medium (such as a whiteboard), you will need to print out photos of the storyboards to bring to studio.

What should an inspiration board look like?

For this assignment, the stated list of words and existing inspirations will suffice. However, in practice, inspiration boards can consist of a digital compilation of the apps/websites/articles that inspire the project, sketches and words that relate to the design idea, or a physical rendering such as this. In this example, you can see the existing products/systems/etc. that help establish the problem space being explored. On the right are the words that relate to his design ideas.

What level of detail should our prototypes have?

We need to be able to get the gist of what's going on from your prototype. This means that a random person who you might test it on would "get it," and also that a developer could use the prototype to create a functional application with a defined flow.

Common "I wish" Feedback

The following statements are common feedback given on this assignment. We call these statements "I wish" feedback because they are a way to express things that you wish the assignment had contained. You could think of these as common problems to avoid.

  • Point of view should more clearly express the problem/opportunity.
  • Inspirations should be more diverse.
  • Storyboards should more clearly relate to the POV.
  • Storyboards should show more divergent design solutions.
  • Storyboards should be easier to follow, try adding _____.
  • Prototype interfaces should be more different.
  • I wish the prototype had more details.
  • Storyboards do not address _____(user problem/need), you might want to add _____.

In Studio

In studio this week, we will prepare for A4, Heuristic Evaluations, which will involve a great deal of scheduling and logistics. Be prepared to identify times to meet with your team and other members of the studio.

Team Submission

For this assignment (and all future assignments), ONE person will submit the assignment for their team, listing every group member's student ID number in the assignment submission. Remember to bring your storyboards to class.

Your write-up will contain:

  • A brief description of the activity you observed last assignment (or, if your group chose a new design direction, what activity you observed this week), how it connects to your studio theme, and what point of view you chose.
  • 5-10 words that relate to your design idea. (Inspiration Quality)
  • Five existing inspirations that relate to your thinking and explanations of why you chose those designs. (Inspiration Quality)
  • A comprehensive set of digital photos or scans of both of your storyboards. Remember that the two storyboards should diverge, meaning that they each represent different design ideas that address your point of view.(Storyboard #1, Storyboard #2)
  • A comprehensive set of digital photos or scans of both of your paper prototypes. (Prototype #1, Prototype #2)
Submit your formatted pdf here

Evaluation Criteria & Grading Rubric