Viewpost

Invoice Creation

Viewpost is a B2B invoicing and payment platform that has processed over 25 million invoices, totalling $45 billion in invoices and $3 billion in payments.

Creating and viewing an invoice is critical for an invoice and payments platform, but Viewpost’s implementation didn’t allow for flexibility or evolution via planned invoice “add-ons” such as late fees, email reminders, and dynamic discounts.


Objective

Redesign the invoice creation process to allow for platform growth.

Role

UX Research & Design

Date

Oct 2016 - Dec 2016

Research & Understanding

I conducted interviews with internal stakeholders and current users to understand what was critical at various points in the process, as well as current frustrations. I also worked closely with the customer support team to identity top customer complaints that we could address.

The Flow & Pain Points

I consolidated the discounting process into three main steps, with major pain points outlined below.

Vendor Creates
Draft Invoice
Vendor Previews
& Sends Invoice
Customer Receives
& Views Invoice

Vendor Creates Draft Invoice

Unclear which fields are required or optional.

Redundant and confusing fields around invoice date, due date, and terms.

No room for additional features.

Vendor Previews & Sends Invoice

The majority of the invoice isn’t visible.

Summary bar could be made more glanceable.

All secondary actions are hidden in a drop down menu.

Customer Receives & Views Invoice

Customers receive an email that links to the invoice details page.

Screen real estate isn’t utilized, requiring users to scroll to view the full invoice.

Using the results of my research and analysis, I created three key design goals that would guide my exploration and final design.

Design Goals

Provide a flexible way to incorporate invoice “add-ons” that would allow our platform to evolve.

Improve glanceability of the invoice/bill summary component.

Streamline the process, reduce clutter, and remove unecessary options.


Ideation & Testing

I created several paper prototypes to discuss potential solutions with our team, seeking a way to make the status of an invoice more understandable and explore potential new features, such as an activity feed.


Testing The Prototype

I moved to higher fidelity prototypes as I began exploring the concepts of a sidebar, summary card, and leveraging color for clear status indication. I also conducted user testing to compare the sidebar concept with the current invoice creation flow.

Test Results

I conducted user testing on Validately, asking users to send an invoice and create a recurring invoice with both the old and new designs. The results favored the new sidebar concept, scoring 17% higher in ease of use.

The Final Design

The final design utilizes a sidebar panel with summary card that provides a very glanceable overview and space for “add-on” cards that work well for both desktop and mobile use.

Vendor Creates
Draft Invoice
Vendor Previews Draft
& Enables “Add-ons”
Customers Receives &
Views Invoice

Vendor Creates Draft Invoice

Summary card updates as the invoice is filled out and provides a clear, color-coded overview of the invoice.

Optional fields are designated to the side panel to optimize quick invoice creation.

Primary and secondary actions are highlighted, while less common but necessary actions are designated to the “More” button.

Vendor Previews Draft & Enables “Add-on”

Preview of invoice is presented more clearly, with the summary card and “add-ons” housed in the side panel.

“Add-ons” can be toggled on or off, and can be configured per customer or for all invoices.

Invoice and summary card reflect changes caused by “add-ons”, such as the new Early Pay Discount.

Customer Receives & Views Invoice

Summary card and discount banners change to reflect the customer’s view.

Number of actions have been reduced and are contained in the “More” menu.

Clear back button allows the customer to return to the previous page.

Further Considerations

The final design included changes to both the bill and invoice detail views. The side panel and card components provide a flexible system that will allow for future platform and feature growth.


We decided not to update several less popular features - comments, attachments, and history - for the intial update, but identified multiple ways to improve these features and incorporate them into the side panel in future iterations.

The customer side panel could house cards for quicker payment, autopay, or viewing history with the vendor that sent the invoice.