Design maps are a tool for collaboratively planning the solution to a user story. Integrating developers into the design process produces user-centered solutions that are both creative and technically-aware.
- Bring user research closer to design and development.
- Give designers insight into development challenges and limitations.
- Empower developers to make decisions based on user needs.
- Provide an ongoing resource for discussion around a design.
Timing and Ground Rules
A design mapping session should happen just before the development team starts planning a new set of functionality. If the development team is working in sprints, try using design maps to kick off each sprint planning session. At this point, you should have a set of user stories identified for elaboration.
Ideally, the person leading this session should be someone who has done user research and can communicate representative personas to the team. However, anyone on the team can drive a good mapping session, especially if a reality map has been built beforehand. Make sure the team understands these ground rules before the session starts:
- At least one developer on the team must participate. Include the whole team if it’s practical.
- Everyone must write at least one sticky note to identify a question, comment, or idea.
- Everyone must contribute to sketching, not just the most artistic person in the room.
How to Build the Map
Step 1: Identify a user story and related personas.
Focus on a single user story or small set of user stories with related functionality. Provide the team with a persona so they can better understand users’ needs related to the story. You may need to provide additional personas if the workflow involves interactions with other people. Lean personas are a great way to quickly communicate this information to the team at the beginning of a session.
Step 2: Create a user experience map.
As with any user experience map, first identify the steps that the persona would take to accomplish the goal defined by the user story. Then elaborate on questions, comments, and ideas for each step.
Step 3: Sketch solutions for each step.
Under the sticky notes for each step, sketch ideas for solutions. Encourage the team to start with high-level sketches to explore a variety of concepts, then gradually add more detail to narrow down to a single solution. Link the sketches below each step to show how the user progresses through the workflow identified above.
Next Steps and Ongoing Use
The design map is not the end of the design process—it should provide just enough information for the team to start more detailed planning. Both developers and designers have more work to do following the session:
Developers leave the session and start backend planning (e.g.: database schemas and class skeletons). It’s common that they will encounter a few things that weren’t accounted for in the mapping session, so it’s important that the other team members are available to gather quickly to discuss any changes. Butcher paper is a great medium for design maps because the developers who participated in the session can carry the whole map to the planning session for reference.
Designers leave the session and formalize the sketches with higher-fidelity wireframes or prototypes. There are typically still important design decisions to make such as element positioning and detailed interactions between states. Designers should get feedback from developers on this work and keep it up-to-date if new decisions are made during development. These materials can also be used to start doing usability testing on the new features before they are even built.
Keep the original design map in a central location so it can become a gathering place for the team to discuss ideas or problems during the implementation of the design.