Half the Blank Page: Storyboarding for Product Design

Turn blue sky ideas into a clear product vision, one frame at a time.

How do you tackle the early stages of a new product idea? How can you avoid jumping to conclusions and ignoring the impact of your customer’s context? Storyboarding is an oft-overlooked and critical step in our evolving multi-device design toolbox.

In September 2014, I became the third employee on a secret project at Amazon that turned out to be the recently-launched Echo Look. At the beginning, our tiny but ambitious team was faced with a true blue-sky scenario: Design for an entirely new product category.

New product design is an exciting opportunity, but it changes the scope of our design process. Instead of researching existing products and focusing on iteration, our design conversations must focus at a higher level: on context of use, user habits, and problem solving.

Early on, it became clear that I’d be spending a lot of time sketching. It was far too early for digital work, especially since digital work ends up being critiqued for typography, alignment, and color. We needed to focus on the deeper “why”: “why should this product exist?”

At the start, this challenge was intimidating. After some early mind mapping and some rudimentary interaction model proposals, the empty sheets still taunted me. I couldn’t help drowning in the details at that level. The reality emerged that the use cases emerging from our ethnographic research required storyboarding first.

Are storyboards appropriate?

When deciding whether my user stories are good candidates for storyboarding, I apply these metrics:

• The story should be focused on one or more users of the product, not the product itself. If you don’t know who your user is, it’s too soon for storyboards.
• Never show more than 3 screens in one sequence — if you’re showing a long series of screens, you’re either jumping to solutions too fast or you’re ready for wireframing.
• The user’s context should usually change over the course of the story. If the user stays in one place the whole time, then you’re better off doing single environment sketches, not a storyboard.
• The storyboard should make the user’s objective clearer OR the storyboard should highlight potential interaction cliffs and pain points. (Example: switching from voice to controller on Xbox.)

Sample frames from a portion of my first Day 60 storyboard for the Echo Look. These frames highlight an interaction cliff: the customer changed clothes, so their phone was set down. The customer retrieves the phone to review the shot. Note the use of color/clothing to indicate passage of time, and gender-neutral depiction of the customer.

Your product design storyboards have three primary roles:

1. Set the stage: Provide all stakeholders with a common understanding of the current customer problem, the context in which your product will be used, and the effect you hope your product will have on your customer’s life
2. Start the debate: Generate discussion amongst your team about the biggest risks, weaknesses and interaction cliffs your product faces. Make sure you’re investing in the biggest challenges early on.
3. Gain support for the cause: Earn the support of stakeholders by helping them to empathize with your customer and the problems your product is trying to solve — possibly helping them project themselves into the customer’s shoes. Convince them that your proposed product will satisfy a genuine customer need or desire.

Once created, you don’t have to abandon your storyboards when your product receives a green light. Our Echo Look product storyboards were the rallying point for all new team members as they came on — a way to immerse themselves in a shared vision for the product.

“But I’m not an artist!”

A fine art degree is not a prerequisite for product design storyboarding. I’m trained in design, not fine art. Your storytelling skills are more important than your art skills, especially at the early stages. And if your art is TOO well refined early on, it might actually backfire. I’ve seen more than once a stakeholder recoil because an overly polished (or overly optimistic) storyboard creates the impression that the idea is beyond their input or feedback.

Your greatest challenge will be knowing when to stop. When you have JUST ENOUGH detail to move forward. My storyboards weren’t successful because they were perfect. They were successful because they were ready on short notice, and they told our story effectively and honestly in a way that invited discussion.

Elements of Story

While I sometimes joke about my work time spent “coloring with markers”, there is actually a great deal of influence, subtlety and decision-making that goes into the choice of each frame, setting, and caption.

Which moments are you showing, and why?

How has your user’s emotional state changed since the last frame? Their context?

In the first stage I’m essentially designing stories, so I draw heavily on my improvisational experience. We provide our improv 100 students a simple framework for story. CROW stands for Character, Relationship, Objective, and Where. This is an entire subject on its own: if you’d like to learn more, check out my post “Catching CROW: Storytelling for UX Design”.

Without CROW, your storyboard may miss its mark, and often will focus too much on the implementation and not enough on the user context. Remember, this is human-computer interaction… and almost all of the other deliverables will focus on the computer. Keep this deliverable focused on the human element as much as possible.

Not a Fairy Tale

Storyboards don’t have to show happy paths. It’s tempting to jump straight to the happy ending where all of your customer’s problems are solved, but are you really exposing the reality of the situation? Are you exploring the ways you might make things worse?

On the Echo Look, I used storyboarding to call attention to potential risks and issues. When we realized the camera would potentially be wall-mounted, OOBE became an issue. In my storyboards, I made sure to depict our customer having to connect the device to Wi-Fi and test it before moving it to its final location. I also drew the power cord in to every frame to emphasize the fact that it could not be battery powered and wireless.

These frames were part of our first exploration of the Echo Look’s OOBE, which was necessary to determine the industrial design considerations we’d need to build into early prototypes. Note that the cord is prominently drawn, to call attention to a potential friction point in setup.

On Windows Automotive, we relied on storyboarding heavily to ensure we were always thinking in the context of the vehicle. Many of the initial storyboards were simply marker on Post-Its — remarkably low-fi. But the act of dividing the story into discrete beats often forced work on the difficult context switches much earlier in the process, where they were much less risky. And when we needed the storyboards for broader storytelling, we hired production artists to convert them, and turned them into animatics.

Raw Post-It note + Sharpie storyboard frames I used to hash out a multi-environment, connected-device scenario for Windows Automotive. Again — not great art. Just enough to tell the story, quickly.

Rather than running away from the scary challenges in your scenarios, run forward and embrace them. Have those difficult conversations up front. When Jeff Bezos reviewed those Echo Look pitch storyboards, he could see we weren’t afraid of facing those difficult questions. Tackling them with him led to great feedback — and a green light for prototyping.

Shorthand sketching

There were some lessons learned quickly. I started out inking the captions on directly before reviewing the storyboards with anyone, but found there were too many text-only corrections. So, I got correction tape (better than White-Out for thin paper like this, and cleaner) and I also began attaching the captions with a Post-It to start, reserving space for the caption to be inked later.

The goal is to allow my viewer or reader to project themselves into the user’s shoes, which becomes more difficult as a character becomes more fully rendered.

To save time, and to capitalize on the principles best described in Scott McCloud’s Understanding Comics, I keep my users very generic in frame:

• A circle for the head, with no neck.
• A separate, bold angular body — not unlike a bathroom icon.
• Hands like mittens — fingers only in closeup.
• Just the slight curve of a butt to distinguish front and back from the side.

This saves time, but it also changes how the boards are perceived. It allows me to keep the users gender neutral and prevents me from drawing unnecessary features which might interfere with the viewer’s ability to empathize.

Some further tricks:

• Add hair to clearly distinguish front from back OR to distinguish multiple people in a single frame
• Add facial features to indicate sleep or direction of gaze.

For complex environments or poses, steal shamelessly. A quick image search on Google will give you more than enough watermarked images to draw inspiration from. Print them to trace if you have to, or just do your best freehand attempt. There are certain stock frames you’ll get very good at; like a hand holding a phone or a person sitting on a couch.

I also rediscovered very early on how important strategically deployed color is to the art of visual storytelling. Some of my techniques:

• When working with a single user, a change of clothing (as simple as a different shirt color) can indicate the passage of time in days or from evening to night.
• Color also directs the eye and adds depth, making the scene easier to picture.
• Use crosshatching instead of solid black where it occurs, because the black tends to be overwhelming otherwise.

Even though color is useful, don’t add it wantonly — figure out what the color is doing for you. Is it helping to indicate the same character in multiple frames? Is it calling attention to the focus of the frame? A status change? Sometimes I’ll do entire boards with just one or two punch colors and a grey to add some shadows where it helps break up an image. Each new color you add provides diminishing returns, so choose carefully.

The goal is to keep your use of color as strategic as possible — let’s avoid Lisa Frank storyboards.

Half the blank page: a practical process

The Echo Look demanded large-scale, agile storyboarding. I created literally dozens of storyboards that depicted a variety of use cases strung end-to-end for rationalization in context. Key frames often required multiple quick iterations.

Step 0 is planning. Decide on the theme for this storyboard. I started with use cases that came from ethnography and brainstorming, and grouped the related ones to get my storyboard outlines.

When you’re ready to go:

1. Slice a pile of printer paper in half.
2. Use one sheet for some pencil thumbnails to settle on beats and environment layout.
3. Grab a Sharpie and ink the image for the first frame, leaving space for a caption
4. Write the proposed caption on a Post-It and attach it to the B&W frame
5. Repeat steps 3/4 as needed for each frame to complete the draft
6. Review draft with product manager, make changes as needed
7. Ink the captions
8. Add color as needed
9. Scan in finished panels
10. Add panels to storyboard binders

Each frame averages about 10–15 minutes all told, more if it gets redone based on feedback. But the early discussions on the B&W drafts can take hours at times, and will lead to many discarded frames and rearranged content. This is NORMAL.

Lengthy early debates surrounding your draft storyboards are NORMAL: it means your work is starting the right discussions.

The storyboards, once completed, were placed in 5.5″ x 8.5″ binders with individual sheet protectors. This way, I could easily remove the sheets and spread them out on a table to review without worrying about handling the fragile paper. If we had a large group, just review the scanned PDF. And the binders at that size fit in a larger purse or laptop bag easily — they can be toted across campus or into awkward spaces where projectors and monitors won’t work.

Escalating to high fidelity

Though storyboarding by hand is a powerful tool early on that forces high-level conversations, it is not a silver bullet. When higher fidelity is desired, Powerpoint (or Keynote, if you prefer) are a powerful tool.

One technique I’ve used to kickstart high fidelity prototypes is to use stock footage backgrounds and place temporary placeholder sketches over them. As you either find appropriate stock footage or stage your own photos, you can upgrade or replace the images quickly.

Selected portfolio frames from early storyboards for Alexa notifications. LED and audio design were our biggest stakeholder questions, and a slide deck tool allowed use to express these ideas — and change them — quickly. When the ideas solidified, we spent the time looking for appropriate stock footage or staging our own photos.

As an added bonus, slide decks provide additional tools, like easy color changes (a game changer for iterating on LEDs), audio embeds, and correctable text. When you’re working with an established product, you may prefer to start at this level of fidelity.

Share the artifacts broadly

I spent three solid months in the storyboarding phase (with other more production-focused UX work scattered along the way). By the time the product moved into production, those storyboards had been shown to dozens of managers, vice-presidents and SVPs, all the way through our CEO. The boards were humble documents, but they jump-started the right discussions. Because they’re humble, stakeholders feel empowered to provide feedback openly at the right level without getting drawn into details.

Meanwhile, the dev team used the storyboards as a north star to add context to deliverables. JIRA tasks and user stories were crafted based on single frames in the storyboards, and they were shown in context when discussing early implementation decisions prior to GUI availability.

Tell context-rich stories that build empathy

As we move deeper into the Internet of Things, this kind of storytelling will become more and more important. It’s not scalable to assume that customers will massively change existing habits just for the honor of using each new device. By truly examining the life and context of our users, we can find ways for the Internet of Things to insert itself seamlessly into existing habits, rather than continuously suggesting we add 15 more minutes each day for just 1 more device.

Next time you’re kicking off a project, grab a Sharpie, slice some printer paper, and see where it takes you. The worst that can happen is you start again on another half-sheet of paper. But you might just start an important journey into the ground truth your customer lives with every day.

Every great technology project should start with a compelling story.

The trusty tools that helped get the Echo Look from a big idea to a full-fledged product.

Cheryl Platz is currently the Design Lead for Microsoft’s Azure framework and marketplaces. During her time at Amazon, she was instrumental in the product design for the Echo Look and contributed significantly to the Alexa platform.

Ms. Platz will be embarking on a speaking tour of Denmark, Sweden and Norway in the fall — follow her on Twitter for future updates, or reach out to her at cheryl at cherylplatz.com to inquire about workshops, talks or keynotes.

This is an expanded version of a post originally published at blog.cherylplatz.com on March 5, 2015.