This is the first team assignment. Review and share the user needs you brainstormed. This week, you'll 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.
Your next step is to choose a design brief and 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.
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. An "inspiration board" is a tool to help you do this.
Your Inspiration Board:
Benefits of Inspiration Boards:
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.
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.
For the last step, 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. 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 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 favorite part of the class because of its effectiveness for rapid ideation.
The prototypes should vary in interface, but offer the same basic, yet complete, 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. 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.
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!
Here are three student examples from previous years. Keep in mind that the assignment was slightly different.
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 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.
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.
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.
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. | |||
