Project Phase 2: Divergent Design
Overview
Context. In the prior assignment, you built an impact case articulating the problem you intend to solve, a rough idea about a potential solution, and evidence that that the problem matters and that the solution is plausible. In the next two assignments you’ll develop the design of your solution. As in your personal work, this will be in two phases: a divergent phase (this assignment) in which you’ll brainstorm features and organize them roughly into a coherent application; and a convergent phase (next assignment) in which you’ll work out the details of your concepts and user interface.
Tasks
The result of this assignment will be a brief design document that you’ll construct in a series of tasks.
-
Broad application goals. Read over your report from P1, and decide what your focus will be: who your app will be for and what value it will bring beyond existing apps. Record in your design document a fun name for your app; a description in a few words of the intended audience; and a sentence or two about the value that it will bring to users beyond existing apps. Note: your app’s focus does not (and arguably should not) need to solve all problems and/or satisfy all potential users you might have identified in P1. Rather, we’ve found that the best final projects are those where the resultant app has a tight focus that brings real value to a specific target population.
-
Scrapbook of comparables. Look for apps that either seek to provide similar value to their users, or have a piece of functionality that might be applicable to your idea. Collect clippings of these app (e.g., GIFs/videos/screenshots of their user interfaces or from explanations on their websites). Caption each clipping with a couple sentences to (1) describe where it’s coming from, and what it’s showing; (2) explain how it might be useful to your design brainstorming. For example, you might take a screenshot of When2Meet’s calendar painting widget and caption it “Selecting available times in When2Meet: could we apply this idea to a map to have our users mark their home neighborhoods?”. Collect a sufficient number of clippings such that you have a breadth and depth of inspiration to draw from for your brainstorm in the next step.
-
Brainstorming features. Brainstorm a collection of possible features for your application. You should aim to produce a list of at least 30 plausible features. Focus on novel and application-specific features (rather than the kinds of features associated with standard concepts such as user authentication, posting, commenting, etc). Give each feature a name and describe it succinctly in a couple of sentences.
-
Outlining your app. Select a subset of the features that you believe will form a coherent app, and identify some concepts that will embody them. You do not need to include standard concepts (such as User, Session and Notification) unless they play an unconventional role in your app. For each concept, provide a good name and write a purpose and an operational principle. Remember that the concepts should be described in a context-independent way, so that a concept could be reused in a different app.
-
Storyboard and sketches. To show how you plan to assemble the concepts to bring value to users, identify 2–3 key “flows” each of which comprises a series of actions a user must take to fulfill a goal that they have. For each flow, produce a storyboard: a sequence of annotated sketches that begins by depicting a user’s motivation for forming the goal, and then shows the actions they must perform with a UI (and how the UI responds) for accomplishing the goal.
For example, flows for an online bookstore might include: looking for a book; ordering a book; returning a book; and so on. A storyboard for “looking for a book” might begin by showing a user hoping for some escapism. Then, across a series of steps, the storyboard would depict how they would move through the application to identify a potentially set of subjects or genres of interest, and then winnow down to specific books they find interesting. These steps would show how a user would manipulate the user interface (e.g., what buttons would they press), how the user interface would respond (e.g., filtering down the list of books), and how a user would make sense of what was shown.
As you put together the storyboards, note down things that feel brittle or unclear about the flow—these will serve as fodder to prompt your work in the next (convergent) phase of the design process.
Submitting your work
Posting and submitting. By the assignment deadline, post your work on each team member’s portfolio, and then submit this Google form once for the whole team.
Rubric
Part | Excellent | Satisfactory | Needs Improvement |
---|---|---|---|
Feature brainstorming | Features cover a broad and diverse range of functionality. Brainstormed features largely offer either novel functionality, or a compelling riff on existing ideas by emphasizing an audience- or problem/domain-specific need or characteristic. | Features cover a large range of functionality. Brainstormed features show promise in terms of novelty, but could be better differentiated from existing functionality by leaning into specific qualities of either the intended audience or problem/application domain. | Fewer than 30 features have been brainstormed, or brainstormed features cover a relatively narrow range of functionality. Essential features may be missing. Several features are routine or generic. |
Comparables | Diverse range of comparables that are well-captioned to suggest non-obvious good ideas to borrow from. Creative connections are drawn to applications from different domains. | Comparables suggest competent borrowing, but draw from a relatively straightforward and familiar set of sources. | Mismatched or missing comparables suggest that design will not be grounded in knowledge of existing work. |
Concept outline | Compelling concepts that embody selected features, have clear purposes and rich OPs, and include creative reuse or invention | Concepts have understandable purposes and OPs but may lack creativity | Concepts have unclear purposes or OPs, or fail to embody selected features |
Storyboard Sketches | Storyboards clearly communicate a user’s action sequence with the envisaged interface, and depict how the interface would respond. A user’s motivations and goals are well-grounded and convincing. | Storyboards do a good job of relaying a user’s action sequence, but there is some lack of clarity about how they would accomplish a particular step with the interface (or how the interface might respond). User motivations and goals are present, but may occasionally be trite or contrived. | Storyboards are hard to follow or fail to cover key functionality. User motivations and goals are missing or shallow. |
Advice
Start early. As always, start early. This doesn’t mean you have to finish early. If you make an early start on thinking about your design, you’ll have it in mind over the week, and you’ll come up with novel ideas and insights without trying too hard. But if you leave the whole assignment until the last day, it will be hard to think creatively, and you’ll have much less fun.
What’s a feature? A feature is any piece of functionality that delivers some value to the user; some features will turn out to be concepts, but others may be larger (encompassing a whole set of concepts) or smaller (corresponding to a particularly significant concept action, for example). Make sure that each feature is its own idea; don’t take an idea and break it into multiple features (for example, by listing the actions of a single concept as distinct features).
Brainstorming tips. Brainstorming is more fun, and more effective, if you do it as a team activity rather than individually. Use the “yes, and” tactic from improv in which you try to build on and riff on other people’s ideas, and avoid negative, critical analysis. Focus on generating as many new ideas as you can. Take notes as you go. Read this short tutorial for some tactics you can apply to make your brainstorming more generative.
Sources of feature ideas. To feed into your brainstorming session, you might also find feature ideas by looking at feature lists of familiar apps in Wikipedia (such as this list for Instagram). Soren Iverson has a nice stream of design ideas on his Twitter/X feed. GPT is good at generating lists of feature ideas, but you may want to try your hand at it first, and then use GPT to see what you might have missed. This will help you develop your own brainstorming skills, and will make it less likely that you get stuck with some more routine ideas that it’s hard to go beyond. (Check the class guide for our GPT policy.)
Identifying concepts. See this tutorial for criteria that you can apply to ensure that your concepts really are coherent concepts and not just arbitrary pieces of functionality. You can also read more about identifying concepts in Chapter 2 of Daniel’s book: The Essence of Software.
Purposes and OPs. Remember that the purpose answers the question “why is it needed?”; the OP answers the question “how is it used?”. The OP should not be a list of actions. If you can’t find a compelling OP, that’s often an indication that you don’t have a compelling concept. Remember that the description of a concept should not refer to other concepts or to other aspects of the app as a whole.
Sketching storyboards. As you Google for inspiration, you will undoubtedly come across some extremely high-fidelity examples of storyboards with very realistic depictions of people (complete with shading and shadows, expressive hair, and facial emotions). The storyboards this assignment asks for, however, are sketches. The goal of sketching is to focus communicating clearly and simply, rather than finessing details or focus on aesthetics. So, for example, it is sufficient to depict people as basic stick figures with thought or speech bubbles. We recommend sketching with a thick marker (or a thick stroke if you’re using a tablet) to force yourself to not worry about the finer details. Instead, focus on using the sketches to communicate the key moments of the user story (i.e., why a user would have a particular goal, and how they would perform the actions with your envisaged user interface).
An Example Storyboard. Amal Dar Aziz has written up an excellent Guide to Storyboarding that communicates the level of fidelity we’re expecting. Pay particular attention to the last page of the guide which shows how you can depict people and actions very simply but clearly via circles, stars, and line bursts.
Tutorials. You may want to reread the tutorials we’ve written here (or read them for the first time if you didn’t have the time before).