Simple way to design UX/CX with mind maps in MindMeister
There are plenty approaches to build customer journey maps and experience flows by using mind mapping tools, walls with sticky notes and sketches. I find mapping (as an approach)to be one of the most efficient, it is both fast and flexible. Below I am going to explain how to set up a useful mind map:
- Build a simple UX/CX map template
- Extend the mind map by connecting an inVision prototype, product requirement documents or any other link
Mind map for UX bird’s-eye view
For products with a lot of actors and complex ecosystem (customers, employees, partner apps, support system, back office tools, etc.) it is important to keep the connections working to avoid conflicts.
In many cases digital experience is not the same as the overall customer experience. Product designer has to think wider and predict what parts of the system will be affected by what’s done in the app.
Once the product changes it usually affects all or some parts of it. While the product evolves, things change quickly. A mind map appears to be one of the best tools to make a bird’s-eye view of those changes.
By adding scenarios after each customer’s action, we create a mind map hierarchy that helps design a customer journey. “Where is the customer at this point (location, screen)? What may the customer do here? What happens after the customer performed an action?”. The flexibility and speed of mind mapping allow to cover the whole system, not just the “app” reaction. 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
Below is a simple template of how to build a user flow which is visually understandable and useful for developers as well as anyone involved in product design. It came up by itself while working on different projects and is very simple and flexible.
Here is the template. (explained in details below)
- White nodes represent screens/physical locations
- Blue nodes are to show actions that can be performed on that screen/location. E.g. product page has a purchase action.
- Yellow nodes starting with IF are used to show conditions and scenarios
- Yellow nodes are also to describe what happens on the back-end, time delays or anything that user does not see but experience.
- Relationship arrows (green lines) are used to connect independent maps or jump over other nodes. E.g. an action in the customer app triggers events in the service/employee app.
Reasonably use emojis like ✉️ — for e-mails, ⏰ — to mark real time that may pass between different events, 💳 — to mark where a customer submit his payment details for the first time etc.
MindMeister: https://mm.tt/813918822?t=WuNM1EQedA
PDF: https://dl.dropboxusercontent.com/u/2029718/Customer_app.pdf
Keep it short
If your product is small and straightforward it may fit into one map. For bigger systems I would recommend keeping it shorter. Make one map that covers the whole system mechanics in general and add links to other mind maps that cover each part specifically. It is better to have several maps (for different parts of the system).
I usually build a mind map from the perspective of one type of a user (that might be a customer, employee, back office etc). That means the most detailed UX flow will be related to that type of user, and not to all the parts involved, otherwise the map will become overcomplicated.
Handling edge cases and covering all possible things that may go wrong is good, but focus on the successful scenario first, than go through negative scenarios.
Example
Lets say we have a suits rent startup called SuitRent. Experience may look like this: Certain events guided customer to SuitRent site (I won’t touch it), customer opens the site, finds a suit, gets the suit delivered by Uber, wears it, sends it back within next 48 hours via Uber. I have not dived deep into possible scenarios (like returning the suit), lets say service works everywhere and all the time. Here is a basic CX map based on the template above:
MindMeister: https://mm.tt/813944995?t=MrNYEdd6DB
PDF: https://dl.dropboxusercontent.com/u/2029718/SuitRent.pdf
Add wireframes or mockups from inVision or Dropbox
MindMeister supports external links attached to any node. This is basically the main benefit of this app. Once you are done with first wireframes you can add a link to a node. Now each node on your map has a corresponding wireframe.
In case you make an inVision prototype you can add a link to each prototype page on each mind map node (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 map as a reference will be able to both follow the map and click through the prototype.
Use with your team
Maps will allow to present UX visually understandable before you make any visual design. If you work with developers closely you should share and review the map with them as soon as possible.
Thanks to Irena Zablotska and Andrii Glushko for helping me with this article.
