J&J Gradient.png

Solo

Timeframe

3 weeks

Role

UX Designer

Team

Johnson & Johnson DePuy Synthes

Designing user research tools: modular journey and empathy mapping templates.

UX Designer

UX Designer

UX Designer

Introduction

Johnson and Johnson is a pharmaceutical company known for providing good health through its medical devices, consumer goods, and encouragement of public health and safety. We were tasked to design, and present templates of modular journey and empathy maps. To aid with their user research.

Empathy Map Mockup (F2).png

Initial Kickoff Meeting

To start off our project together, we began a kickoff meeting to learn more about the project and what J&J had in mind. The team was looking for journey map and empathy map templates that were consistent in format, content and were able to scale for various maps. This project's final deliverable was a template for empathy and journey maps to reduce the time their team would take to conduct user research. This mapping system would also provide a streamlined way of communicating with cross-functional teams and stakeholders. 

Journey Map

Journey Map

Journey Map

The expectations for the journey map were to follow the journey of the user, (e.g, patient, surgeon, sales rep, etc…). While including multiple phases to layer within each other such as macro phases, sub-phases, and specific user steps and actions. The journey map had to be able to provide a story about the user's journey when participating in any event done by J&J. 

The reason user journey maps are necessary is to build empathy for users who designers and developers may not interact with on a daily basis. When providing a journey map, we are able to visualize a user's steps and actions to optimize the best possible experience for them. 

Journey map Components.jpg

A section of the user journey map Component Library

Journey Map.jpg

Sketches

This mapping system was built on Figma. In my experience creating user research templates, I knew it was important to incorporate components that were responsive to the content within them. I had to map out how each component interacted with each other along with making the map intuitive and quick to use. I began drawing out sketches of what the map may look like and how each element would fit into the page.

Final Product

After creating final sketches of what the Journey map would look like, it was time to build each component on Figma and use auto-layout to make sure each element is responsive to whatever amount of content is put into it. Lastly, each component had to be compartmentalized to be put into the asset library for easy access. 

Journey Map (F1).png

Empathy Map

When designing the empathy map, the inclusions for this map were the user's needs and pain points for each action. This must be represented with peaks and valleys along with three criteria such as emotional, informational, and physical needs at the time. The empathy map had to include what users would say, think and feel. 

When designing the empathy map, the inclusions for this map were the user's needs and pain points for each action. This must be represented with peaks and valleys along with three criteria such as emotional, informational, and physical needs at the time. The empathy map had to include what users would say, think and feel. 

Empathy maps are a great way to understand the inner workings of a user to design better user experiences in the long run. Designers are able to see areas that are critical pain points for users and are able to react accordingly. When done correctly, user empathy maps can be the key to having users feel heard and ultimately increase customer retention. 

Empathy Map.jpg

Sketches

Similar to the journey map, the process of creating the empathy map included sketching each element and their interactions and putting it all together on Figma.   

Future Direction

Although the first iteration of this project is complete, there can be room for improvement after a number of users use the template and voice their insights and pain points. Once we have collected a large enough sample of users, we can begin a round of usability testing to determine what the most common pain points are for people using this product. In turn, I will design a brand new iteration in response to user feedback, resulting in quicker turn arounds for empathy and journey mapping deliverables, ultimately increasing user retention for this wing of Johnson & Johnson.

Empathy Map Mockup (F2).png

reasing user retention for this wing of Johnson & Johnson.