Billie: Error Messages UXW
Billie screens rebranding before and after
Introduction
Billie is a Payment Service Provider for B2B Buy Now, Pay Later services.
For the company-wide rebranding launch in Autumn 2022, all product teams needed to update their UX Writing.
As the only UX Writer at Billie’s design team, I collaborated with the marketing team to improve the UX Writing of error pages and messages.
Project type
UX writing
Contribution
Product design Usability testing Content design
Target Users
4,000 B2B buyers
Duration
October 2022
Outcome
100% roll out in Europe
Site drop out reduced by 2%
Project background
Billie is a Payment Service Provider for B2B Buy Now, Pay Later services.
For the company-wide rebranding launch in Autumn 2022, all product teams needed to update their UX Writing.
As the only UX Writer at Billie’s design team, I collaborated with the marketing team to improve the UX Writing of error pages and messages.
☝️ Problem definition
-
In order to meet market standards for UI and UX, visual consistency throughout the product was important. No screen should be left behind.
-
As a result of the UI rebranding, content elements within the Buyer Portal had to be updated as well to reflect market standards.
😬 Constraints
-
Time crunch - due to deadlines presented by the marketing team, the entire product had to rebrand in approximately 1.5 months for the relaunch. This meant working fast and under time pressure on top of sprint goals.
-
No new visuals - due to the swift rebranding and the minimalistic approach, there were no new images for the product to replace the old ones.
For some screens, this meant that a visual orientation for the user would be somewhat lacking.
Exploration
As the company-wide rebranding progressed, the more I began to uncover “edge case screens” that did not meet the standards of our product content-wise.
🎯 Goal
-
I aimed to provide the best all-round rebranding possible within my product segment, which led me to analyzing the screens from a UX Writing perspective.
-
In order to encourage the user to continue using our product despite errors along the way, improving the copy of error screens proved to be an important factor.
❓ What makes a good error message?
Before storming in with ideas, I wanted to understand what makes good UX writing. As this was a learning process for me, I looked at industry standards for common error message practices.
Depending on the error case, some components would be more applicable than others.
For this particular error screen, I decided to focus on the following:
-
A short, meaningful message that will not overstimulate the user.
-
Avoiding ambiguity with a concise message explaining what happened and how to proceed.
-
Avoiding negative language and user blaming to soften the blow of the error experience.
Competitive benchmarking for writing a good error message
📝 Billie's copywriting guidelines
-
Speaking in a “you” voice - you can log in, you will receive.
-
Avoiding passive voice - you will receive a magic link vs. the magic link will be sent to you.
-
Use a polite, neutral tone - please contact customer support, please refresh the page.
Example 1: access link expired screen
In this error screen, the user can’t log in to the Buyer Portal with a magic link like usual, since they are using an old expired link.
There was a risk of users dropping off the Buyer Portal as a result as well.
Since the rebranded screen would have no image, I decided to focus on the copywriting of this message to improve the user experience and reduce drop off risk.
Access link expired error screen analysis
🔍 Usability testing
Together with Billie’s design team, I conducted usability testing to see which message alternative would work best.
Usability testing for 2 alternative error messages
🎨 The redesign
Access link expired error screen redesign
The new message included a bold headline explaining what happened and what the solution is.
If the user only reads the header, they will have enough information about what happened and will know what to do further.
An additional one-liner body text provides more information on what happens next.
Error message redesign
Example 2: browser not supported
In this error screen the user cannot use the product due to an outdated browser.
While no new imagery was provided as part of the rebranding, I wanted to redesign the copy of this screen to provide a more positive tone for the user on how to solve this problem, as well as to be up to modern design standards.
A content design analysis of the browser not supported error screen
🎨 The redesign
Browser not supported error screen redesign
In collaboration with Billie’s marketing team, I crafted a short and neutral message that explained to the user what happened and how they can solve the problem.
Error message redesign
Impact
As a result of the access link redesign, user drop off was down by 2% since the rebranding launch.
Editing the copy of the screen proved to be fruitful not only for the user experience but also for the metrics of our product.
Learnings
✅ What worked well
-
Collaborating within Billie’s design team and copywriter was very fruitful for this project. Through this process I learned the intricacies of the design system as well as the groundwork for UX writing.
-
I found UX writing for this project especially successful, since it reduced the drop off rate for our digital product - a metric which I was no anticipating.
❌ What didn't work well
-
Overall the rebranding process was very hasty, resulting in surface-level work which didn’t allow for more exploration due to time constraints.
✍️ For next time
-
I would like to learn even more about UX writing in the future and challenge myself with more content design projects.
-
I would like to offer more awareness within the product segment for the relationship between design, content writing and UI.