Hosted invoice page
Hosted invoice page provides a secure, private URL where your customers can view the details, amounts, status of the invoice, pay the invoice using any of the enabled payment methods, and download PDF copies of the invoice and receipt.
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 has created client engagement (CE) tools such as invoicing to help clients request payments for the services they have recently completed. After creating a CE tool such as invoicing the natural next step for B12 was to create a checkout page to help businesses’ securely collect payments from their invoices.
Problem
When going through the payment process transactions go through three steps: checkout completion, fraud protection, and network acceptance. Conversion for business’ happens when a transaction is successfully completed.
Conversion equation
Checkout complete x fraud protection x network acceptance = conversion
Through each stage of the funnel, the pool of potential customers can gradually shrink. If you have a long or complicated checkout process, a fraction of customers will fall off. Then, when you factor in fraud and average transaction acceptance rates, the pool shrinks even more. In order for B12 businesses to have more successful payments we wanted to create a checkout process that addresses those issues and reduces those frictions.
User Research
In order to understand the domain setup experience better I asked one of the B12 CS members to record the 2 different paths when they are setting up a domain for a new customer. After reviewing the recordings I interviewed 4 different CS members to discuss any questions or improvements I felt that are needed for the domain setup experience.
(4) CS members
Full stories
User interviews
Competitor research
To improve the checkout completion rate, I went through the competitor's checkout process from the customer‘s point of view and looked for any friction that could lead to drop off as well as design patterns that could lead to customer conversion.
Customer journey map
I decided to create a customer journey map to further help understand users and provide insights that would help create better customer and user experience.
Insights
1
To avoid fraud you want to collect enough details to be able to verify that customers are who they say they are, but avoid adding too much friction to the checkout process—which can cause customers to abandon it altogether.
2
If your checkout form is too complicated, you risk losing sales from the most likely buyers—customers with items in their cart and every intention to make a purchase. In fact, 87% of customers abandon a purchase if the checkout process is too difficult.
3
The best checkout forms adapt to the customer‘s experience. For example, it‘s best practice to offer responsive checkout forms that automatically resize to the smaller screen of a mobile device.
Prioritization
Since this is the first hosted invoice page for B12 I discussed the insights with engineers and we decided on what needed to be implement in order for our customers to be successful as well as what was achievable.
Supported use cases
-
One-time payments
-
Saving payment details
-
Subscriptions and trials
Built in features
-
Simplified PCI validation
-
Email receipts
-
Address collection
-
Fraud logic
-
Card testing protection
-
Store policies
-
Chargeback Protection
-
Shipping method selection
Conversion optimization
-
Payment method optimization
-
Responsive design
-
Card validation
-
Email validation
-
Descriptive error messages
-
Third party autofill
-
Card brand identification
-
1-click payment using Link
-
Recovery emails
Outcome
B12 hosted invoice page provides a secure, private URL where your customers can:
-
View the details, amounts, and status of the invoice.
-
Pay the invoice using any of the enabled payment methods.
-
Download PDF copies of the invoice and receipt.
With the Hosted Invoice Page, you can display the allowed payment method list to the customer. This gives them the option to choose a payment method that suits them best. Additionally, enabling the Hosted Invoice Page gives the customer the benefit of having Stripe handle complex payment and authentication flows.
