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. For the best and recommended format please see this example/template page.
Layouts - Demo images
Vertical Layout Template
|Steps||Stories - Sprint 1||Design - Sprint 1||Stories - Sprint 2||Stories - Later||Issues|
|1||Find Book||Browse Categories|
|4||Register & Login||Register|
|7||Checkout||Add / Select Address|
|8||Payment||Pay by Creditcard|
|9||Pay using Paypal|
|10||By by Invoice|
|11||Check Order Status||View Orders|
|13||Return Order||Request return|
|14||Get return label|
Horizontal Layout Template
|Activities||Find Book||Register & Login||Checkout||Check Order Status|
|Steps||Browse Categories||View Book||Search Book||Register||Verify email||Login||Add / Select Address||Select Payment Method||View Orders||View Order|
|Designs - Sprint 1|
|Stories - Sprint 1|
|Stories - Later||Login using Google|