Using Mind Maps for UX Design: Part 1 — Sketch Mapping

Mind maps are diagrams that visually illustrate how words, phrases, ideas, or concepts relate to a central key word or phrase. They are a visual thinking tool that helps to structure information and identify connections between items.

To create a mind map, you simply start with a central idea, and branch out from that idea with each branch representing a topic related to that idea. Sub topics can be made in an infinite number of levels building off of each branch. It’s typically best to use colors and imagery in a mind map to help link together ideas in a way that’s easy to understand and remember.

Mind maps are powerful tools for User Experience professionals. In part 1 of this post series, I’ll explain how you can use mind maps to create “sketch maps.”

Sketch Map Example

What are sketch maps?

Sketch maps are mind maps of, well, sketches. They are diagrams that organize ideas in a tree-based structure where sketches are used as the way to illustrate those concepts. Others have used similar approaches under different terms (sketchboarding, storyboarding, or simply just mind mapping that happens to include sketches). I’m using the term “sketch map” to emphasize the use of the mind mapping technique. Whatever term you want to use, the idea is to make connections, generate new ideas, and identify gaps by leveraging the benefits that come from sketching: exploring and refining ideas quickly and visually.

How to create a sketch map

1. Sketch out your ideas on paper or use a computer, phone, or tablet. Any tool can be used as long as the end result is a low-fidelity sketch.
2. Identify if you want to create a paper-based or digital sketch map.
3. If creating a digital sketch map using tablet or computer software, take a picture of sketches that you make on paper, or save screenshots of sketches made on a computer, phone, or tablet. Import your sketches into a mind mapping program that supports media imports.
4. If creating a paper-based sketch map, assemble paper sketches or print out sketches made using a digital tool.
5. Write down a central theme or idea in the center of the map
6. Branch out from the central theme with topics and sub topics, each containing a sketch and label representing the concept. Assign each main branch a unique color for easy differentiation. As you start to generate new ideas, add those to the map.
7. Connect related ideas using lines or arrows to help you visualize related themes or elements that have a cause-and-effect relationship.

Types of sketch maps

There are different ways in which you could approach UX challenges using a sketch map:

• Layout approaches per page/process: Use the map to explore different layout options for each page or process within your experience (as seen in the example at the beginning of this article). Think about interaction methods and the high level ways to organize information.
• User flows: Arrange your sketches to illustrate different flow options throughout an experience. For example, navigating through a registration process from start to finish. The map could be used to explore different options for a single flow or to visualize several different flows across the experience. User flows do not necessarily have to mirror the architecture of an experience.
• Site maps: Use sketches to visually represent different areas of the experience. The sketch map can be organized into a site map that illustrates different levels of a site (or app, service, etc.) hierarchy. As opposed to a text-based site map, a visual site map with sketches can help you identify different approaches that will work across different levels of the experience.
• Micro-interactions: Use a sketch map to help you explore different approaches to micro-interactions, or contained moments that impact a single use case. For example, how to best design error messaging, settings, controls, etc. A map could be focused on a single micro-interaction or several related interactions to help identify connections across an experience.