Week 8 : Microcopy
Rewriting copy to improve user experience
Writing microcopy is the crux in our UX writing process where the result of all our research and hard work are put on screen.
Our actions from creating user persona, to mapping the user journey, and so on, helps us to write effective microcopy.
This Toptal article puts it clearly that effective UX microcopy is:
- Clear, concise, and easy to understand
- Takes on the voice and tone of the brand
- Fits in visually and feels like a part of the design
- Fills a need, answers a question, or builds empathy.
From our practice challenge in Week 5 till now, we’ve worked on and completed 3 of the above requirements for effective copy. All that’s left is to “fit the copy in visually and make it feel like part of the design.”
Writing the microcopy
In week 4 of this publication, we chose a project to work on and so far we’ve created user persona, mapped our user journey, determined the product voice, and taken tone of voice into consideration.
This week, we’re writing the microcopy for the product screens. Here’s how I did mine.
As a refresher, here’s the user journey created for the mobile bank app practice project.
Based on this user journey, I could then rewrite the existing copy for a better user experience.
Step 1 — Fill in bank transaction details
I identified the possible pain points the user might face in this step and determined the type of copy that would help solve it. In the existing design, I noticed both pain points were catered to and solved, but there was inconsistency with the copy.
Problem:
- Inconsistent word choices
On the first page, we clicked on “Transfer to other accounts” which led to the page titled “Another account”. But this copy differs from the selected option and by itself doesn’t convey any information, rather raises the question ‘which account?’ “Transfer to own account” or “Transfer to other accounts” ??
Solution:
I chose to rewrite the heading from “Another account” to “ Transfer to other accounts.” This lets the user know exactly what page they are on, and what is expected of them.
💡 Tip: Good UX Copy is consistent and shouldn’t stress the users.
Step 2 — Review bank transaction details
Here, the existing app anticipated and solved one user pain point by allowing them review for mistakes. But based on my user journey I discovered another possible pain point the user might face which wasn’t addressed — ‘proof of payment.’
Problem:
- Missing copy
Our user is about to make a transfer and is wondering “Will I get a receipt to keep as proof of payment?” This concern can make the user hesitant to take the risk of continuing with the transaction, and may worsen the user’s experience if left unanswered.
Solution:
I added short helpful copy to the screen
💡 Tip: Good UX copy anticipates users’ questions and provides answers to help make their journey smooth and enjoyable.
- Call-to-action copy
When using the app for the first time, I hesitated at the CTA “confirm with PIN” because I felt slightly pressured. And if you’re like me, you might begin doubt the PIN you thought was you knew. Because of this experience, I felt the CTA could be better worded to make people (like me) less hesitant.
However in a real case scenario, I’d suggest testing the current CTA as well as other copy choices to know which is the better performing copy option before making any changes.
Step 3 — Enter PIN
This is the point in the user journey where people decide to either keep using the product or find an alternative. And it’s our job to help them make the right decision — to keep using the product — smoothly.
Problems:
- Vague heading
The heading “confirm” is brief and straight-to-the-point, but it’s at the expense of clarity. Based on my user persona gotten from user research, and the context of use, and I found it important to make the heading more explanatory.
Solution:
I rewrote the page heading from “confirm” to “confirm transfer”
💡 Tip: Good UX Copy should help users understand the actions expected of them and guide them to complete it.
- Missing copy
There is need for microcopy to explain what information is required of the users to complete the transaction.
This decision was based on the app’s design where users were asked to create a pin for the Vbank app when signing up. It is possible users may be confused about which pin is required of them to complete the transfer — whether the pin they created for the app, or their actual ATM pin.
Solution:
I suggested a drop-down text for additional information regarding the PIN
I had four copy options for the drop-down text:
- The transaction PIN you created for Vbank app
- The transaction PIN created for Vbank app
- Enter the transaction PIN you created for the Vbank app
- Enter the transaction PIN created for the Vbank app
Due to the original copy directly addressing users with “your,” my copy had to continue in that voice and directly address users as well for consistency sake. With that I was left with options 1 and 3.
My final copy choice was based on the its ability to nudge users to take the next step by reiterating the next action in itself — “Enter the transaction pin..”
Step 4 — Transaction confirmation
This is an important point in the user journey, and how we write our confirmation messages and error messages can make or break the entire experience.
The awesome book “Microcopy: The complete guide” by Kinneret Yifrah explained that in writing error messages,
- Describe the problem and what went wrong as precisely as you can.
- Provide a constructive suggestion on how to solve the problem and carry on forward.
Problem:
The current error message sounds a bit too technical and does not offer any help on what the user can do to correct the problem and how they can move forward.
Solution:
I chose to rewrite the message as
My rewriting process
- I removed the error heading “Warning” because it was redundant and gave off scary vibes. Anybody who sees “warning” after completing an action, especially when it concerns money, would immediately feel a wave of panic.
💡Tip: Good UX copy should alleviate users’ fears, not worsen it.
- I changed the body of the message from “Incorrect PIN” to “Sorry, incorrect PIN” because the former is a bit too technical. Since good UX Copy should be human, I added a simple apology to the text.
I had two different copy choices:
- Sorry, the PIN is incorrect
- Sorry, incorrect PIN
I chose the latter because it’s more concise and passes the message across while maintaining the bank’s brand voice.
- I changed the current CTA from “OK” to “Try Again”. This is because the word “OK” is vague and does not direct the user to the next course of action, rather, it gives the user the sense of a dead end. I chose “Try again” because it directs users on the next action to take in order to complete the user journey.
💡 Tip: UX Copy should always serve a purpose and help guide users to complete the user journey.
- I added an extra CTA button; “Forgot PIN?,” to help users solve the problem of typing a wrong pin. This problem occurs either because there was a mistake when typing the PIN, or the user has forgotten it. The solution to a forgotten pin is to provide assistance to help users recover it.
Both “Try again” and “Forgot Pin?” help reduce user frustration by providing:
- A clear reason why there’s an error
- The next step to take in the case of a mistake
- A solution to the major fear — forgotten PIN
Additional screens for the app
Following my journey map, I found it necessary to add some screens that were not originally in the app’s design:
- PIN Recovery screen which includes customer support
2. Confirmation screen with the copy “Transfer successful! Your transaction details are saved in transfer history”
Fitting the microcopy into design
“Design is all about communication.” — Lindsay Munro
To communicate clearly with our users, we need both good copy and good design in a nice blend. For example, the tone of the copy should always complement the design colors and graphics on a screen.
At this stage, we work with designers on the product screens, taking into account the button sizes, white spaces, and so on.
Summary
Crafting microcopy is a continuous process of editing, testing and rewriting. In working on the copy for this app, I discovered some problems in the user flow and finally understood the quote:
“Work on text early because text problems often reveal design problems.”
See you next week!
(⬅️ Last week’s post)
Let’s Practice 👩💻
First of all, congratulations on making it this far! It wasn’t all roses, but you pulled through 🙌
This is the final challenge in the UX Writers Learn publication. Are you excited? You can do a happy dance - I surely did :)
Week 8 Challenge
This week, you’re taking the knowledge from creating your user persona, user journey, and product voice to craft the microcopy for your chosen project like I did here.
P.S you don’t have to write an article, but as a UX Writer you should always be able to explain the rationale behind your copy choices.
Best of luck!
Further Reading
How to write inclusive, accessible digital products — UX Collective
UX writing guidelines and best practices — XD Adobe
16 rules of effective UX writing — UX Planet
Why small words matter — The importance of microcopy UX — Toptal
Hey there! Do you want to contribute to UX Writers Learn by sharing your experience or insight on any area of UX writing? Feel free to reach out to me on LinkedIn here. I’d love to hear from you.
