UI design & UX writing: Billie's rebranding
Billie screens rebranding before and after
Project type
UI design
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%
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 UI.
As the sole designer on the B2B buyers team, I worked closely with Billie’s design system designer to update the product’s UI according to the latest accessibility guidelines.
Additionally, I collaborated with Billie’s copywriter to enable a holistic product rebrand.
Problem definition
-
In order to meet market standards for UI and UX, visual consistency throughout the product was crucial. No screen should be left behind.
-
UI elements such as color, links, tags and visuals all had to meet the same visual criteria across the board.
-
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.
UI Design
The changes included color mapping and typography, which were established by Billie’s design systems designer.
In collaboration with Billie’s design team, I mapped the UI changes for the handoff to frontend engineers.
Color mapping and typography changes
I then proceeded to map out UI elements such as buttons and input fields.
UI elements changes
Next up I crafted high fidelity prototypes reflecting the individual changes as well as significant screen changes like pictured below.
This also served as an overview for my team’s frontend developers.
High fidelity prototypes of the rebranded screens to handoff for development
UX writing
The more I progressed with rebranding the Buyer Portal, the more I began to uncover “edge case screens” that did not meet the standards of our product visually nor 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 content design 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.
Exploration
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
Additionally, I had to align with Billie’s copywriting guidelines.
This included examples such as:
-
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 copywriter, I crafted a short, 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.
Lessons learned
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
-
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.