Should You Storyboard to Start UI/UX Design?

Pranatha
Simpul Technologies
3 min readFeb 3, 2020

Do you already know how to design an app or website? Or you come here to know how to start the UI/UX design process?

Or maybe you have a question like “I want to start designing a website/app, how do I get started?”

In this article I’m going to tell you about my design process, especially Storyboarding.

I had the opportunity to build new features for Fastvisa.us.

FYI Fastvisa.us is immigration solution designed to maximize efficiency so it will help the Law Firm’s business process.

To design this new feature I have to work with a team in the US, while I’m located in Indonesia. There are many challenges when getting started because this is my first time to worked with a team in another part of the world.

And also I don’t have any idea about immigration process in the US.

Like any other design process I started with research, trying to know who is FastVisa users and what the users want to achieve.

For me UI/UX design is solving problems so we need to know how our users will use our application. Therefore we need a storyboard.

What is a Storyboard?

Star Wars Storyboard, Empire Strikes Back. Photo by Matt Popovich on Unsplash

Basically storyboards were used by filmmakers or motion pictures production to help them visualize the story.

This is Pixar use storyboard to tell a story

Toy Story Storyboard

Why?

Why storyboard? Does that matter for us as a UI/UX designer?

After trying it I felt the benefits of using storyboards. Stories are the most powerful tools to deliver information.

Since I need to communicate with a team in the US, storyboards really help me.

Before use storyboards I feel very confused about user flow and have many assumptions.

The storyboards can help visualize how users interact with applications, so that we can explore user experience more.

There are the benefits use storyboards for UI/UX Designer:

  1. Visualization. We can illustrate the process, concept and idea because images are worth a thousand words.
  2. Eliminate assumptions. With stories you can tell to your team and get more feedback to tackle the assumptions.
  3. Emotional engagement. With illustration we can focus on a user flow and their problems. Since I used images I feel more engaged with users.
  4. Empathy. After more engage with our users we can feel more about them. I mean we can know more about their stories and relate more easily.

“But I can’t draw”

To create storyboards you don’t need to be able to draw. We should focus on stories to communicate.

You can use stickman to tell user stories.

Here are step by step to work with storyboards.

Start with plain text and arrows. With only plain text I can get started quickly, because I feel it is really hard to start when everything is still in my head.

You can use plain text and add some emoticons. Credit uxplanet.

After that you can add an emoticon smile or sadness, so you will more engage with users’ feelings.

Don’t stop, after that translate it into storyboard frames. It’s okay to use stickman.

Storyboard Frames

Go get quickly and tell it to your team.

You will get feedback and can improve the stories. Like I said before with this process you can eliminate the assumptions.

With this process I learn that iteration can help us improve how we solved users’ problems.

Note, if you have more than one user you should create storyboards for each user. So you will know the flow and problems from all of your users.

Conclusion

Storyboarding is an iteration process and tools to communicate with your team, so you can improve to help user problems. Visuals are great to bring a story to life.

--

--

Pranatha
Simpul Technologies

Startup Enthusiast who loved exploring real problems to create sustainable products that humanize humans