Using emotion map in UX writing

Crafting effective copy by tracking down and responding to user’s emotion

Karen Priyanka
Blibli Product Blog
6 min readJun 14, 2019

--

Photo by Eileen Pan on Unsplash

One of the main challenge of writing for UX is finding the right words to display in a screen for user. Many mishaps could happen when you phrase something that user doesn’t understand. When word choices fail, it could result in alienating the user. Most of the times it happens because we don’t understand the whole case, not sure what to do about it, or simply too indifferent to care.

It’s even more complicated when it comes to relationship between human and technology. As if deciphering a technical case alone isn’t enough of a riddle for us writers, we’re expected to go beyond by translating some “robotic” language and communicating it in the most human way possible to users.

But like my favorite Game of Thrones quote that says, “Chaos isn’t a pit. Chaos is a ladder”, this chaos between technology and human could be a ladder to us writers to help the brand engage better with our user. Doesn’t UX writer’s main mission is humanizing technology after all?

Littlefinger knows..

Saying the right thing the right way takes a strategy, and it’s been known that practicing empathy is the best strategy to produce intuitive UX. In the next paragraphs, I’m going to share my take on practicing empathy in UX writing by tracking down and responding to user’s emotion.

Map out user’s emotion

First of all, to have the emotion tracked down, we need to have some kind of map that shows user emotion in a particular place, steps, or stage.

There are many kinds of map you can use to track user’s emotions. The empathy map is one of many examples. Nielsen Norman Group also has a cheat sheet to use other UX map.

In Blibli.com, our UX Researchers have provided a complete user journey mapping to show shopping or selling stages. This map is a result from gathering feedbacks and interviewing our users. In this map we can see user’s behavior including what they do, their thoughts during each stages, their feelings, touch points, paint points, and key opportunities. Here is an example of a customer journey map that I found:

Example of customer journey mapping from FreeCodeCamp

I find this journey very helpful to remember the steps and to empathize with user. We have this practical map plastered on our wall, so whenever we find doubts, we can go to the map wall to find reference.

In our map, we identify customer’s feelings by using emoticon. Human has many kinds of emotion, but we group them to 3 basic emotions: sad, neutral, happy.

However, we only identify 1 general emotion for 1 stage. For example, in ordering stage the emotion showing in the map is neutral. Meanwhile, it’s very likely that there are more than one or two features or services involved in this one stage. For example, in the ordering stage user is expected to face the product detail page, cart page, and checkout pages.

Zoom into more specific interaction

Sometimes it’s not enough to use this map alone because the emotion showing in each stage is a general one. When we’re working on copies, we want to to see user’s emotion as detailed possible. So we’re going to zoom into each stages and create a mini user journey for each interaction.

We can refer to the notes in the map when breaking down the general emotion into more specific emotions. If there’s not enough notes, then we can define the emotion by doing a little research or interview some unbiased people around you. Still not sure? Ask for more insights to the respective UX researchers who were working on the user journey.

So, here is an example of mini user journey I created for the voucher code section in the checkout process. In the big journey map, the emotion showing in this stage is neutral and the note says that user isn’t sure how to use the promotion voucher. I tried to break down the neutral emotion per interaction:

After selecting payment method, user is feeling uncertain, anxious, and frustrated to find any way to apply the voucher, hence the sad emotion. When they finally find it, they’re expected to fill in the field with the voucher code they already have. The emotion here is impatient to know whether the voucher they enter is working or not, hence the neutral emotion. Next, when the voucher is successfully applied they still feel uncertain whether the voucher has cut down the payment amount, hence the neutral face.

Now that we know what users feel and where they feel it, we can use it to decide what to respond or what we can improve.

Decide the objective

Before getting into the copies, we need to know what we want to achieve in this step. The trick that helps me is by imagining to be in the state user is experiencing, and then think of the ideal state.

Imagine being a first time online shopper. What would you feel when you couldn’t find a way to use your voucher code? If it were me, I’d feel uncertain, anxious, and impatient. Ideally, I think the voucher section can be more highlighted so the user can find it easier, and the success message should have a congratulating tone. I would also include what accomplishments the user has achieved there. With that, we can conclude that the objective is to make user more aware of the voucher section and to inform user that voucher code has been applied.

Add the Objective section below the emotion part in the map so we can see it clearly as a whole:

This will later help us identify: if user was feeling this, and we need to inform that, how should we say it? What would be the great copy?

Consider the tone of voice

Now that we can relate to the story, the emotion, and the objective, all we have to do is to simply say it. But don’t forget to consider the tone of voice. Tone? Voice? What are those?

Remember: while you have the same voice all the time, your tone keep changes depending on the situation. You may talk in a persuasive way when trying to convince someone about something, but you would talk differently to someone in grief.

Think about how you want to present a message to user by responding to what user is feeling in an interaction. We can define the tone from there. Let’s see this example of tone of voice that I define in the voucher code interaction:

In the select payment step, user is seen feeling uncertain, to relieve user’s uncertainty, giving user enough information right away is the best option we can do. In the find voucher section, we can say something brief to minimize impatience and uncertainty, be encouraging to ease anxiety, and add enthusiasm to inspire motivation.

With all these information, we’re ready to write the copy! Here’s the copy that I tried to add in response to user’s emotion:

Next, we can submit these copies, test them out, and ask for feedback from the requester or the respective team. Hopefully, this emotion map could help structuring thought process of writing for UX.

So that’s a little bit of how we work in Blibli.com UX team. If you’re interested to join me and the UX team in tackling challenging design problems, we’d love to hear from you! Send your resume to recruitment@blibli.com and let’s work together in better Blibli.com customer’s experience everyday.

--

--