How to design user scenarios

March 05, 2020
how to design user scenarios

User scenarios help you understand your user and how they interact with your product. This post will show you how to bring scenarios into your wireframing process

Designers need to understand their users if they want to make products that people will use. By understanding them, you can help create solutions that help them achieve their goals. And when users are able to achieve their goals, they will want to use your product again.

Effortlessly design your own user scenarios in Justinmind. Download free.
Download Free

Think about it: if you don’t know a thing about your user and you create a web or mobile app and no-one visits or uses it, can you be surprised when it fails?

Millions are spent on research so that designers can get into the head of their users and create the best solutions. In this post, we’ll see how you can tailor your design to the user and how you can create a user scenario with Justinmind’s wireframing tool.

In fact, the Norman Nielsen Group found that spending just 10% of your development budget on usability can improve conversions by 83%, in their article on the ROI of usability.

One way to understand the people you’re designing for better is to develop and design user scenarios. User scenarios are an opportunity to learn. Since they take the form of a diagram and a brief story, they’re perfect for presentations, explanations and getting that vital stakeholder buy-in. It’s a win-win!

What does a user scenario look like?

As you can see, the scenario shows the user flow your user takes through your product. This is really useful for designers to understand and use because they can spark ideas, generate features and help refine any requirements going forward.

Another interesting characteristic of user scenarios is that they give us a bit of context related to the user and how they would come to use the product. They tend to include a bit of a story that could include something like this:

“Samantha is a student who has an important exam next week. She needs to find a platform that helps her manage her time between studying for the test and her other assignments for school, to reach her goal of passing all classes.”

A small observation: It’s unwise to try to create user scenarios that portray all users. Instead, be specific and base yourself on one user persona per user scenario. Check out our post on user persona templates for more details.

Another important distinction is that user scenarios, while often mistaken for user stories, aren’t quite the same. You can check out the full story on our post: Personas, scenarios, user stories and storyboards: what’s the difference?

Now, it’s all well and good knowing how useful scenarios are but let’s look at how you can design user scenarios in Justinmind so that your products are a success from the start.

How to design user scenarios using Justinmind

It’s possible to define your user scenarios right inside Justinmind. This easy to follow walkthrough will help you as you create your own interactive wireframes. In our example, we’re going to show you how to create a user scenario for someone who wants to buy something from an ecommerce app.

If you want to create your own ecommerce store before diving into this walkthrough, you’re in luck. We’ve already made one for you. Check out our post on how to prototype an ecommerce app. Now, on to the user scenarios!

Step one: Download and install Justinmind

Before we begin, download Justinmind’s website wireframing tool. If you’re new here, don’t forget to check out our free trial.

Step two: Create a new wireframe

When you have downloaded Justinmind, open it and start a new wireframe. You can pick whichever device screen you want.

Feel free to download our selection of free UI kits to enhance your wireframing prowess. They’re not necessary to do this walkthrough but a nice to have, just in case.

Step three: Define your own scenario

Depending on your workflow, you might create your scenario before you create your wireframe or after. It doesn’t matter how you do it in Justinmind.

As you can see at the top of the user interface, there are several modules, one of them is Scenarios. Click that. Now you’re in the Scenarios module. It looks just like the User Interface but with a limited amount of widgets available to you.

example of user scenario flow

You can click the ‘+’ button in the Scenarios palette to create a new scenario. Give it a name. On the left side of the user interface are the Components and Screens palettes. You can move them around to your own tastes, if you want.

how to create a new user scenario on justinmind

The components available are action, screen, decision, note and image. Any screens that you’ve made in your wireframe are available for you to drag from the Screens palette directly onto your Scenario canvas.


To show the flow of your scenario, you can click any screen on the canvas in the Scenario module. In the toolbar at the top is a ‘create transition’ button. Click this and then drag an arrow from one screen to the other.

Step four: Link your UI widgets in your scenarios

Thanks to our latest release, it’s now possible to link individual UI widgets.

But why would you want to link widgets? Well, imagine you’re trying to sell this idea to a key stakeholder. Getting stakeholder buy-in for UX is tough at the best of times. When you can explain user flows in a clear and concise way to a stakeholder, it makes explaining your world-winning idea much easier.

Remember, at any point you can click Simulate in the User Interface to see your wireframe in action. When in simulation, there’s a hamburger menu which contains all of your scenarios.

In the image below, we’ve linked the hamburger menu of the ecommerce app to a scenario, which shows all the possible scenarios the user can take from the homepage.


If you click on a widget which you’ve linked to a scenario, your stakeholder will understand what the next step is in the wireframe.

By linking widgets to your scenarios, the diagram will make much more sense and can prevent any confusion from people on your team who are maybe not as well versed in user experience design or UX design strategy.

In the User Interface module, when you right click on a widget and click ‘add link’, you’ll have the chance to create a new Event which connects that widget to a part of the user scenario, as you can see in the modal popup below.

linking user scenarios with justinmind

And that’s a user scenario for you! Everyone can see the steps that your user can take and what will happen depending on which action they choose.

User scenarios: advantages and benefits

User scenarios are a helpful way for designers to approach users in a structured way – similar to other methods, such as the Design Thinking Model. With user scenarios, designers are forced to put themselves in the shoes of users, to try to understand what drives them.

The way this happens is that creating a user scenario pushes designers to define users’ motivations. It doesn’t simply define what motivates them to use the product, but also their motivations throughout the entire experience with the product.

As designers, this kind of knowledge is worth its weight in gold – it opens the door for the sort of insight that helps create better products as well as more effective usability testing.

And they’re brilliant for non-designers because they break down any communication barriers by showing how current and alternative user flows might affect the product.

This, in turn, also helps test users by giving them a scenario they can picture themselves in. If they can place themselves in Samantha’s shoes, their behavior during testing will be much more realistic than if they had gone in cold.

Since they’re easily understood, it means that stakeholders can be more involved and this sort of participatory design creates a shared ownership of the outcome. What’s more is that everyone can communicate and leave notes inside Justinmind for an even smoother workflow during the crucial first steps in the product development.

Scenarios also remove the guesswork. You don’t need to assume what a user will do when they interact with your app. User scenarios reveal the dynamics of change and give you insight into how to design solutions.


Scenarios are a useful UX design artifact that can help you cultivate empathy for your user and design the best solutions for them. They can be used to figure out where to do usability testing and understand key tasks in a product.

When you map your scenarios intelligently to your users’ journey, you can create a user experience that they’ll want to repeat.

Rebeca Costa
In-house writer, usability enthusiast and patron of all sleep-deprived designers