A Simple Way to Design UX/CX Using Mind Maps

This is a guest post by Eugene Rudyy, co-founder of design group Keepa, UX, UI and product designer at Fairy, Toast, Rove.me and more. This article was originally posted on Eugene’s Medium Blog.

There are plenty of approaches UX and CX designers can choose to use for their UX design process, in order to build customer journey maps and experience flows. 

Simple UX / CX Design using mind maps with MindMeister

Having tried planning out routes on walls with sticky notes and making sketches, I’ve found mind mapping user journeys to be the most efficient UX design process. Mind mapping is fast and flexible so in this article, I’ll share with you how to set up a mind map with which you’ll be able:

  1. Build a simple UX/CX map template
  2. Extend the mind map by connecting with an InVision prototype, product requirement document or any other link
  3. Share your customer journey with the rest of your team.

Mind Mapping for a UX Bird’s-Eye View

For products with a lot of actors and a complex product process (customers, employees, partner apps, support system, back office tools, etc.) it’s important to keep the connections working to avoid conflict.

In many cases, digital experience is not the same as the overall customer experience. The product designer has to think wider and predict which parts of the system will be affected by what’s done in the app.

Once the product changes, it usually affects some or all parts of it and while the product evolves, things change quickly. As a result, mind mapping is one of the best ways to achieve a bird’s-eye view of the UX design process.

Bird's Eye view for UX design process with MindMeister

Next, designers should create a hierarchy within the mind map by adding scenarios after each customer’s action. This hierarchy will design a customer journey, covering questions like:

  • Where is the customer at this point (location, screen)?
  • What might the customer do here?
  • What happens after the customer performs an action?

The flexibility and speed of mind mapping enables the designer to cover the whole system. As a result, not only the “app reaction” is planned for during this UX design process. For example, once a customer signs up, the user is created on the back-end, a welcome e-mail is sent to the customer, a ticket is created for the back office team, the customer is logged in and enters the dashboard etc.

Build a Template for Your UX Design Process

Below is a simple template of how to build a user flow into a UX mind map. The mind map is a useful resource for developers or anyone else involved in the product and UX design process, once edited for the specific project.

I’ve used the template while working on a number of different projects so you should be able to easily adapt it for your own UX design process:

The UX / CX Design mind map is broken down as so:

  1. White nodes represent screens/physical locations
  2. Blue nodes show actions that can be performed on that screen/location e.g. product page has a purchase action
  3. Yellow nodes starting with IF show conditions and scenarios
  4. Yellow nodes describe what happens on the back-end, time delays or anything that user does not see but may experience
  5. Relationship arrows (green lines) connect independent maps or jump over other nodes e.g. an action in the customer app triggers events in the service/employee app.

You can use emojis to show stages visually too, like ✉ — for e-mails, ⏰ — to mark the time that may pass between different events, ? — to mark where a customer submits their payment details for the first time etc.

Tip from the MindMeister Team: To use the template UX mind map, simply sign into MindMeister (or sign up free) and maximize the map via the ‘map actions’ icon. Once maximized, click again on the ‘map actions’ icon and choose to clone the map. From there, edit or embellish the topics to make the map suitable for your product or project and UX design process.

Keep it Short

If your product is small and straightforward, your user journey should fit onto one map. For bigger systems and more complex UX design processes, try to keep it more succinct. Make one map that covers the whole system mechanics in general and add links to other mind maps that cover each part specifically. It’s better to have several mind maps that cover different parts of the UX design process, than one hugely complicated map.

I usually build a mind map from the perspective of one type of user (that might be a customer, employee, member of back office staff etc). That means the detailed UX mind map will be related to only that type of user and the product parts involved in their journey. This prevents the map from becoming too convoluted and you can create a few maps to cover every part of the UX design process.

Handling edge cases and covering all possible outcomes that may go wrong is good. However, focus on the successful scenario first, then go through any negative scenarios after.

UX Example: SuitRent Service

Let’s say we have a suits-to-rent startup called SuitRent. A customer experience could look like this: Certain events guide a customer to the SuitRent site, the customer opens the site and finds a suit, so gets the suit delivered by Uber, wears it and sends it back within the next 48 hours via Uber. 

I’ve not dived deep into possible scenarios (like having difficulty returning the suit) as let’s say the service works perfectly. Here is a basic CX design mind map for SuitRent, based on the template above:

Add Wireframes or Mockups from InVision or Dropbox

MindMeister supports external links attached to any node. This is one of the main benefits of the app when using it to map out a UX design process. Once you’re done with your first wireframe, add a link to a node so that each node on your map has a corresponding wireframe.

Attach prototypes via links within MindMeister mind map for UX design process

If you create an InVision prototype, you can link each prototype page to the corresponding mind map node. To do this, make sure you add the InVision public link, not the link from the address line of your browser. This pairing is extremely useful as those who use the UX mind map as a reference will be able to follow your envisioned UX design process via the mind map, and then click through to the relevant prototype.

connecting prototype with during UX design process with MindMeister

Use with Your Team

Mind maps allow you to present UX in a visual and understandable way before you go forward with any visual design. If you work with developers closely, create, share and review your mind map with them as soon as possible. This will help to ensure that your UX design process is agile.

Tip from the MindMeister Team: For a guide on how to share your mind map using MindMeister, check out the MindMeister collaboration page.

Simple UX design process with with MindMeister

Thanks to Irena Zablotska and Andrii Glushko for helping me with this article. All illustrations were provided by Irena Zablotska. Find more of Irena’s work via zablotska.com.

So there’s Eugene Rudyy’s run down of how to use MindMeister for UX/CX design.

In summary, Eugene recommends these five steps for creating a UX/CX mind map:

  1. Use a mind map to achieve a bird’s eye view of different user journeys
  2. Keep each mind map succinct, basing one on each type of user journey e.g. team employee
  3. Embellish Eugene’s template mind map with the physical locations, scenarios, and actions relevant to your project or product
  4. Include links to your external prototypes e.g. via InVision and DropBox. People viewing your mind map can then easily see what you had envisioned for that stage /step
  5. Finally, share your mind map with your team, via the MindMeister collaboration mode.

Have any questions? Leave them in the comments and if you try Eugene’s template mind map, let us know how you get on!

Create User Journeys with MindMeister

Get Started