People working on laptops

UX Storyboarding the Introduction

by Nikita Verkhoshintcev

People use storyboarding in many areas, for instance, animation and movie production. But it’s a part of UX prototyping tools as well. In this post, I will introduce what is storyboarding in the world of user experience, it’s advantages and give you tips on creating your first storyboard.

Context

As all we know, UX is everything. Every single piece of information is the content, and everybody is a user. Our goal as user experience designers is to put these things in the right context. Understanding the context is the very important part of the successful design process. We cannot be sure that we truly understand it, nevertheless designing interfaces with the context in mind can improve the final results.

What is Storyboarding?

A storyboard is a graphic organizer in the form of illustrations or images displayed in sequence for the purpose of pre-visualizing a motion picture, animation, motion graphic or interactive media sequence. Storyboarding process was developed by Walt Disney in early 30s.So, the main purpose of the storyboard is to pre-visualize an interaction sequence.

In UX storyboarding is one of the rapid prototyping tools. It is usually used in the earliest stage of the design process. It’s a low fidelity prototype and it doesn’t require a lot of time in comparison to the other methods.

The main goal of storyboarding on this stage is to find out and describe the context of use. Also, it will help you define use cases, goals of the design, pain points, required steps, and how you will measure a success.

What should include the successful storyboard?

First of all, the core elements of the storyboard are tasks, people, what they do and how they communicate.Every storyboard should convey the following:

  1. The setting. People involved in a process, environment and task being accomplished.
  2. The sequence. What steps are involved? What leads someone to use the app? What task is being illustrated?
  3. The satisfaction. What motivates people to use this system? What does it enable people to accomplish? What needs does system fill?

Storyboarding tips

Most of the ideas I’ve gotten from Scott Klemmer – professor of the HCI class from University of California, San Diego. He has an online course on Coursera. Learn how to design great user experiences.

We know that storyboard should reflect the user, problem, motivation to use our system and, finally, satisfaction. With all these, storyboard shouldn’t be long.

Start with dividing the sheet into 6 sections. Each section will have its own scene.

One of my favorite tips is “star people”. If you aren’t proficient in drawing, this technique will allow you draw people fast and easy. You can also point their sight with the dashed line.

Example: Journey Planner App Storyboard

Here you can see an example storyboard, which I’ve created for the user experience course assignment at Coursera.

As you can see, this picture is a simple low-fidelity prototype.

In this story, the user had a problem (quickly check if there are any suitable buses), which motivated him to use the system. Finally, he solved his problem and was satisfied (he found that there is a bus in 5 minutes).With this kind of storyboard, it is easy to visualize an idea, define the context of use, and explain it to the stakeholders.

Now you know an example of the rapid prototyping method which will help you design with the context in mind. Hope the storyboarding will become the useful tool in your arsenal.

Nikita Verkhoshintcev photo

Nikita Verkhoshintcev

Salesforce Consultant

Senior Salesforce and full-stack web developer. I design and build modern Salesforce, React, and Angular applications for enterprises. Usually, companies hire me when complex implementation, custom development and UI is required.

Let's work together!

Contact us today and take your digital end-user experience to the next level.

Contact us