Home > Prototyping and wireframing > 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 prototyping process

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 prototyping 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.

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 is spent on research so that designers can get into the head of their users and create the best solutions.

In fact, spending just 10% of your development budget on usability can improve conversions by 83%.

Nicole Cole postulates that most startups fail because founders would rather talk and try to prove how much they know, rather than listen and learn.

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, they’re perfect for presentations, explanations and getting that vital stakeholder buy-in. Win-win!


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

DOWNLOAD FREE


What does a user scenario look like?

A simple user scenario looks like this:

user-scenario-example-justinmind

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.

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.

Since they’re easily understood, it means that stakeholders can be more involved and this sort of participatory design gives created a shared ownership of the outcome. What’s more is that everyone can communicate and leave notes inside Justinmind, the all-in-one prototyping tool, for an even smoother work fow.

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.

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 user scenario for someone who wants to buy something from an ecommerce app.

If you want to prototype your own ecommerce store before diving into this walkthrough, you’re in luck. We’ve already made one for you.

Now, on to the user scenarios!

Step one: Download and install Justinmind

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

Step two: Create a new prototype

When you have downloaded Justinmind, open it and start a new prototype. You can pick whichever dimension or device you want.

Oh, and we’ve got responsive prototyping built right into Justinmind for even better cross-device prototyping.

Feel free to download our selection of free widgets to enhance your prototyping 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.

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.

creating-a-new-user-scenario

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

user-scenario-arrow-justinmind

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 five: 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 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 prototype in action. When in simulation, there’s a hamburger menu which contains your scenarios there.

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.

creating-a-new-scenario-in-justinmind

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

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.

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-widgets-in-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.

Conclusion

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.

download_free

Steven is the web editor at Justinmind

2 comments

Your email address will not be published. Required fields are marked *

  • What if you want to do user flows prior to creating a high-fidelity prototype with all the screen-specific interactions added? Sometimes (often!), before creating a prototype, I want to test out the logic of a user flow.

Download Free