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.

What’s new. This assignment adds two new elements to the divergent design assignment of your personal project. First, you’ll collect “comparables” of relevant features and concepts from apps that already exist, both as sources of inspiration and for differentiating your design. Second, rather than sketching only the user interface, you’ll construct a “storyboard” that explains the overall flow of you app, illustrating how the user achieves key goals.

Tasks

The result of this assignment will be a brief design document that you’ll construct in a series of tasks.

  1. Brainstorming features. Brainstorm a collection of possible features for your application. You should aim to produce a list of at least 20 plausible features, focusing on novel and application-specific features (rather than the kinds of features associated with standard concepts such as user authentication, commenting, etc). Each feature should be given a name and described succinctly in a couple of sentences.

  2. 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.

  3. Scrapbook of comparables. Look for similar functionality in other apps, and collect clippings (as screenshots of their user interfaces or from explanations on their websites). These clippings do not have to exactly parallel your features: you may have several clippings that relate to a single feature; one clipping that’s connected to multiple features; or a clipping that doesn’t relate to any feature. Each clipping should have a caption saying where it’s from and how it might be useful to you. 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 each of the concepts in your app outline.

  4. 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 Poor
Feature brainstorming Expansive list that covers essential functionality and includes several novel features Comprehensive list that includes several application-specific features but nothing surprising Essential features missing, or all features are routine and generic
Comparables Diverse comparables suggest non-obvious good ideas to borrow and draw creative connections 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).