Building Interactive UX Maps

Our visual-design guide for UX Maps shows how to approach creating high-fidelity maps, regardless of the design tool. This article explores the use of user-interface (UI) design software, like Figma or Sketch, for building high-fidelity, interactive UX maps. Maps based on research that focus on a product or service's current (as-is) state, like customer-journey maps or experience maps, work best as interactive rather than static maps because interactivity allows you to showcase specific user quotes and actions.

Pros and Cons of Interactive Maps

Interactive maps are not appropriate for every single project. Here, we discuss some of their advantages and disadvantages.

Advantages of Interactive Maps

• Utilizing photos and videos. Showcase photos and videos from user research directly into your map. Overlays can be used to progressively reveal media evidence related to a specific finding.
• Improving comprehension. Interactions can make a large, complex map easier to understand if done effectively, especially if you are comparing different user journeys on one map. For example, filters can help stakeholders sort by a specific user persona or theme, and overlays can reveal evidence that might help contextualize a finding.

Downsides of Interactive Maps

• Time-consuming. Consider your map's scope, project budget, and timeline before adding interactions. For instance, your time might be better spent elsewhere if you already have a polished, noninteractive map and only a few more days left before presenting it to stakeholders. Similarly, you will probably waste time and money if the map’s stakes are low and you build it from scratch.
• Hard to create. It takes time to learn any design software. If you currently don’t use a UI-design software or aren’t comfortable with its advanced features, your deliverable may be hard to use and cause frustration. This goes for any software, from Figma to Sketch. Stakeholders have power over your project, and incoherent interactions might influence them negatively.

Until you feel comfortable with your chosen UI-design software, save yourself time, money, and a headache by creating a noninteractive UX map in software you are more familiar with. A good UX map with no interactions can be just as effective. Learning new software takes time, so take advantage of free resources like Figma’s YouTube channel, ProtoPie School, and Sketch Guides & Courses to build up your skills.

Steps to Building Interactive Maps

Once you’ve determined that you want to build an interactive UX map, here are some steps to get started. In this example, I will be using Figma, so some features might look different or not be available in other software.

1. Consolidate findings and data into a low-fidelity map. Before you start building a high-fidelity interactive map, gather all your data and synthesize it in the form of a low-fidelity map. This step is essential. Starting with a low-fidelity map helps you document which findings relate to which pieces of evidence. For example, if you have the finding “Users are worried about being able to afford new software” and want to show video evidence from a specific research participant, include a link to the video in your low-fidelity map or provide the name of the video file to reference.

   

2. Establish a visual design system. This step should be straightforward if you have an existing design system, like a branding style guide or component set. Using or modifying an established system can save time and give you a starting point for adding interactions. However, suppose you don't have one or prefer to create a system just for maps. In that case, you should identify essential elements such as typography, color, iconography, as well as components (e.g., buttons, filters, accordions) and their corresponding states. If you use Figma, take advantage of its text and color styles, variables, and component library to create and publish your assets for easy integration. While it may be tempting to skip this step, creating libraries can save you time for future projects and expedite the design process.

   

3. Group key elements of your map by theme or type (e.g., videos, photos). If you use Figma, its section tool can help you categorize the different elements in your map. Make sure that all necessary elements are labeled and easily accessible. If you don’t use Figma, spend time organizing your file within the capabilities of your chosen software to save you time and energy searching for items.

   

4. Create a structure using auto layout. To start creating your map, establish a structure by setting up auto layout frames. These frames will serve as the skeleton of your map and should include headers, swim lanes, quadrants, and other necessary map components. (The components will depend on the type of map you're building.) In this step, try not to focus on adding exact content but on making a flexible structure for that content to live in. Using auto layout ensures that elements snap into place easily and adjust appropriately when content is added. Auto layout is particularly helpful for expandable elements like accordions since it allows elements below the accordion to be pushed below accordion text and not remain in a fixed position.

   

5. Add your actual content. After creating a foundation, add all your content. Include exact text and swap out random placeholder icons for relevant ones. For example, if you used placeholder text that says, “Write a theme here,” replace that text with an actual finding, like “Defining parameters for a new plan.” Similarly, if you were using a random icon to build components, update those placeholders to make them relevant to your map using the Swap Instance feature in Figma. Adding all content before establishing interactions makes it easier to make changes to the map, especially if you need to duplicate pages to get specific interactions to work.

   

6. Prototype your desired interactions. With all content ready, switch to Figma’s prototype mode and connect your interactions. If using a premade design system, some connections might already be made and speed up your process!

   

7. Test and troubleshoot. Once satisfied with the visual design and interactions, make sure everything is working properly by testing the map with at least one other person. I recommend testing out interactions as you make them so that you can identify simple mistakes quickly. Doing a final test with someone else before distribution can help catch any last-minute bugs. Naming conventions are important in Figma, so if there are issues with components not working, go back to the base component and check the naming on each state and layer.

   

Creating Templates

As previously mentioned, building an interactive map from scratch can be time-consuming. But a first map is a great foundation for a template. You’ll have a frame structure already created and you’ll only need to remove the content from your first map. One more thing to add is prototype specifications, so that others understand the parts or limitations of the template. Components and styles for a design system can be published to your team’s library for easy access later.

Conclusion

Evaluate the pros and cons of creating an interactive UX map to avoid wasted time and to get the most out of your efforts. When incorporating interactions into a map, consider your audience. Make sure that navigation throughout the map will not overwhelm your stakeholders. High-quality interactions can increase stakeholder engagement and make research more accessible.

Our free journey-mapping template is available on the Figma Community.

Downloads

Steps to Building Interactive UX Maps (PDF)