Creating the first product storyboard

How do you create a product storyboard without any prior product experience? That’s a question I was asking myself (and Gavin). 🤔

I know how to make a vision board (goals, dreams, and the like). And moodboard for photography projects and sessions (heck, I even wrote an article on it). But, a product storyboard? No clue.

With some advice from Gavin I dove right into the process, and finally got to use my Surface Slim Pen 2 that I was so adamant at adding to my tablet purchase at the time.

Here’s the process I followed:

Think about the user persona:

At this point our user research is still in progress so I used my belief of who the user is — a testable hypothesis. The product isn’t live so there are no users to gather information on.

But I used a competitor’s user reviews and social media followers as a guide to help inform who the user is until we get more information ourselves.

If you’re doing something similar, you may find these resources helpful:

Write an overall user context

How did the user come across our product?
Where are they at the time of using it?
Why did they decide to try the product?

I wrote a brief description of their day — how they came across our product and why they decided to try it.

Focus on one product feature

I’m a creative who would happily try and cover everything in one go if I could have it my way — I have all the different ideas, after all! But it doesn’t work like that for a product storyboard that needs a clear path from one user click to the next.

If my storyboard is all over the place, Gavin won’t have a clue where to start. Not ideal. 😬

The most useful resource for me was this Storyboard for Beginners in Product Design (relab.academy) article, and particularly, the featured video:

I picked one product feature I was pretty sure I want the product to have and started by mapping out the user journey from logging into the app, to locating where to find this feature, to using it, and returning back to the home page.

I used Milanote to sketch my ideas (with a smart pen) and text boxes to write context and description of each stage. It looks like this:

I used Photopea to add a quick blur

If you have a tablet, no doubt it’s easier to be able to draw with a smart pen. But if you don’t, you can still draw with a mouse or just drag simple shapes and add text.

The simpler the design the better because it opens up ideas for different designs (instead of being too intricate already at this stage, and then having to do a full redesign later on).

Use already existing UX design ideas

There's no need to start from scratch when it comes to generating simple app design ideas; it's not necessary right now. You can explore what already exists and see how you can build on that.

Let’s say, you want to draw a login page for your app idea, but you don’t know where to even begin. You may think it’s just drawing some boxes and that’s it, but even then you may feel stuck on where to put them.

Instead of spending too much time trying to think of the best design idea, look up already existing login pages so you can quickly draw inspiration and move to the next stage in your storyboard.

Speaking of the login page, I found some of these resources useful:

Don’t overcomplicate it

For all the perfectionists out there, I know it’s hard not to spend hours perfecting every little thing. But, it’s just the beginning of your product — you don’t have to spend all of your time and energy on drawing the most perfect ✨ login button you have ever seen.

Lots of research and testing is yet to come, and no doubt things will change over time. That’s why I reined in my perfectionism a little and tried to create something that another person would understand without having to read my mind.

My drawn lines may not be perfect (they definitely aren’t!), but at least they get the point across and helps give an idea on how we can turn it from a wriggly, imperfect sketch to a living, breathing function.

I sent what I had to Gavin and was really concerned I completely missed the point or went down a wrong path, but so far, so good 🤞:

What’s next?

More user research interviews
Shortlist some thoughts of designs or design ideas
Do a similar storyboard for another product feature

← Back to the blog page