Viewpost

Invoice Creation

UX Research + Design | Oct 2016 - Nov 2016

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 further  evolution via planned  “add-ons” such as late fees, email reminders, and dynamic discounts.

Check out the final design →

Research

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.

Objective

Learn how we might redesign the invoice creation process to allow for platform growth and new features.

Initial Design + Pain Points

Design Exploration + Testing

Design Goals

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.

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.

1. 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
2. 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
3. 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

Results + 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.

Further Considerations