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
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.
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.
What does a user scenario look like?
A simple user scenario looks like this:
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.
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.
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.
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.
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.
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.
- The ultimate mockup tool to design websites and mobile appsOur powerful mockup tool lets you create and share highly interactive mockups, while getting feedback on every aspect. Your whole team can benefit from enhanced collaboration and seamless developer-designer handoff. And best of all? It's absolutely free to download.