Page tree
Skip to end of metadata
Go to start of metadata

The User Story Map as the center of PM - UX Design collaboration

Collaboration between PM and UX is essential great designs as both skill sets strengthen each other. We rather have close collaboration between these roles than a lot of back and forth that costs a lot of time. Even with both roles collaborating closely, UX is still responsible for the usability and visual aspect of designs and PM for the functional aspect (what should the app do). 

A great tool for close collaboration between both roles is the User Story map (see example below). The user story map:

  • Shows the Steps in the User journey from left to right in the chronological order  for new users(grouped by Activities). Compared to a the user story list in the backlog this makes it easier to understand the context of the stories.
  • The steps are broken up into User stories per Version (the horizontal bands), with the most important stories on top. This allows for better prioritization: For the first version only those stories are chosen that provide the absolute minimum functionality to achieve the goal of the Activity or User Journey. 
  • By adding the Designs (for the next version) also to the board as they are created everything comes together: The overall user journey, the designs and the stories. (you won't find this in any story map examples online, but it's a very valuable addition). 
  • Optionally also comments and issues can be added to the map, to be processed later. 

Day to day process

During the Design sprint the PM and UX designer(s) work closely together on story map. Updating the map as they go and updating each other during meetings on their progress. During meetings draft items (i.e. (virtual) stickies) are place on the board that are then work on after the meeting in the respective tools (i.e. Jira, Sketch, Trello, etc). 

Tools for creating a user Story Map

Unfortunately no single tool exists that is able to automatically together designs from Sketch and User Stories from Jira and that allows all design team members to edit the map. The three recommended tooling options are:

  • Confluence is able to include both Jira stories and show Invision prototypes using a confluence plugin. See this example at the bottom of this page.. (recommended option)
  • A physical wall, where everybody manually adds their Designs and Stories. This can be a physical wall or a online wall like Realtimeboard. This might seem like a lot of work, but as this is an iterative process it's very doable. Both Stories and Designs should have an unique identifier above them so the team can always open the latest version in Jira/Invision. 
  • Same as above but wall is drawn in Sketch (or similar design tools like Figma). This will make life a it easier for the designer. For the PM this will still require duplicating stories to the Design tool (and a license for that tool). 
  • Two tools. The Designer  Steps and Designs in the design tool (i.e. sketch) , and the PM has the Steps and Stories in a story mapping tool like FeatureMap that syncs with Jira. Upside is no data duplication/updating, except for syncing the Steps. Downside is having to look in two different tool instead of one overview. Also any commenting will now happen in two tools. 


User Story Map example

For a ready to copy confluence template that I use myself, see this page:

User Story Map template.


Further User Story Map examples 

Below you will find a additional examples story map formats





Layouts - Demo images


Vertical Layout Template



Activities 

(Epics)

StepsStories - Sprint 1Design - Sprint 1 Stories - Sprint 2Stories - LaterIssues 
1Find Book

Browse Categories




2View Book




3Search Book




4Register & Login

Register




5Verify email




6Login

Facebook Login



















.


7CheckoutAdd / Select Address




8PaymentPay by Creditcard



9Pay using Paypal



10By by Invoice



11Check Order StatusView Orders




12View Order




13Return OrderRequest return




14Get return label




15





16





Horizontal Layout Template

ActivitiesFind Book

Register & LoginCheckout

Check Order Status
StepsBrowse CategoriesView BookSearch BookRegisterVerify emailLoginAdd / Select AddressSelect Payment MethodView OrdersView Order
Designs - Sprint 1


Stories - Sprint 1








Stories - Later




Login using Google



Issues









.



Register For Full Access

By registering I approve that ProductProcesses.co can contact me via email with login information and relevant updates. 

* indicates required