As a designer, there is nothing like the energy that comes from an initial kickoff with a new client. Clients visions can be overwhelming yet exciting as they eagerly spill out their advantageous ideas during that first meeting. Our job as designers is not to just create a beautiful product, but a practical one as well. You don’t know how many times I want to build the client their sexy transformer Ferrari, however, there are a few factors at play: time, money, and user needs. User story mapping is a method that our designers at Mobomo have been implementing on projects, we rely on this method in order to best organize and prioritize our client’s ideas and features.
What is User Story Mapping and its Benefits?
User story mapping is a collaborative and hands on technique; organizing and grouping user tasks on post-it notes. It’s a cheap activity that helps showcase the bigger picture of your product. It is fun to get all parties involved rather than being lost in words, documents, or spreadsheets. Moreover, everyone get’s a vision and expectations are on the same page – win win.
The goal of user story mapping is to discover your core tasks and functionalities needed to achieve the user’s objectives. You will be able to see what areas you are missing as you go through the tasks. As you go through your tasks this is when you work with your team and stakeholders to prioritize your functionalities from “must have” to “nice have”. From working with your internal team to figuring out difficult and time management for each sub-task and break them later into phases to build out your roadmap. Once the site is mapped out all parties will have a better sense how the product works and set anticipation on what is expected for delivery.
It’s never too late to start
I completed my first user story map in the middle of a project because it was hard to see the bigger picture of the product. We tried screenshots, feature priority spreadsheets, Trello boards, and requirement documents. However, they all failed because no one was able to see the bigger picture. I was fed up of digging into documents, so I ordered post-its and painted three walls with post-it notes. As a result, everyone on the team could see how all the competes flow together, we were able to prioritize, backlog, and plan toward a better MVP.
How to Get Started
Step 1: Gather Your Materials
3in x 5in Post-It Notes in multiple colors – $7.30 @ Amazon
First you will need some post-it notes, preferable larger ones. I suggest getting the multiple colored 3×5 post-it’s to give you more space to write larger and mix colors for categories and functionality. However, if you can only get your hands on the standard size ones that okay.
Chisel Tip Sharpie Markers – $4.99 @ Amazon
Next, you will need a nice dark thick marker. I recommend the sharpie chisel tips because it of the thicker lines make it easier to view from a distance. The cheapest sharpie set is the multiple colored pack of 4 markers for $5. For some reason a set of two black sharpies are over $5.. I don’t understand their pricing logic.
Blue Painters Tape – $3.59 @ staples (Optional)
An optional material that you might want is any time of painters tape. This will help you create rows to build out roll out phases. Painters tape will not damage your walls and more for giving to move around. Also, it gives helps tape up any stubborn post-it notes that will not stick.
A large wall or window
Last, you will need a large area(s) to start stick(ing) all the tasks you need. I suggest selecting an area from your or client’s office that you can leave up for a long period of time. You might need multiple walls depending how large your project.
Step 2: List Out Your User Tasks & Features
After you gather your materials, spend 5 to 10 minutes writing out as many core user tasks and functionalities you can on each post-it. Think of it this way, you are more or less putting ideas to paper. Depending on what part of the process you are in, this knowledge is taken from proposals and ideas collected from your kick off, or anything you discussed in wireframes or designs. Don’t worry about trying to think of everything at once, this is just a quick brainstorming session. You will quickly see some missing features that were not discussed. Many times on boarding or logging is overlooked.
Example:
Say you are building an email application. You would start writing down all the basic and core functionality. Some post its might be straightforward while others might be very specific functionality or just wild ideas.
Read a message
Reply to message
Forward a message
Sign In
Create an Account
Search for key message
Snooze functionality
Creating folders
Sent a Message
Delete a message
Add an attachment
See what’s been reviewed
Receive a notification
Step 3: Group Your Tasks/Functionality
After you have all your ideas into post-its it’s time to organize them into similar groups/themes. To do this, start placing your ideas on your wall into various groups. The benefit of sticky notes is that they can easily be moved around. Some functionality/tasks might overlap, which is fine. Just create another post-it and place it in each category. Don’t worry about it being perfect at this point. Some groups might be on their own, while others will be full of functionality, which is fine. When it comes down to groups, this will eventually become the pages that you will need to design.
Example:
Let’s use the same example as above with our email application, I start grouping the tasks by the actions that will be taking place. Anything that dealt with reading or replying to a message would be involved in viewing your inbox page. In past experiences, I learned it is better to split creating an account from signing in. Mainly because you don’t know just yet what information a user will need to set up an account and how to get them started. Therefore, you will have an area dedicated for that section.
Sign In
Receive a notification
See what’s been reviewed
Read a message
Delete the message
Reply to message
Forward a message
Snooze functionality
Send a message
Add an attachment
Create an Account
Search for key message
Step 4: Label The Categories
After you categorized them in unique groups, use another color post-it to label each group by the theme. You can label it as simple as the name of the or tasks you are trying to complete.
Example:
Using the example of our email application, group similar tasks and functionally together. I group all the actions of responding to an email together. I also separated creating an account and login because from previous experience, creating an account can be multiple steps, which you don’t know what’s involved.
Onboarding
Create an Account
Login
Sign In
Managing Your Inbox (Inbox)
See what’s been reviewed
Read the message
Notifications
Receive a notification
Taking Action to a Message (Message)
Send a message
Add an attachment
Delete the message
Reply to message
Forward a message
Snooze functionality
Searching
Search for key message
Step 5: Organize it into a story
After you determine the names of your categories, it’s time to order them into a story of how a user will use your site. To do this, order each category left to right on your wall on by path a user would use them. I always talk out loud as I walk through how a user enters the product to complete the primary task to completing subentry tasks like settings. For the email example, I would start with creating an account to, viewing your inbox, to receive notification, to taking action on that message, to later search for that message.
Step 6: Prioritize It
- At this point you start to realize your ideas for the project are big and you only have a short time and money to complete all these.
- Under each category prioritized what you and the stakeholders feel it’s necessary to nice to have. The top being a must have for the project to function out of the gate to nice to have. The goal of this it to ride the phrase “well it’s all important”-
- There might be some features and pages you know are “nice to have”
- After you have this organized and mapped out on your wall it’s time to break some of the features into phases. I always like to bring the technology team in to bring insight on some of the functionality you want. Some ideas might be simpler then originally thought or more complex. They will help you gage what is doable in a your time line.
- I like to bring out the painters tape and draw 2 parallel lines under the categories, and mark each rows as MVP, phase 2, and backlog.
- From there as a team, you organize what is necessary and build a simple product to launch a deliverable where we can roll in additional features into phases.
- As a result you create a product roadmap! Now your project managers know what’s ahead, your developers already have a sense of what is coming so they can start planning it, designers know what you expect from the beginning of the project, and know what you need to ask users about features if it’s necessary or not.
Step 7: Maintain it and Reference It
Learn More About Story Mapping
I had personally never heard of user story mapping until this book “User Story Mapping” it definitely helped me understand and organize the chaos of building a project.
We are experts in design and strategy, get in touch and let’s talk about your project.
