FeedOtter Logo Standard
Bottom Swoop SVG

How to Use Story Mapping to Improve Website Navigation and Architecture

Written by
Amanda
Published on
January 21, 2019

What is story mapping?

Story mapping is just what it sounds like: a map that tells a story. The story it’s telling is that of a user’s experience with your product. It was developed by Jeff Patton and gives development teams the ability to visualize a user’s journey through a product from start to finish, and from simple to complex.

The “map” is arranged by horizontal and vertical axis; the first horizontal row shows the most basic steps taken by a user, and each subsequent horizontal row adds different layers of complexity to the user journey.  The vertical columns represent the implementation of the product and are usually arranged by priority. The map is typically color-coded and made available to anyone on a product team.

In fact, the more people that work on it the better to discover glitches or areas that need improvement. Here is an example of a typical story map:

story mapping

Image 1: Story mapping example with post-its

Story mapping is great because it puts the focus on the user experience, which oftentimes gets sent to the back burner in favor of product features and other more pressing details. They help teams prioritize better to ensure that what the customer ends up with is valuable. The end product should be a holistic view of the entire customer experience, ideally devoid of any gaps or problems.

Story mapping focuses on user experience and website navigation is one of the most important aspects of user experience, so these two things go hand in hand. A little background on why website navigation is so essential:

Your website is your way to communicate your product to your users; if you were speaking to them in person, you would take care to be clear and concise, straightforward, and to the point. We’ve all had experiences where we’ve been in conversation with someone only to have them go off on some tangent, subsequently causing us to lose interest and become distracted. You don't want this to happen on your website, and it’s much easier for communication to be interrupted online as opposed to in-person when both channels are present.

Instead of using speech to tell your brand’s story, your website uses navigation. You may not have thought twice the last time you clicked on a little hamburger menu, but chances are the website designer(s) spent a good amount of time debating which type of icon to use.

That’s because if your website’s navigation is done poorly, the line of communication between company and user will be severed, and the user won’t get the product or solution they’re looking for. Additionally, navigation is essential to SEO. Search engines pay attention to how users behave on websites, and they factor that into their rankings. If you have a high bounce rate because your users are lost on your site, you’ll see that reflected in your rankings.

How Do You Use Story Mapping to Ensure Your Website is Optimally Designed?

First, get a team together. Gather stakeholders who have different backgrounds and specialties, but who are all invested in the final product.

Then, create a list of all the tasks you think a user will need to go through in order to carry out a specific action, like submitting their contact information on a user form or making a purchase. These tasks will make up the first row of your story map.

Next, break each action down into smaller details. This is where navigation comes into play. If a customer is going to make a purchase, how will they get to the checkout screen? Will they scroll down, or open a new window? Will there be drop-down menus or buttons to click? Should you link text, and if so, where?

You can, and should, bounce ideas off your team members and use their expertise to come up with the best, and most flawless, route. Ask yourself questions like, “Is this the most logical route to take?” and “Will this design aid or distract the user?”

Story mapping is great because maps are not set in stone (many are created with post-it notes). If you look at the final product and decide some of the steps don’t seem optimized, swap them out for other ideas and reevaluate.

This should be a collaborative process that involves rewriting and rearranging details again and again until everything fits. No one expects it to be perfect the first time around.

story mapping on Cardboard

Image 2: Story mapping to improve design and navigation

Someone on your team should be versed in web design best practices, so if that person isn’t you consider checking out this article to learn some tips about web design that will hopefully boost your conversion rate.

In addition, FeedOtter offers this guide for the 7 best story mapping programs to use in case post-it notes aren’t your thing!

How do you plan to incorporate story mapping into your business? Comment in the section below!

Image 1: netcentric.biz

Image 2 and feature image: cardboardit.com

Recent Articles

How to Find Your HubSpot RSS Feed URL: A Quick & Easy Tutorial

When it comes to an all-in-one sales and marketing automation platform, few can compare to HubSpot. HubSpot has set an outstanding precedent for being the leading inbound CRM— from nurturing leads, to sending emails, to tracking customer communication and tickets, to workflow automation, database management, creating a website and unique HubSpot RSS feed URL for […]

Read More
How Genesys Scales and Automates RSS Content Distribution Globally with FeedOtter

Background Genesys® is the global leader in cloud customer experience and call center software solutions to thousands of organizations of all sizes and levels of complexity worldwide. Headquartered in California, Genesys has more than 5,000 employees across the world and delivers more than 70 billion remarkable customer experiences in over 100 countries every year. Similar […]

Read More
20 Resources That'll Make You Better at Email Automation

Email automation is a cornerstone of any great marketing program, especially when done right. The right tools and resources help you cut down on hours of time spent doing manual tasks, freeing your schedule to focus on higher-priority projects. And, as we approach 2021, there certainly is no shortage of email automation resources. But how […]

Read More

FeedOtter Can Help You Automate Blog and RSS Email

Promote your content and increase revenue from website traffic.
REQUEST A DEMO