Menu

Beta — We’re reformatting our articles to work with the new site, but this is one hasn’t been done yet; it may contain formatting issues. No need to report this. We’re working on it.

Injecting the Big Picture into Daily Design Practice

by Jared M. Spool
on June 20, 2012

I think designers can learn a lot from the Brothers Grimm fairy tale, Hansel and Gretel.
It’s a great story, but I’m really interested in the telling of the story.

Here’s a little experiment of what I mean: At your next design team meeting, give everyone
a sheet of paper and ask them to write down, in bullet points, the Hansel and Gretel
story. If you compare the bullets to each other, I bet you’d find them to be pretty
consistent from one person to the next, even though none of you had ever talked to each
other about it.

Now, what would happen if you asked the team to write down what your project’s overall
user experience will be? Would each team member come up with the same story that describes
the experience of using your future design?

In my experience, most teams can’t describe the big picture of what they’re working on
nearly as well as they can relate a children’s fairy tale that they haven’t thought about
in years. If they can’t describe it, how will they design to it?

Even if a designer can put words to the big picture of what they’re working on, it’s rare
the rest of their team can tell the same story. If they aren’t working on the same big
picture, how will they each produce something that works together seamlessly?

It’s a difficult tension: dealing with the day-to-day needs of the project while keeping
an eye on the overall strategy of what you’re trying to build. It’s more than just seeing
the forest from the trees. It’s trying to see the forest while you’re glueing leaves onto
branches. We often work at such a micro level that keeping track of the macro is
challenging.

Building a Story out of Scenarios

Going back to Hansel and Gretel, our knowledge of the story helps tie the whole thing
together. We can look at the moment when the two children encounter the gingerbread house
and understand its place in the plot. We know they’ve been lost for hours and are hungry,
which is perfect because now they’ve discovered a deliciously edible domicile. And they
haven’t quite encountered the house’s talented baker/builder with the creepy agenda. We
know what comes before and what comes after.

Scenarios are a great tool for threading together an entire story about our design. We can
create a series of scenarios which, when put together, talk about how we believe our users
will experience our designs, from the first moment to the last.

It’s not surprising that scenarios naturally work this way. They are borne directly from
storytelling. Normally, we use them as separate pieces to help us focus on a particular
function or feature. When we combine them together, we can see how an entire experience
starts to come together.

Starting Each Meeting With a Story

Sheer repetition is one reason so many of us are well versed in the Hansel and Gretel
fairy tale. All throughout our childhood, we heard the story told many times over. And
even though each telling was slightly different, with slightly different emphasis on
various pieces, we learned the basic premise over time.

For most projects, there’s no equivalent to that repetition. We talk about the overarching
goals and desires at the start, then immediately dive into the details, leaving all that
story behind.

We met a team that had assembled early mockups of their designs in a conference room. They
would act out the overall story, using the mockups at the right moment. We learned they do
this quite frequently, to see how everything fits together and identify key missing
elements. Each time, every team member is hearing that story one more time.

Another team has posted a large timeline of the users’ journey through the experience.
They created it in an workshop at the project’s kickoff. When they sit down together to
talk about a specific aspect of the design, they start by placing that discussion within
that timeline. They make sure they recite the entire timeline, so that everyone knows
exactly where they are, what came before, and what will come after.

Stories Based on Real Details Work Best

Even though fairy tales are complete fiction, the elements of the Hansel and Gretel story
resonate because they are so real. It’s not hard to picture dark and scary woods or a
Gingerbread house that looks good enough to eat (though probably not great to live in).

We can make our stories real by taking details from our user research. Those details work
best when everyone on the team has been part of the research process. Many teams we’ve
visited are now using real data items they’ve collected from visits to their users and
customers. They use real names and real needs.

One team, working on a system for reporting critical incident reports in drug trials, used
actual reports they’d collected on their research. The rich detail of these customer
reports has given them a huge dose of the reality behind using the designs. Knowing how
these reports fit into the lives of their users helps them keep an eye on the entire
pictures.

Sketching out the Story

It’s hard to talk about Hansel and Gretel without a mental image popping up with two kids,
in the woods, stumbling upon a house made of candy. That mental image helps us retain the
story we’re trying to tell.

One team we met regularly holds design studio workshops with the goal of creating mental
images of their users’ experience. Instead of drawing prototypes of the screens and dialog
boxes, they draw sketches of the users’ experience through the design. Then they compare
their drawings with that of their colleagues, followed up by another round to integrate
the neat ideas they saw in the other work.

Sketching something reinforces the visual images, which helps cement the story in our
head. Regularly coming back to the big picture and drawing a new version of the story,
with everything you now know about it, helps you understand how your thinking is changing.

(I do find it a little ironic to suggest people draw something we call the “big picture.”)

Prototypes as Evolving Plug-Ins

I recently saw a Pixar documentary that showed their design process. They start with rough
sketches of the story, which they put into a simple video, using the director and writer’s
voices for the characters. As the movie progresses, pieces of that video get replaced with
more refined art, voices from the real actors, and other elements that make it more real.

Through our design process, we are creating a variety of prototypes. In the earliest days,
they are just sketches and simple renderings. As we move through the project, pieces
become more refined. Eventually, we start to have finished products.

It’s simple to make a video of these prototypes as the user would experience them. Using
technology we probably carry in our pockets, we can quickly create a walkthrough of the
design. Then, as time goes on, we can simply insert more real pieces into the mix.

Watching and editing an evolving video of prototypes can help tell the story of what we’re
trying to do. Walking through the scenarios to guide that story (instead of describing the
features without use), we can remind everyone of what we’re trying to accomplish.

Making the Big Picture a Creature of Habit

By constantly injecting the big picture into our detailed discussions of our design, we
end up with a coherent design faster than if we’re all working without that idea of how
everything fits together. Finding ways to keep everyone understanding where we are in the
story isn’t difficult, but it does take constant attention. You’ll know you’ve succeeded
when it’s become a habit to discuss where you are in the forest.

Share your thoughts with us

What do you do to keep your team aware of the big picture while you’re deep in the
details? We want to hear your thoughts at the UIE Brain Sparks blog.

About the Author

Jared M. Spool is the founder of User Interface Engineering. He spends his time working with the research teams at the company and helps clients understand how to solve their design problems. You can follow Jared on Twitter at @jmspool.