How to Create a Compelling User Journey Map for your App

by | Jun 25, 2018

app user story

So, you have an idea for an app that is going to be a game-changer for your business. Now, it’s time to figure out where to start. Although we’ve already created resources on how to hire a software development agency, and the pros and cons of freelance developers, we wanted to share a helpful way to map out what you want your users to be able to do, to clearly communicate it to the people who are going to help you get it built: a user journey map.

 

What’s a user journey map?

 

A user journey map is an outline of how your users will interact with your app, and what it will do at a functional level. By mapping out your user journey, you are creating a timeline of the touchpoints that your user will have with your product. It’s a very helpful process when thinking through what kind of things you want your users to do in your app, and therefore what features you want to build.

 

What’s the difference between a user journey map and a wireframe?

 

A wireframe displays the overall look, feel, and design of the app, while a user journey map defines what the app’s functionalities are, and what you want the user to be able to do. We’ll use both terms while delving in to how to create a compelling user journey map. It’s best to start by creating your higher level map of the user experience before diving into a wireframe, which helps you map out how the features and elements will be laid out on pages within your app.

 

Why is a user journey map important?

 

Even if you have an incredible idea for an app, without a clearly laid out user journey, you might have trouble accurately communicating your vision to other parties (such as a designer, a developer, or an investor). With a user journey map, you can easily demonstrate your app’s functionality and express the value of your product to an external stakeholder.

When the time comes to communicate with a software development agency, freelancer, or no-code platform to get your app built, you’ll be able to effectively share what you want your app to do. This is going to offer big rewards in the long-term, like simplifying the scoping and pricing process, reducing confusion (and the impacts that can have on your timeline), and, most importantly, ensuring you get the product that you want. A user journey map helps to ensure that things aren’t left up to interpretation, and gets all of the stakeholders on the same page.

 

How can I create an effective user journey map?

 

When creating a user journey map, you should first identify your customer: This is where designing a set of specific buyer personas, or fictional descriptions of your customers based on real data, is especially critical. Make sure that your app is solving a pain point that your customers actually have. When you create your user journey, you want to be thinking about the experience from their perspective.

Let’s think about this within a specific example, such as the UberEats app. One of their personas might be a busy young professional. When using the UberEats app, that person wants to open the app, register quickly, search for meal delivery options by cuisine or amount of time to deliver, select a restaurant and place their order. They then want to track their order and provide a review at the end of the process.

 

What should my user journey look like?

 

User journeys can look very different depending on the individual app, but I set out to create an example graph after downloading the popular Mind Body app for the first time.

I mapped out the path I took below as a way to illustrate what a user journey could look like when concepting this app:

app user story, how to create an app user story

Below, you can see the screenshots as I opened the Mind Body app and registered for a class. The outlined user journey above are reflected in the actual user experience of the live app.

Screen Shot 2018-06-20 at 11.18.28 AM

1) Welcome to Mindbody, 2) Register, 3) Categories, 4) Book and pay now. And boom, now you’re well on your way to going to a workout class— and to creating an app!

You can use simple tools like powerpoint to outline your journey as we did above, or just use a pencil and paper or a whiteboard to sketch it out. There’s no right or wrong way, just do what works for you.

 

OK so I have my user journey map, how do I take the next step?

 

Once you have a general flow mapped out for your user journey, you can start going deeper into specific user stories that will help you build more detail. A user story is a simple framework that helps identify features and functionalities from the user’s perspective. It goes something like this:

As a , I want

so that <benefit, value>.

By using this structure, you can clearly and concisely demonstrate what each of your user types want from your application, and what specific features they will want to utilize. While your user stories may begin quite simply, over time they can develop more layers of detail. You can also add more detail to a user story “by splitting a user story into multiple, smaller user stories” and “by adding ‘conditions of satisfaction.” These conditions of satisfaction should be statements that will be true after a specific user story is finished.

When you brainstorm each functionality, you should consider which buyer persona you are targeting, what the function will actually accomplish, and why it is important for the overall app.

If we think about the UberEats example again, some of the user stories would look something like this:

  • As an UberEats diner, I want to search for meals based on type of cuisine.
  • As an UberEats diner, I want to track my order so that I know how long until my food arrives.
  • As an UberEats diner, I want to leave a review about the meal that I had to express my satisfaction / dissatisfaction.
  • As an UberEats diner, I want to be able to leave a custom tip for my driver.

According to Bill Wake, good user stories should follow the acronym INVEST – they should be:

  • I (Independent)
  • N (Negotiable)
  • V (Valuable)
  • E (Estimable)
  • S (Small)
  • T (Testable)

You can build your user stories in a word document, and just list them all out. When you hand that off to an agency or a designer, they’ll know what to do!

 

Ready to get more visual?

 

At this point, once you’ve mapped out your user journey map and user stories to help identify specific features, you may be ready to take your concept to an external agency or freelancer. Alternatively, you could take it one step further and start some basic wireframes to help lay out elements of your app. We’ve compiled a list of some great digital tools that can help you bring your idea to life quickly and easily in a more visual way. You can read more about the ins and outs of mobile app design here for more tips!

Balsamiq: Balsamiq is a rapid wireframing tool that allows you to generate different ideas and iterate quickly. It is featured in a web app, desktop app, and Google Add-on and allows you to build swiftly and easily and collaborate with other members of your team.

Moqups: Moqups is a wireframing and design tool that allows you to design, plan, prototype, and collaborate on an online design for your app.

Sketch: Sketch is a digital design toolkit for more advanced designers who need just a little bit of guidance. The application comes with many different sophisticated features, and may be more useful for designers who already have some experience under their belt.

Mockingbird: Mockingbird is a drag-and-drop web application that allows you to create a design for your app online. Like the other applications, it also has a collaborative feature and allows you to link different mockups together and preview them.

Now that you’ve created a user journey map, you can better communicate the value of your product to others, and get a more accurate estimate for your development.

The next step is figuring out how to find the best app development service for your business. Good luck, and feel free to get in touch if you’d like to consider Hatch Apps for your app development.

Start Designing Your Custom App

Start Designing Your Custom App