Empathy Maps For UX
A Tool for Organizing Users’ Thoughts and Emotions
Our take on the Empathy Map came about as a way to distill and organize qualitative data. We start every project by interviewing and observing current and potential customers to better understand their pain points and aspirations. Then, as we sift through pages of raw notes, sketches, audio/video files and photos, we use the empathy map to glean the juicy parts and make it visual to help drive the User Persona and eventually the Creative Brief.
STEP 1: COLLECT MATERIALS
Print out the empathy map on a large format printer (download link at bottom) – we recommend at least 2’x 2.5′ (the bigger the better). Then, find a place you can hang it. Next, buy a multi-color pack of Post-it notes and assign a color to each person you will be interviewing or the user persona you might be designing for.
Image: A blank canvas ready for insights
STEP 2: ASK DUMB QUESTIONS
Ask “dumb” questions that leave room for open ended responses. The biggest insights will revolve around these types of inquiries. “Why do you log in with Facebook?” “Would you ever try and do this task on your smartphone?” “When would you leave this site and go back to Google? How come?” “Tell us about what a typical day looks like in your world”.
When we worked on the Lowline NYC website one of our key users was people who work at foundations that fund aggressive public works projects. During one of the funder interviews, we asked, “How do you pick a worthy proposal?”. This person responded by saying he scrutinizes the organization’s website – in particular, the “About” pages to know the team and their vision. As he said, “these were critical and had to convey a dedicated team with a clear vision.” This shifted our design efforts considerably.
(More on the story of the Lowline website redesign project here.)
STEP 3: MAP AS A TEAM
If possible, as a team sit down and digest your notes immediately with Post-It notes. Scribble quotes across the four areas of “Say, Think, Feel, and Do”. Great quotes should be called out. For some of the areas, particularly “Feel and Think” you might have to infer a bit based on the notes and everyone’s recollections of the interview. Tip: Do this for every interviewee but be extra careful to make sure each person has their own color on the Post-it notes. It will help tremendously to keep the map organized.
STEP 4: IDEAS – GO FOR QUANTITY
As you are going through the above exercise you will have ideas for your project. Some will be great and some will be horrible. At this point, don’t judge just go for quantity. For the Lowline NYC project, we threw out things like 3D virtual tours of the underground park. Video shots of Lower East Side residents. Not all of these are practical (or possible) but it’s an easy way to take what you heard and turn it into something creative that can be built upon.
Everyone on our team from clients to devs and designers love this type of creative thinking and the best ideas usually come from spending time listening to the users. Mash-ups of different experiences or examples of other sites come into play as well.
Image: Empathy Map in Progress – The Lowline NYC
STEP 5: TIME TO REST
Let everything marinate for a day or two after you wrap up the interviews. Add to the map as you get inspiration.
Hang the map in a high traffic area of your workspace or studio. Next to the break room or on the way to bathroom. Put up a sign that says, “What ideas would you add?” with a stack of PostIts and a Sharpie (be sure to use color that you haven’t used before.) This not only encourages everyone to riff on ideas but also allows everyone to get involved in the project.
For example, when working with DonorsChoose.org we observed how teachers used the site as a sort of “inspiration” engine. Next, we looked at how the Songza website has a very eloquent way to help you navigate vast amounts of music. A couple quick clicks and you’re in. We mashed these two ideas up for letting teachers find projects with two clicks on a quick prototype.
Image: Wireframe Idea for a Possible Recommendation Engine for Teachers inspired by Songza experience
STEP 6: DEFINE YOUR MISSION
Having reviewed all the human voices, charted them visually, and drawn inspiration you are now ready to come up with your mission statement for the project. We stole this next step from our friend Dr. Jim Patell who teaches the “Design for Extreme Affordability” course and cofounded Stanford’s d.school.
Note: This simple statement brings everything into focus and acts as the perfect foundation for your Creative Brief.
The most important part of the statement is the “because” part. It gets at the “why you are creating this for someone else” piece that is so critical. It’s a beautiful forcing function for your team. Without a focusing statement like this teams and clients can wander around with no north star to navigate from. Over time, those with the most forceful personalities or biggest title take control and push their vision. The user’s voice is lost. This helps keep their voice front and center in your efforts.
Rather than beginning with shiny new technology, we start by trying to establish deep, personal empathy with our users to determine their needs and wants. We must fill in two blanks: Our users need a better way to ___ BECAUSE ___. The because portion is a big deal.
Dr. James Patell, Stanford d.school Source: CNN
Having done the Empathy Map exercise you undoubtedly notice specific themes that start to emerge. These can be flowed into a User Persona and used to guide all different parts of the customer’s journey whether that be in a website or app.
Coming back to reality you might have to table some ideas for a follow-up phase. That’s okay…in true Design Thinking fashion you can start prototyping right away to see if these big ideas have any legs before throwing expensive dev or creative resources at them.