This is the first team assignment. Review and share the user needs you brainstormed. This week, you'll flesh out your design ideas by creating a point of view, seeking inspiration, storyboarding, and making paper prototypes. These are the blueprints for the mobile web application you'll make.
What's a point of view? It's your take on a high-level design strategy, before actually designing a solution.
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.
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.
Your Inspiration Board:
a) Start your “inspiration board” by listing 5-10 words that relate to your design idea. These words can be anything -- from similar designs to feelings that the idea evokes.
b) Once you’ve listed your words, come up with at least five inspirations, and share them by providing links or images to the 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:
1) Making an inspiration board helps you understand the existing landscape, sort of like a competitive analysis.
2) Inspiration boards help inspire you to do things you wouldn’t have otherwise thought of.
Good 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.
Remember to be creative. Think big, but also stay focused and be specific with your inspirations.
This is a good out-of-the-box example of a voting process redesign that can be used as a guideline. "Link to Inspiration Board
Relevant apps, organizations, campaigns are on the left while guiding design words are on the right.Next, come up with two 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.
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.)
In a storyboard, the details of the screen are not relevant, but what those screens enable you to accomplish is.
Set out your storyboards. 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. And then, as a team, decide on one of these ideas to prototype. 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 that implement the idea you've decided on. (Can you see we really value enumerating alternatives?) A paper prototype concretely shows all the 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 favorite part of the class because of its effectiveness for rapid ideation.
The prototypes should vary in interface, but offer the same basic functionality. For example, if you were designing a mobile transit application, your two prototypes could display the bus times in two very different ways. 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. And your prototype doesn't have to exactly align with your storyboard. But 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 more 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.
Here are three student examples from previous years. Keep in mind that the assignment was slightly different.
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!
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:
| Category | Nope | Weak | Proficient | Mastery |
|---|---|---|---|---|
| Point of view 3 points | No point of view or irrelevant point of view. | The student's point of view does not express a problem or opportunity, does not create requirements for a solution, or does not relate to the studio theme. | The point of view relates to the studio theme and the problem and solution are clearly stated, but the solution requirement is too general (any solution meets the requirement) or is too specific (allows for only one solution). | The problem and solution requirement are clearly stated in the point of view and clearly relate to the studio theme; the requirement allows for focus without being too constraining. |
| Inspiration Quality 3 points | No relevant inspirations. | Fewer than 5 inspirations with explanations. Fewer than 5 words submitted or words do not relate to the design idea. | The inspirations were obvious (didn't require observation) and/or the explanations were vague and confusing (it would be hard to implement a solution based on them). 5-10 words included that relate to your design idea. | Inspirations were diverse and had insightful explanations. 5-10 words included that relate to and strengthen your design idea. |
| Storyboard #1 2 points |
No storyboard submitted OR the storyboard is hard to follow or does not address the problems and solution requirements identified in the point of view. | The storyboard reasonably addresses the problems identified in the point of view, but a reader may have lingering questions about the situation depicted. | The storyboard is easy to follow. Someone else could come up with a distinct prototype that would correspond with the point of view just from looking at the storyboard. | |
| Storyboard #2 2 points |
The student did not submit a second storyboard OR the storyboard is hard to follow and does not address the problems and solution requirements identified in the point of view. | The storyboard reasonably addresses the problems identified in the point of view, but a reader may have lingering questions about the situation depicted and/or it does not diverge and represent a different solution from the first storyboard. | The storyboard is easy to follow. Someone else could come up with a distinct prototype that would correspond with the point of view just from looking at the storyboard. It clearly diverges and represents a different solution from the first storyboard. | |
| Prototype #1 3 points |
No prototype or completely irrelevant prototype. | The prototype is not interactive or interactions are broken, and there is no defined purpose for many elements in the prototype. | The prototype is mostly complete, although there are some functions that are not yet interactive, some elements have no defined purpose, and it can be difficult to know how to use certain parts of the prototype. | The prototype has enough detail that the user can see all of the interactions, understand how they work, and a programmer could use the prototype to create a functional application with a defined flow. |
| Prototype #2 3 points |
No second prototype or completely irrelevant prototype. | The prototype is not interactive or interactions are broken, and there is no defined purpose for many elements in the prototype. | The prototype is mostly complete, although there are some functions that are not yet interactive, some elements have no defined purpose, and it can be difficult to know how to use certain parts of the prototype, and/or it does not diverge from the first prototype and explore different interfaces implementing the same idea. | The prototype has enough detail that the user can see all of the interactions, understand how they work, and a programmer could use the prototype to create a functional application with a defined flow. The prototype clearly diverges from the first prototype and explores different interfaces implementing the same idea. |
Outside the Box 1 point. Up to 5% of submissions. | Either one or both prototypes submitted were incredibly creative and innovative. | |||
During studio, click here to assess your group's work as a collective unit. During studio, click here to assess your own work and each of your team member's work.
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.
The final project will be a mobile web app. You'll use web technologies to build a web app for a mobile device.
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.
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 andn 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.
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 gets it, and also that a developer could use the prototype to create a functional application with a defined flow.
