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

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.

Identify if you want to create a paper-based or digital sketch map.

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.

If creating a paper-based sketch map, assemble paper sketches or print out sketches made using a digital tool.

Write down a central theme or idea in the center of the map

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.

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.

I am a User Experience Designer with a passion for making people’s lives better through design. I have helped over a dozen organizations obtain a competitive advantage by delivering great user experiences across desktop, mobile, tablet and other channels.

Excellent! Thanks for sharing this. Do you use Balsamiq for exercises like this, or is there a method that you prefer?

Shajith

Good article about mind mapping, well explained!! Thanks for writing this article, waiting for part 2.

bear893

I’ve found a great mind map tool called Lucidchart. It’s a simple, yet powerful web based tool.

inspireUX

I use a combination of things. I love using iThoughts HD on my iPad, which is my primary way of mind mapping. I also use MindNode Pro on my Mac. It’s best to use a tool dedicated to mind mapping and not just a flow-chart tool. For the sketches, I either sketch on paper or sketch using an app like Paper on my iPad. The sketches in the example in the post were from Paper.

Can you say more about… “User flows do not necessarily have to mirror the architecture of an experience.”

inspireUX

Sure. I was aiming to distinguish user flows from a site map (the term “architecture” certainly extends beyond that, so I should have been more specific). User flows describe how users complete key tasks. These tasks may involve several areas of an online experience, or could extend into other channels. For example, a flow could outline a product research process or completing a transaction. Mind mapping can help you explore how a user can approach these tasks without thinking about how you’re ultimately going to architect navigation paths.

chutch15

Would you equate your user flows with use cases?

inspireUX

More or less, yes, with slight differences. I think of user flows as what is typically depicted as a standard flow diagram to show how a user completes a specific task (e.g. “check the weather in my area”). They’re more focused on the steps that the user takes to complete that task via the interface or across channels. Use cases usually include system backend responses that wouldn’t be as useful to depict in a sketch map.

bear893

Great post here about mind mapping. My favorite tool that I’ve found is Lucidchart. It is web based, integrated with Google Drive and enable you to have real time collaboration with your team.

Wow such a helpful post Catriona. I recently designed my first iPhone app, and going through different layout possibilities definitely took up a lot of my time. There’s no doubt this way of organizing one’s ideas is the way to go.