Template Creation
Project Description
The project was centered around improving an existing user journey map template. This case study goes into detail about the errors of the first template and what steps were taken to improve it from a UX and design point of view.
My RoleUX Design & Research
|
Timeline2 Days
|
ToolsFigma
|
Old Template
Before we can look at the improvements, we need to know what a user journey means in user experience design and what parts are necessary within a template.
A journey map lists the steps and emotional state a user experiences when using a specific product or service. What do they feel? How does that impact the product they are using? Does the product help them? What came before and after? These are all questions that a user journey map answers.
This helps design teams to empathize with the user and design a product for them in mind. Journey maps are a great storytelling tool that helps communicating current or future user experiences in a visual and easy to understand way.
With that in mind, let's analyze the template in terms of content first.
A journey map lists the steps and emotional state a user experiences when using a specific product or service. What do they feel? How does that impact the product they are using? Does the product help them? What came before and after? These are all questions that a user journey map answers.
This helps design teams to empathize with the user and design a product for them in mind. Journey maps are a great storytelling tool that helps communicating current or future user experiences in a visual and easy to understand way.
With that in mind, let's analyze the template in terms of content first.
Content Improvements
Header Section
The header section features a user picture, their name and bio as well as a scenario and their goals & expectations. The goal of a header section is to introduce a fictional character to the audience and tell their story.
Effective story telling requires personal information, so these informational bits are mostly fine. There are two problems associated with them though. Length and duplicated content.
Too much reading makes the user persona boring and information overload makes the scenario restrictive.
Effective story telling requires personal information, so these informational bits are mostly fine. There are two problems associated with them though. Length and duplicated content.
Too much reading makes the user persona boring and information overload makes the scenario restrictive.
|
Don't overwhelm the reader with too much information. It becomes white noise.
|
|
Improvement Suggestions
The goals and expectations part could be implemented into the bio. This allows for the readers imagination to fill in the dots and makes it easier to connect with the fictional persona. It also cuts down on the content.
Phases
Phases describe the situation the user is in right at that moment. They are important to identify milestones and pain points. The before, during and after phases also make it easy to follow where the user is in regards of using the product.
|
Phases are taking up a lot of space and are restricting the quantity.
|
|
Improvement Suggestions
While all information can be useful, I think that good story telling can be conclusive enough to know at what phase the user currently is. As a result I think the "Before, During, After" phases can be scrapped. This also allows more visual focus on the phases itself.
Narrative
The narrative sets the scene and allows others to level with the user persona. It's important to understand the situation the user is in and this is the perfect place to introduce that.
No improvement suggestions.
No improvement suggestions.
Feeling & Emotional Journey
Feelings and the emotional journey are additional tools that support the story telling of the journey. It's easier to identify potential improvements and pain points if we know how the user feels during the phases.
The problem here is that the feeling tab seems to be restricted to one word. As a result, they don't offer any additional insights over the emotional journey bit.
The problem here is that the feeling tab seems to be restricted to one word. As a result, they don't offer any additional insights over the emotional journey bit.
Improvement Suggestions
People don't have a single feeling. It's missing context and undermines the complexity of the situation the user is in at that moment. It makes sense to change it from single words to a small paragraph instead.
Quotes
So far all paragraphs described the user and their actions. Having a Quotes section allows for an opinion that comes from the user directly instead of judging their situation for them.
Improvement Suggestions
The naming is off. Quotes sound weird if the user is fictional to begin with. Changing it into thoughts would accomplish the same thing, but provides a better wording of the situation.
Opportunities
Opportunities are potentially the most important part of a journey map. They highlight how interacting with the companies product can improve the situation of the user. It connects the story telling and their phases with the product. This supports the design as well as marketing teams.
No improvement suggestions.
No improvement suggestions.
Design Improvements
Structure
The template looks outdated. The boxes are very restrictive and every journey would need to fit into exactly 9 steps. A more open ended template would allow for easier customization and the content wouldn't look like a word prison.
The boxes make this design look outdated and restricted.
Improvement Suggestions
Get rid of the boxes and make the template open ended to allow for easier customization.
Colors & UI Design
While the colors have good contrast, they look a bit boring. The typography also makes it hard to focus on the actual journey because you focus on the headlines instead of the content.
Improvement Suggestions
Use colors as accents and use more of them to highlight the phases and journey instead of the whole document. Change the typography so the user follows the story.
New Template
Changes Explained
The header section was moved to the side to allow for a more natural reading order. From left to right instead of first from top to bottom and then from left to right. The section is short enough to allow for a bio and scenario and it doesn't take away from the rest of the design.
The template is now more open by removing all the boxes. Different sections are now color coded instead and headlines are directly supporting the area they are part of.
It's now also easier to add or remove additional sections because the template is not restricted to boxes any longer.
The template is now more open by removing all the boxes. Different sections are now color coded instead and headlines are directly supporting the area they are part of.
It's now also easier to add or remove additional sections because the template is not restricted to boxes any longer.