XVIII.1 January + February 2011
Page: 62
Digital Citation

Did you ever know that you’re my hero?

Sal Cilella

back to top 

Interaction design has developed organically, both as a field of study and as a design practice, alongside the evolution of desktop computing and the graphical user interface. Designing for the traditional desktop—using software, browsing a website, navigating an operating system—involved few variables beyond the screen. Little thought was given to the broader needs of the person using the interface, eventually reducing the concept of a user into just another part of the overall system. The designer could rely on this generic user to remain in a fixed location, seated at the keyboard, mouse in hand, focused on a task. With the task-centric approach, the fuzzier elements of the user experience (how the experience unfolded) were subordinate to the functional (what the interface accomplished). While this approach may have worked in the simple, contained context of a desktop experience, the complexities of today's mobile and multimodal digital experiences require designers to expand both their process and mind-set through a more empathic approach.

Tools and techniques for designing desktop-computing experiences evolved to match the task-centric perspective. Functional specs and use cases, longtime staples in the software-development process, address user experiences purely from a data and task-flow perspective—focusing on what the system does but not on how it relates to the person using it. To better connect on-screen experiences with the person in the chair, user research was introduced into the interface-design process. While user research can be a powerful influence on the design process, in interaction design it is far too often relegated to a validation role, taking the form of focus groups or usability testing to elicit feedback on specific concepts or features. Even personas, a commendable step toward acknowledging the user as an actual human being, are most often used to validate the relevance or market size for an interface or product.

While the typical interface-design methods and tools—functional specs, use cases, user testing and focus groups, personas and scenarios—are widely employed, they do little to build empathy and connect the interaction designer to his/her audience early in the design process. Overall, they have limited impact on the actual crafting of the experience for our intended users. And perhaps, for the desktop-only experience, that's acceptable. In these contained situations, interaction designers can rest comfortably with the expectation that the user's context doesn't change. But what happens when the user gets up out of the chair? Leaves the room? Takes the digital experience with them out into the real world? As soon as a user is engaged in a larger experience, the usual methods fail us.

back to top  Meet Your Hero

To design new, compelling, and integrated interactions, we need a new approach. Designing interactions beyond the desktop—from a 48-inch touch screen on a vending machine to a lightweight tablet to a gestural gaming platform—requires a level of finesse and connection with our audience that traditional interaction-design toolkits do not afford. As designers, both our mind-set and process need to shift dramatically.

The first step in freeing ourselves from the tyranny of the desktop is to stop thinking of these interactions as tasks. Tasks are linear endeavors that drive toward some sort of conclusion or achievement. They compromise exploration in the service of completion. You perform tasks because you have to, not because you want to. Tasks are doing the dishes, balancing the checkbook, backing up your files. There's little enjoyment in tasks, aside from the satisfaction in their completion. And increasingly, we are outsourcing tasks to automated processes and HIT (human intelligence task) services.

New interactions are much more than a collection of tasks or features; from an audience/viewer/ user perspective, they are experiences. With these experiences comes the expectation of delight, even in the smallest of details. It isn't enough to offer consumers a product or service that successfully performs a series of tasks; how the experience unfolds is of equal importance. Successfully performing the functions is expected—the how is the differentiator. And in an increasingly crowded marketplace with countless digital experiences vying for the fragmented attention of consumers, the how is the primary way to set an offering apart from its peers. The consumer-electronics space is littered with tales of products and services that were functionally superior but failed to gain a foothold against more compelling experiences. To uncover the how and design a compelling interactive experience, we need to begin with the audience, not the product.

We can start our audience-centric approach by employing the core creative tool of filmmakers and writers: the story. Story is such a fundamental aspect of relating experiences and making sense of the world around you that it is easy to overlook it as a design method. But it's the accessibility of story that makes it compelling—we can all tell stories. And so we begin our design process by crafting the three key components found in every story: a likable hero, an immersive setting, and a compelling script. In doing so, we create the context in which to generate design ideas.

A hero is someone we can design for and describe in great detail. Their name, age, where they live, what kind of car they drive, where they work, what kind of music they listen to in the car on the way to work. All of these details help us as designers to connect with our hero as an individual, not a generic user, as is so often the case in interaction design (see Figure 1). Our hero is our intended audience and is frequently derived from segmentation personas and ethnographic research participants, creating a composite character without the generalities usually associated with such an approach. Like a fiction writer, a designer should develop an attachment and healthy respect for their character and feel invested in helping the hero achieve success.

Next, we place our hero in a specific setting, an element crucial for creating design concepts that are context-appropriate. If we are designing a gestural gaming interface, we need to know where our hero is (in the dorm? in the basement? on the subway?), what the environment is like, who else is there and what other things are occurring. These elements do far more than simply provide a backdrop for our story—they provide context and clues to our hero's goals and desires, as well as those elements competing for his attention while engaged in our core experience (see Figure 1).

Lastly, we write a script, detailing how the events of the story will unfold (see Figure 2). What is our hero trying to accomplish? How is he or she going to get there? What challenges will they face along the way? The story should naturally uncover the motivations of our hero and our intended experience's role in these larger needs. A well-written script doesn't try to sell anything, so much as it tries to expose the full value of the opportunity at hand.

With our story taking shape, we brainstorm design ideas to propel our hero through the story. In every story, a hero has tools to help him or her accomplish a goal. We need to help our hero find their light saber, their Batmobile, their lucky fedora. We brainstorm design ideas—lots of ideas—that will drive our hero toward a successful outcome (see Figure 3). Through the use of story as a central framework for creating ideas, we are forced to find ideas that are contextually relevant and fit the hero's needs. What will it be like for our hero to use this mobile app in the checkout line at the grocery store? How does it help our hero accomplish his goals, both near-term (paying for groceries) and long-term (throwing a surprise party)?

Story acts as a collaborative discovery tool, prompting conversations about what benefits the design ideas should provide and how the hero should experience them. Stories also help to reduce bloat, honing the experience to its essence—only the features that benefit the hero in some meaningful way make the cut. It is important to keep in mind that our story, no matter how engaging, is only in service of the design effort. Our goal is to create great design concepts, while the story is simply the mechanism to get us there. Our process for both the story and the design ideas should be iterative, enabling the strongest design concepts to thrive.

back to top  How Do We Do It?

Two techniques for crafting stories that are particularly well suited to the design process are narrative arc construction and storyboarding. With narrative arc construction, we create sticky notes for each of the primary plot points in our story, arranged in a vertical column. We jot down story details and assemble them in rows that expand on each of our primary plot points. This creates a gridded, modular visualization of our story that we can quickly rearrange, revise, and, most important, use as an organizing structure for design ideation (see Figure 2).

The accessible sticky-note-and-Sharpie method promotes collaboration with both the design team and, more broadly, across corporate departments and external clients. By getting a team to rally around our hero and his/her goals as defined in the story, we can more easily generate compelling design ideas that will help our hero find success. Teams frequently organize their brainstorming sessions around the plot points and integrate their strongest concepts back into the storyline, maintaining a cohesive yet easily rearranged story with our design concepts in context.

Using the narrative arc construction as the foundation, we can bring greater fidelity and detail to the process by creating storyboard panels that visually represent both the story sequence and our design ideas (see Figure 4). Borrowing this well-established technique from the film and animation world enables us to address the how of the experience: What is it like for our hero to use our design idea? Does the interface enable our hero to move through the experience in a way that makes sense?

Ultimately, our goal, as in any engaging story, is to have our hero achieve success, whether that means saving the planet, eliminating the villain, or using a mobile phone to pay for a coffee. It will be our design ideas that got our hero there, even if she takes all the credit.

Storyboards bring our design ideas to life in a more visual, tangible way, beyond the sticky-note narratives that got us off the starting blocks. This is especially true when we incorporate sketches of our design ideas that help us visualize the product, interface, or service we're intending to offer. Storyboards are great methods for design teams to share concepts with a broader and often more literal audience (engineering, product development, company stakeholders). Additionally, these boards can serve as an initial draft for higher-fidelity storyboards or prototypes to elicit consumer feedback, provide direction for interface design, or produce animated scenarios. Storyboards also offer a chance to reinforce the notion of the hero of the story—the person for whom we are designing—as the focal point of our design and business efforts.

With our character-driven story and design concepts, we can move into the more detailed development-focused phases of the design process, with the assurance that our designs are grounded in the needs of our hero. While story is often reserved as a pitch tool once the design ideas are well established, designs can clearly benefit from moving the story forward in our process, helping generate the ideas themselves. This enables us to brainstorm and refine design concepts that are more likely to be relevant to our audience, their needs, and the environments they inhabit. By focusing our design efforts around the hero's perspective and harnessing the power of storytelling, we can deliver more than just functionality: We can deliver meaningful benefits that connect and empower consumers, whether they're video-chatting with their grandkids on the TV, monitoring their home remotely, or simply using their phone to pay for lunch.

back to top  Author

An accomplished interaction designer, Sal Cilella specializes in leading teams to create compelling consumer experiences that create measurable value for clients. During his tenure at gravitytank, he has focused primarily on designing next-generation mobile and consumer electronics experiences and exploring these concepts through the language of film and animation. Cilella established and manages gravitytank's Interaction Design Group and has a B.A. from Notre Dame, an MFA from the School of the Art Institute of Chicago, and is an adjunct faculty member at IIT's Institute of Design.

back to top  Footnotes

DOI: http://doi.acm.org/10.1145/1897239.1897253

back to top  Figures

F1Figure 1. Character and Setting. By starting with a main character (our hero) and a specific setting, we create context for our design concepts. In this example, we are designing a mobile shopping app for Kevin, a 29-year-old Web developer from the Bay Area. Kevin is on the bus and headed to his favorite shop, Urban Outfitters, to pick up a new pair of jeans.

F2Figure 2. Narrative Arc. The storyline is constructed using sticky notes to allow for fluid reorganization and editing of the story. Kevin's shopping trip to the store, and the benefits of his mobile app, are developed through a series of plot points and details. From his arrival at the store to his purchase of jeans and subsequent lunch with a friend, our initial story is built with sticky notes.

F3Figure 3. Brainstorm. Design ideas are generated to help our hero achieve success—in this case, that means mobile app features to help Kevin find some new jeans, make an informed decision at the register, and connect with a friend over lunch.

F4Figure 4. Storyboards. The story comes to life as the narrative arc and design ideas are integrated and visualized. We're able to see Kevin realize the benefits of our design concepts and achieve success—buying jeans and meeting a friend for lunch.

back to top 

©2011 ACM  1072-5220/11/0100  $10.00

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

The Digital Library is published by the Association for Computing Machinery. Copyright © 2011 ACM, Inc.

Post Comment

No Comments Found