The Previous Solution

An invoice builder similiar to Melio Payments, a fast-growing US-based company in the same niche, was used as a guideline to design Sefara's first invoicing application.

The invoice creation view was a modal with several input fields to add information to generate an invoice. A screenshot of this view is shown below.

The checkout flow was also part of the invoice payment flow. It was heavily branded with Sefara and lacked branding capabilities.

However, it was a mistake to build the first invoicing prototype without a focus on understanding the user, examining current popular solutions, and understanding client needs. Rather, this invoicing tool was built based on what worked in a different market.

This led to the creation of an invoicing tool that users would play with momentarily but the users wouldn't use it afterwards.

Define the Problem

Customer feedback received on the previous invoice creation tool was mostly negative. There were many invoicing applications to compete with, and users mentioned they were not interested in swapping invoicing solutions to our new tool.

This was confirmed with data as users were not using the invoicing tool to receive payments. Feedback was gathered from existing and potential users after they tried the invoicing tool.

Optimizations

Brainstorming and Sketches

The invoice creation wizard required an invoice preview tool as well as input fields to allow the user to add multiple items. From Google Analytics data, users were primarily using Sefara on desktop devices, thus the focus was on a wide-screen design.

Reworked Solution

To avoid previous mistakes, I first started by understanding the user and the typical solutions used by users.

I found that users were using a variety of invoicing solutions, and one of the most common complaints was related to the overall user experience. Users had to re-enter information for each invoice, and it wasn't always the best experience clicking through all of the options. I wanted to design a invoicing platform where there was autocomplete functionality that also saved information from previous invoices so the user didn't have to re-enter the same information.

It also quickly became apparent the previous invoicing solution was lacking in features. Users wanted itemization, invoice visualization, and an easy way to send out invoices not only over email, but also over WhatsApp, a popular messaging application used in Nigeria.

After researching existing invoicing solutions such as Stripe and Quickbooks, several modifications were made to the Sefara invoicing tool.

1. The user should be able to easily view the invoice after creation.

Invoice creation now had a visualization tool to see how it would show up as a pdf, as an email, and also the checkout page.

2. Autocomplete capabilities were added to customer and product/items. Email and WhatsApp notification functionalities were added.

Users can create a new product to easily add the product to their invoice in the future. The customer dropdown allows users to easily add a customer or select an existing customer using an autocomplete tool.

For additional features, I added in email and WhatsApp notifications and also a memo field for additional details.

3. Customers should be able to easily access and complete the checkout flow with their own branding.

Invoice checkout was reworked to emphasize company branding rather than emphasizing the Sefara platform. Users expressed Sefara shouldn't be so dominant; they wanted a focus on their own business.

A branding creation wizard was created to allow users to add company logo and colors to the invoice and checkout flow. The end result is shown below.

Outcome

1.After 1 month, approximately a quarter of users used the invoicing tool to receive at least one payment.

2.The user sentiment improved based on positive feedback received from customers based on a customer survey.

3.The preview tool capability was noted as one of the features users liked most.

Takeaways

1.Don't assume what users want

There are many invoicing tools out there. A tool may be very popular and widely used in one market, however in another market users are looking for something else.

2.Embrace user feedback and data

Understanding what users wanted and the tools they currently used helped me design a better solution. Existing solutions are great models to learn from, however ultimately the product designed must be based on what users want.

Next Steps

1.User Feedback and Insights

Using a product to understand user behavior, such as FullStory, can reveal insights into how the user is using the invoice page. The data can be used to make modifications to the layout to improve user experience.

2.Evaluating Customization Capabilities

Basic branding was provided to users to add customization to the invoice and checkout pages. In the future, there should be an understanding of what level of customization most users want.