Invoice creation
September 2021-3 months
The invoice creation is within the payments and invoicing experience of the B12 product which provides the necessary fields in the invoice, to make it easy to fill in the company and customer details as well as information about the product or service they're selling.
Organization:
B12
Role:
UI/UX Designer and Researcher
What is B12?
B12 is a centralized, do-it-for-you platform that enables professional services firms to easily establish, run, and grow their business online. Within 30 days, B12 sets business' up with all of the tools needed to reach clients, offer their services, and get paid.
B12 supercharged AI instantly drafts a website, and their team of copywriters, designers, and SEO specialists brings businesses online in 30 days. They deliver a search-optimized online presence with the integrated tools their customers need to serve and charge their clients.
Overview
B12 started the invoice exploration with engineer lead designs as a way to test our initial ideas on prioritization as well as to bring in more customers with this new client engagement tool. This early implementation led to a lot of insight into our customer’s needs and wants.
But as we continued with our invoice exploration we wanted to revisit the invoice creation experience by prioritizing ideas from competitors and introducing more UX patterns that are within the B12 product. We also noticed opportunities to streamline the invoice creation feature even further.
Before
Problem
We noticed that customers were not completing their invoices after going through the invoice creation experience and wanted to see why that drop-off was happening. The invoice creation experience provides the necessary fields in the invoice, to make it easy to fill in the company and customer details as well as information about the product or service they're selling.
​
If customers are not able to successfully complete their invoices they will not be able to utilize the new tool that B12 is hoping to provide in order to make their business' more successful which could cause a customer to churn on our product.
Insights
In the current invoice creation experience it is separated into multiple steps: invoice, and email which was designed initially in the hope this would help streamline users' tasks into more digestible information. But as our customers were using this feature we noticed that users do not move forward after the first step successfully which might be due to the uncommon UX pattern that was implemented.
Design Goal
Because of this, we wanted to revisit the IA, and UX patterns to try to simplify it all into 1 page to get our users to complete the task more efficiently.
Competitor research
In order to get a better idea of what makes the invoice creation experience more successful and understand invoice UX patterns, I decided to explore competitors invoicing experiences to see repetitive patterns and understand the hierarchy of information to make it more clear to our customers.
Iteration 1
One of the main concerns was that our users were not completing in creating an invoice so for my first iteration I took this opportunity to re-evaluate all the elements of the invoice creation page to see if there was any opportunity to automate or remove tasks to help the user in completing their invoice more efficiently.
​
Based on the competitor research I was able to get even more insight on the common terminology, structure and prioritization on how invoices were made and to make the tasks more clear.
Feedback
After reviewing the first iteration we saw another opportunity to update the contact information. In the original wireframes (i1) we noticed that we had two locations that we were asking for contact information either for the client or for the user. We saw this as an opportunity to create this into one step rather than separate steps within the experience. By combining this information into the contact step we are creating less steps for the user to complete their task and create a more seamless/automated experience for them.
​
Our team also re-evaluated more of the UX copy and potential consistency within the product which lead to the second iteration.
Iteration 2
Based on the feedback I used more UX patterns we see within our product to create more consistency to help users with the familiarity of our product as well as utilized more automated steps within the process to help the user complete the invoice creation more efficiently.
Outcome
Next Steps
As we continue to build out this new client enagement tool the invoice creation will continue to evolve. We see a lot more opportunity to make this a more seamless experience by creating a more developed invoice settings option which could eliminate some of the manual steps we currently have in the experience.
We will continue to observe and see how our users interact with the invoice creation experience and will continue to make changes based on how our users interact with the tool.