UX Design: Billie’s missing invoice feature
Final design informing the user of the missing invoice and what they could do next
Project type
Feature redesign
Contribution
Product discovery Stakeholder interview Project management High-fidelity prototype Handoff to developers
My role
Product design
Target Users
4,000 B2B buyers
Duration
August 2022
Outcome
Rolled out 100% in Germany
Customer support requests reduced by 20%
Background
Billie is a Payment Service Provider for B2B Buy Now, Pay Later services.
B2B buyers (debtors) can log into the Billie Buyer Portal to manage their invoice payments and download relevant documents for their bookkeeping, like invoices and payment information.
Problem definition
With Billie’s expansion to Sweden and their Klarna collaboration, the download invoice feature was not always available, causing a spike in Customer Support requests since buyers were not being able to find their invoice.
This situation had 3 main issues:
1. Customer support issue
Billie’s CS team was receiving complaints from buyers around 30 times per week regarding their missing invoice.
CS was reaching its capacity.
2. User experience issue
This led to major user dissatisfaction, since they were missing valuable invoice documents in order to document their B2B payments. Furthermore, users were confused why a dunning process has begun against them.
In total, Billie was failing to meet its buyers’ expectations.
3. Financial issue
As a result of the missing invoice, buyers did not pay their invoice on time, causing their payment to go into the dunning process.
This had a negative effect on the buyer-merchant relationship and their trust in Billie as a PSP.
Before redesign
Users would log in to check on their invoice status and updates, only to find an error message (pictured right).
Additionally, no other alternatives were provided for this issue during the communication flow between Billie and the buyer.
A link to the general help center page was provided, which left users searching for the right information by themselves.
Invoice handling flow in the product before redesign
Problem definition
As the primary designer for the Billie buyers, I wanted to ensure an intuitive experience that will decrease user frustration while relieving a pressing customer support issue.
I closely collaborated with project managers, back- and frontend developers, stakeholders from customer support and marketing to fully identify the issue and technical constraints.
How might we provide transparency for our users while acknowledging technical constraints?
The solution
Considering technical constraints and the inconsistency between merchants and the documents they provide to Billie, I was able to rely on my team’s backend engineers to craft an informative massage which directed the buyer to the merchant directly.
A link to the help center article explaining why such issue has occurred was provided as well.
Invoice handling flow in the product after redesign
Moreover, I worked closely with marketing and my team’s project manager to improve Billie’s email communication, thus providing the user with important information regarding their invoice documents in the form of a new section - FAQs.
The help center link directed the user directly to the relevant page:
“How can I download my invoice?”.
This early intervention and directing of the user helped ease this issue in advance, which in the end reduced customer support requests by 20%.
Exploration
I wanted to see if I really understood the problem at hand.
For this, I relied on the double diamond method to explore all the issues at hand before going any further.
Before going any further, I wanted to gather all the elements and their relationships within this problem. This approach helped me reduce the complexity while addressing the different key particles.
I wanted to understand the components of the problem:
-
Stakeholders?
The user
The merchant
Billie’s Customer Support
-
Tools?
Emails
PDF documents
-
User interactions?
Checkout with Billie
Shipment notification
Buyer Portal invite
What are the components and stakeholders of this problem?
Since the most evident proof we had for this issue were the customer support requests from our buyers, I decided to start there.
Customer Support requests
Dozens of users were frustrated and confused for many different reasons.
I worked closely with the CS team to summarise and identify the main themes within the requests.
User quotes from Customer Support requests
Summary
-
Users were unable to proceed to invoice payment due to the missing document, which resulted in unnecessary dunning emails (users were confused why they were receiving a dunning notification in the first place).
-
Users visit the Buyer Portal and expect to find the invoice document there, as it is sometimes not provided by the merchant directly.
-
Users were responding negatively to the missing invoice in the post-purchase part of the flow - after the goods have been shipped and during the invoice handling process.
Defining the user flow - from email invite to invoice payment
With the customer support requests pointing out to a user flow issue,
I wanted to map the users’ touch points in the post-purchase flow.
To do this, I collaborated with the service designer and the product manager on my team to analyse the flow step by step.
Goal
-
What is the relationship in the flow between the user, the merchant and Billie?
-
Do the users expect to find the invoice at a certain point in the flow?
User flow analysis - where in the flow does the user encounter a problem?
Touch points summary - the invoice handling phase is the problem!
Summary
-
The stage where the most communication around invoicing occurs is after the order has been shipped and the invoice handling begins.
In this stage Billie send the buyers an invite to the Buyer Portal where they can manage their order, change their payment method, get payment instructions and download their invoice.
The next time an email from Billie will be sent is shortly before the invoice due date.
-
The email communication from Billie to the buyer is the main determining factor for expectation: when invited to the Buyer Portal, the user expects to find the invoice there.
However, there were other factors that determined why a user would expect to find an invoice in the Buyer Portal. This was due to the constraints of this project.
Technical constraints
1. Invoice inconsistency
In some cases the merchant provided Billie with a downloadable invoice document that would be visible in a drop down menu in the place of the error message.
Unfortunately, this did not apply to every single merchant.
This resulted in a confusing experience for the buyers - sometimes a document would be available, sometimes it was not.
I had to work around this constraint and acknowledge that a message instead of a document was unavoidable.
Still, I wanted to communicate to the user what they could do to find a solution.
2. Where are the user interviews?!
Unfortunately, due to legal reasons, conducting user interviews was not possible.
A crucial step in the beginning of the design process, I had to work around and rely on assumptions and on user personas already provided.
This constraint was very challenging, since it felt like a wall standing between me and the user.
3. No legal invoice from Billie
At the time of me working on the project, Billie could not offer the buyers a legal invoice to download instead, which again meant that in some cases no document would be available.
4. Email constraints
As a result of the inability to provide an invoice document by Billie nor by the merchant most of the time, there was no option to attach a document via email and shorten the user flow.
Additionally, the email communication was provided through the cloud-management platform Receeve, where design options were limited.
Other challenges
Time constraints: scrum is king
Within the constraints of the team’s sprint goals, the invoice download feature had to be shipped according to the given deadline.
As a result, the scope of the invoice feature was minimized, so that we had to ship a solution quickly.
I am my own constraint
Since this was my first time working as a designer, working in tech, in a cross-functional team and in a scrum framework, I had to learn many things along the way. I had to rely on my team and on my product manager especially whenever I had any questions.
This collaboration proved highly important, since it enabled me to understand how many departments come together within the design process, how to work within constraints and through feedback cycles hand off my designs to development.
Despite being time consuming and challenging, this experience taught me how designers really work.
Design solutions
In collaboration with my product manager, we prioritised short term solutions that complied with the constraints of this project.
Short term solutions brainstorming
Design change 1: notification on invoice page + help center link
Design solution 1: redesigned error message and help center link
No invoice error message redesigned
Design change 2: email redesign with
FAQ links
I analysed the old Buyer Portal invite email to determine where an FAQ section would fit best, while preventing the invite email from being too long or redundant.
Design solution 2: email redesign
User improvements
With these improvements I aimed to improve the user experience considering the constraints, and enabling the user with information early in the flow in order to provide a solution to a problem that is likely to arise.
-
There is a clear communication early in the post-purchase from where the buyer can get more information on invoices through the FAQ links in the email.
Additionally, the user is already being aware of a help center where they can answer more possible questions.
-
Once entering the Buyer Portal, we are being transparent with the user on who to contact in order to receive their invoice.
A direct Help Center link is provided in the message.
Customer Support improvements
-
Providing the user with information in this way was estimated to reduce Customer Support requests.
-
Collaborating with the Customer Support team opened the door to exploring which recurring user issues we can address next and how to improve the product for our buyers.
Impact
The message feature and email redesign helped reduce
Customer Support requests by 20%.
Additionally, dunning requests dropped by 10% percent, indicating that this number was responsible for outgoing dunning requests due to late paid invoices.
Lessons learned
What worked well
-
Working within the constraints to provide the friendliest solution for the user while acknowledging business goals.
-
Cross collaboration within Billie proved to be fruitful during the entire process of this project - from understanding the problem to tackling solutions across the user flow.
What didn't
-
Not being able to do user interviews was a major step missed in this project.
As an alternative, I could have done internal interview with colleagues in bookkeeping to understand user needs better, since the target group would have been similar.
For next time
-
I would have liked to explore more UI options for the message (toast, more email notification options)
-
I would have liked to revisit the feature for a bigger scope, and how we could have expanded the invoicing feature and provided more sustainable solutions for the product offering to grow.