Case study: how I use Storyboards in a design process

If you are like me you read a lot about methodologies and best practices such as journey maps, jobs to be done, personas etc. and all of them seem extremely useful. But have you ever felt confused you don't use all of them in your process? Have you ever think "Something must be wrong with me, I don't use the methodology X, I should try harder :( "? 

The truth is all the people are different and designers also. Everybody has various talents and skills. One person can play a movie in his head, another is able to build a complex scheme, the third one easily formulates clear theses. 

It means that different methods suit different people. So you don't need to feel guilty because you don't use any methodology and think you are not professional enough...pfft. 

Say I don't use "Jobs to be done" approach though I know it's a useful thing. But I like storyboards and use them in practically all the projects. 

What do I like about Storyboards

The main thing in storyboards – everybody can easily understand them. Comic books are so popular among kids (and not only kids :)) for a good reason. You can show a storyboard to developers to explain how a feature should work, you can discuss it with a boss or a client as well – everybody will get it easily. 

The second advantage – your customer participates in a storyboard as a character. He faces difficulties, solves issues and reaches a happy ending (exactly, like in your favourite TV-series). It helps you to empathize with a customer and it is crucial for a designer.

You can read more about storyboards in a  Nick Babich article

Let's look at the example

Task: we have a website with jokes published on it. They are uploaded from different resources to admin panel where admins categorise and rate them. Admin panel already exists and looks like this: 

To make admins' life harder better team decided to add a gamification. Any admin (now there are 5 of them, this number can change but not dramatically) should be able to initiate one of the games: "Best joke", "Biggest groaner", "Most intellectual" or "Darkest joke".

After the game starts, each player gets 25 jokes and has to rate and categorise them. Then he has to select one joke that better fits the name of the game (e.g. most intellectual joke). When everybody finishes each player gets jokes opponents had selected to rate from 1 to 10 for how well they fit the name of a game. The joke with highest combined rating wins the game. 

Main points

I start with writing down main points of a task to view them later in order not to miss anything important.

In the meantime user's scenario starts to come together in my head. Just in time because the next step – is drawing a storyboard. I use a paper notebook and a pencil because it's the fastest way. Somebody likes digital tools – why not, it's your choice.

On this stage I formulate main ideas and find insights:

1. I got an idea to use emoji to indicate a game. I use a smiley in glasses instead of "Most intellectual" header. First of all, it's shorter, secondly – it's fun (a second block from the left).
2. I found alternative branches. E.g. at some point a game initiator needs to be able to kill a game (right top block); a player can win or lose in a game (right bottom corner); a player can wait for others players during the process (second block in a bottom row).
3. I understood that the user needs to confirm the choice of a joke because he can hesitate, click different jokes, change his mind etc. (left bottom block).
4. I formulated what emotions should a customer have at each step and how I can support or vice versa smooth it with the interface. A player is joyful when he starts a game, a little bit frustrated when he has to kill it, impatient when waiting for others, happy when won and doesn't have to be too sad in case of loosing.

Compare with main points we've written above

Oops... I've missed a huge part. Have you noticed? Honestly ;) I skipped blocks where a customer rates jokes selected by other players. No problem just take a pencil and draw two more blocks... done.

Prototype and a final design

And now we can move to a prototype. I almost always use a paper at least for first interface sketches.

What next – it depends. I build an interactive prototype in Balsamiq or Axure or make a final design in Sketch/Photoshop etc. Then test, improve, test again, improve... but it's a different story.

What if I can't draw?

And I can't dance a jig. Great news that neither of these skills is required for storyboarding, right? 

Any kindergarten alumn can draw such things: 

And basically, you need nothing else for a proper storyboard.

Summary

Storyboard – is not a must-have tool, somebody likes it, others – not. If you've read the whole article, it looks like you are interested in the topic, so you may love storyboards. Try to draw them yourself – it's easier than it looks and can give a great impact to your project. And I will be glad to add some fun to your serious work :)

Originally the article was published here