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 by settling on a team point of view, storyboarding, and making paper prototypes.
By now you should be a pro at writing a point of view! As a team, think about the user need you want to address and come up with a point of view that illustrates the need and your studio brief. Remember to look at the issue from a high-level; don't try to plan out all the functionality for your app or design a solution here. Refer to previous assignments on point of view for more guidance if needed.
Using your point of view and inspiration, generate three different design ideas that address/engage your point of view to address a user need. (Your call whether the different designs tackle the same scenario or diff't scenarios.) Your setting should assume access to current tools, such as the ones from your inspiration. 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 fit on one (single-sided) 8.5" x 11" sheet of paper and comprise 6-8 panels. 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 three storyboards should diverge, meaning that they each represent different design ideas that address the same point of view. As an example, the following two storyboards both address the point of view "Through time budgeting and tracking, you can be your most productive self:" Storyboard 1, depicts a way to reduce the time of unproductive activities; Storyboard 2, depicts a way to manage your productive time.
For this step, lay out your storyboards. Take some time to think about the different ideas you've had. Make sure you think out the strengths and weaknesses of each design, and how well they achieve the goals set out by your point of view. Buy-in and ownership are critical here.
Working as a group, make two paper prototypes. Each should clearly connect to your point of view, but in a completely different way. (Can you see we really value enumerating alternatives?) Each prototype will instantiate one of your storyboards (pick your two best storyboards). These sketch-level prototypes should show all of the important UI elements in approximate locations. They should not show fonts, colors, or pixel-level details. Paper prototypes must be hand-drawn. No digital devices are allowed. Again, it helps focus on the concepts, and saves you from wasting hours twiddling pixels. It also forces you to focus on the hard conceptual work of figuring out information architecture and functionality now. 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 be complete enough understand the "gist" of the app and to "run" a new user through each task. Small details that aren't very important for designing and do not affect the task (such as the copyright policy on Piazza) do not need to be included in the prototype. When you're done, everyone on your team should sign the prototypes. 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.
Examples are a great way to learn, but they are not a gold standard for this class, especially as it evolves over the years. Use these examples as a reference, see where they succeeed/breakdown, and make sure your final submissions adhere to the rubric items.
by Mike Davison, 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, ONE person will submit the assignment for their team, listing every group member's student ID number in the assignment submission. Individual submissions will not be accepted. Meaning you must have joined a team by this time. Remember to bring your storyboards to class.
Your write-up will contain the following in one pdf:
Note: if you are a rare group of 2: pursue a dev plan that meets the rubric with a reasonable workload. If you are unable, you may propose an accommodation to this on Piazza; include a link to your dev plan.