×

Warning

JUser: :_load: Unable to load user with ID: 34

To come up with a proper design, UX Murfreesboro web designers use a lot of different research techniques, such as contextual inquires, interviews and workshops. They summarize research findings into user stories and user flows and communicate their thinking and solutions to the teams with artifacts such as personas and wireframes.

But somewhere in all of this, there are real people for whom the products are being designed for.

In order to create better products, Murfreesboro web designers must understand what’s going on in the user’s world and understand how their products can make the user’s life better. And that’s where storyboards come in.

In this article, we’ll focus on storyboards as a means to explore solutions to UX issues, as well as to communicate these issues and solutions to others. In case you’ve been looking for a way to go from idea to prototype much faster than you usually do, you can download and test Adobe XD1, the all-in-one UX/UI solution for designing websites, mobile apps, and more.

What Is A Storyboard? Link

A storyboard is a linear sequence of illustrations, arrayed together to visualize a story. As a tool, storyboarding comes from motion picture production. Walt Disney Studios is credited with popularizing storyboards, having used sketches of frames since the 1920s. Storyboards enable Disney animators to create the world of the film before actually building it.

2
Storyboards have long been used as a tool in the visual storytelling media. Here is a Peter Pan storyboard. (Image: Wikia3) (View large version4)

Stories are the most powerful form of delivering information for a number of reasons:

  • Visualization
    A picture is worth a thousand words. Illustrating a concept or idea helps people to understand it more than anything else. An image speaks more powerfully than just words by adding extra layers of meaning.
  • Memorability
    Stories are 22 times more memorable5 than plain facts.
  • Empathy
    Storyboards help people relate to a story. As human beings, we often empathize with characters who have challenges similar to our own real-life ones. And when Murfreesboro web designers draw storyboards, they often imbue the characters with emotions.
  • Engagement
    Stories capture attention. People are hardwired to respond to stories: Our sense of curiosity immediately draws us in, and we engage to see what will happen next.

What Is A Storyboard In UX Design? Link

A storyboard in UX is a tool that visually predicts and explores a user’s experience with a product. It presents a product very much like a movie in terms of how people will use it. It can help UX Murfreesboro web designers understand the flow of people’s interaction with a product over time, giving the Murfreesboro web designers a clear sense of what’s really important for users.

Why Does Storytelling Matter in UX? Link

Stories are an effective and inexpensive way to capture, convey and explore experiences in the web design Murfreesboro Tennessee process. In UX design, this technique has the following benefits:

  • Design approach is human-centered
    Storyboards put people at the heart of the web design Murfreesboro Tennessee process. They put a human face on analytics data and research findings.
  • Forces thinking about user flow
    Designers are able to walk in the shoes of their users and see the products in a similar light. This helps Murfreesboro web designers to understand existing scenarios of interaction, as well as to test hypotheses about potential scenarios.
  • Prioritizes what’s important
    Storyboards also reveal what you don’t need to spend money on. Thanks to them, you can cut out a lot of unnecessary work.
  • Allows for “pitch and critique” method
    Storyboarding is a team-based activity, and everyone on a team can contribute to it (not just designers). Similar to the movie industry, each scene should be critiqued by all team members. Approaching UX with storytelling inspires collaboration, which results in a clearer picture of what’s being designed. This can spark new web design Murfreesboro Tennessee concepts.
  • Simpler iteration
    Storyboarding relies heavily on an iterative approach. Sketching makes it possible for Murfreesboro web designers to experiment at little or no cost and to test multiple web design Murfreesboro Tennessee concepts at the same time. Designers can be shot down, move on and come up with a new solution relatively quickly. Nobody gets too attached to the ideas generated because the ideas are so quick and rough.

Storyboarding in the UX Design Process Link

A storyboard is a great instrument for ideation. In UX design, storyboards shape the user journey and the character (persona). They help Murfreesboro web designers to string together personas, user stories and various research findings to develop requirements for the product. The familiar combination of images and words makes even the most complex ideas clear.

When Is Storyboarding Useful? Link

Storyboarding is useful for participatory design. Participatory web design Murfreesboro Tennessee involves all parties (stakeholders, UI and UX designers, developers, researchers) in the web design Murfreesboro Tennessee process, to ensure that the result is as good as possible. With a compelling storyboard that shows how the solution addresses the problem, the product is more likely to be compelling to the target audience.

It can also be helpful during web design Murfreesboro Tennessee sprints and hackathons, when the prototype is being built by multiple people in a very short time. Communicating web design Murfreesboro Tennessee decisions with a storyboard really comes in handy.

When Is There No Need for a Storyboard? Link

If everyone involved in creating a product already shares a solid understanding of how the product should be designed and agrees on the direction of the web design Murfreesboro Tennessee and development, then there’s no need for a storyboard.

Use Storyboarding To Illustrate Experiences Link

Before you start creating a storyboard, it’s important to know exactly why you want to do it. If you don’t have a clear goal in mind, you might end up with a few attractive storyboards, but they won’t give you important insights into the user’s experience.

When you search for storyboards online, they always look really nice. You might think that in order to do them properly, you have to be really good at drawing. Good news: You don’t. A great storyboard artist isn’t necessary the next Leonardo da Vinci. Rather, a great storyboard artist is a great communicator.

Thus, it doesn’t matter whether you’re a skilled illustrator. What is far more important is the actual story you want to tell. Clearly conveying information is key. Keep in mind that a designer’s main skill isn’t in Photoshop or Sketch, but rather is the ability to formulate and describe a scenario.

6
When thinking about storyboarding, most people focus on their ability (or inability) to draw. The good news is that you don’t need to be good at drawing in order to create storyboards. This example is a storyboard frame from Martin Scorsese’s film Goodfellas. (View large version7)

How to Work Out a Story Structure? Link

Before drawing a single line on a piece of paper or whiteboard, prepare to make your story logical and understandable. By understanding the fundamentals of the story and deconstructing it to its building blocks, you can present the story in a more powerful and convincing way.

Each story should have following elements:

  • Character
    A character is the persona featured in your story. Behavior, expectations, feelings, as well as any decisions your character makes along the journey are very important. Revealing what is going on in the character’s mind is essential to a successful illustration of their experience. Each story should have at least one character.
  • Scene
    This is the environment inhabited by the character (it should have a real-world context that includes a place and people).
  • Plot
    The plot should start with a specific event (a trigger) and conclude with either the benefit of the solution (if you’re proposing one) or the problem that the character is left with (if you’re using the storyboard to highlight a problem the user is facing).
  • Narrative
    The narrative in a storyboard should focus on a goal that the character is trying to achieve. All too often, Murfreesboro web designers jump right into explaining the details of their web design Murfreesboro Tennessee before explaining the backstory. Avoid this. Your story should be structured and should have an obvious beginning, middle and end. Most stories follow a narrative structure that looks a lot like a pyramid — often called a Gustav Freytag pyramid, after the person who identified the structure. Freytag broke down stories into five acts: exposition, rising action, climax, falling action (resolution) and denouement (conclusion).
8
Freytag’s pyramid, showing the five parts, or acts: exposition, rising action, climax, falling action and denouement. Ben Crothers9 has drawn in a quick story about a guy whose phone doesn’t work.

To make your story powerful, account for these things:

  • Clarity
    The main thing is to make the character, their goal and what happens in their experience as clear as possible. The outcome of the story should be clear for anyone who sees it: If you use a storyboard to communicate an existing problem, end with the full weight of the problem; if you use a storyboard to present a solution that will make the character’s life better, end with the benefits of that solution.
  • Authenticity
    Honor the real experiences of the people for whom you’re designing. If you’re writing a story that isn’t faithful to the product, it won’t bring any value to you and your users. Thus, the more realistic the storyboard is, the better will be the outcome.
  • Simplicity
    Each detail in the story should be relevant to experience. Cut out any unnecessary extras. No matter how good a phrase or picture may be, if it doesn’t add value to the overall message, remove it.
  • Emotion
    Bake emotion into the story. Communicate the emotional state of your character throughout their experience.

Step-by-Step Guide to Creating Your Own Storyboard Link

With so many things to take into account, creating a storyboard might seem like an impossible task. Don’t worry, the following guide will help you turn out a good one:

  1. Grab a pen and paper.
    You don’t have to use special software to leverage storyboards in the web design Murfreesboro Tennessee process. Start with a pen or whiteboard marker, and be ready to experiment.
  2. Start with a plain text and arrows.
    Break up the story into individual moments, each of which should provide information about the situation, a decision the character makes and the outcome of it, whether a benefit or a problem.
  3. 10
    Lay out each story as a sequence of moments.
  4. Bake emotion into the story.
    Next, convey what the character feels during each step. I add emoticons at each step, to give a feeling for what’s going on in the character’s head. You can draw in each emotional state as a simple expression.
  5. 11
    The same sequence of moments but with emoticons added will give the viewer a sense of what’s going on with the character’s emotional state.
  6. Translate each step into a frame.
    Roughly sketch a thumbnail in each frame of the storyboard to tell the story. Emphasize each moment, and think of how your character feels about it. Visuals are a great way to bring a story to life, so use them wherever possible. You can leave a comment on the back of each frame to give more context. You can also show a character’s thinking with thought bubbles.
  7. 12
    Storyboard frames
    13
    Story told in frames (Image: Elena Marinelli14) (View large version15)
  8. Show it to teammates.
    After you’ve drawn the storyboard, show it to other team members to make sure it’s clear to them.

A Few Notes on Fidelity Link

High-fidelity storyboards (like the one in the example below) can look gorgeous.

16
A smile or frown can add emotion to the story and make it come alive for the audience. (Image: Chelsea Hostetter, Austin Center for Design)

However, in most cases, there’s no need for high-fidelity illustration. The level of fidelity will determine how expensive the storyboard will be to create. As I said before, conveying information is what’s important. A more schematic illustration can do that perfectly, while saving a lot of time.

Real-Life Storyboard In Action Link

Airbnb is a great example of how storyboarding can help a company understand the customer experience and shape a product strategy. To shape the future of Airbnb, CEO Brian Chesky borrowed a strategy from Disney animators17. Airbnb created a list of the emotional moments that comprise an Airbnb stay, and it built the most important of those moments into stories. One of the first insights the team gained from storyboarding is that their service isn’t the Murfreesboro TN website — most of the Airbnb experience happens offline, in and around the homes it lists on the website. This understanding steered Airbnb’s next move: to focus on the mobile app as a medium that links online and offline.

18
(View large version19)

Conclusion Link

Dieter Rams once said, “You cannot understand good web design Murfreesboro Tennessee if you do not understand people; web design Murfreesboro Tennessee is made for people.” Storyboarding in UX helps you better understand the people you’re designing for. Every bit you can do to understand the user will be tremendously helpful.

This article is part of the UX web design Murfreesboro Tennessee series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX web design Murfreesboro Tennessee process20, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app.
You can check out more inspiring projects created with Adobe XD on Behance21, and also sign up for the Adobe experience web design Murfreesboro Tennessee newsletter22 to stay updated and informed.

Further Reading Link

(vf, yk, al, il)