Supplier invoices
Web App - Streamlining Invoice Management for Small Businesses
Role
Senior Product Designer
Year
2022
Responsibilities
Research, UX design, UI design, prototyping, user testing
🚀 TLDR section
Qonto is a major B2B fin-tech in hyper growth phase, and part of their objectives for 2022 was to gain a deeper and wider audience, through the upsell of existing clients and acquisition of larger SMEs.
Being bookkeeping one of the major key plan differentiator from Basic to Smart, the plan was to provide a solution that would make users switch from accounting and bookkeeping pure players to Qonto.
💡 Keep all your supplier invoices in one place and know exactly what's due, when, and to whom. Schedule your payments in advance and complete them with just a few clicks.
This new feature allows Qonto customers to centralize and process all of their supplier invoices in one convenient location directly from their Qonto account.
- Both paid and unpaid invoices can be bulk imported from a computer, mailbox, or a Google Drive or Dropbox folder.
- Paid invoices and receipts are automatically matched to the correct transactions in History.
- The due dates of outstanding invoices are visible at a glance thanks to automatic data extraction, and customers can benefit from a seamless transfer initiation process with a pre-filled SEPA form.
Introduction
The problem
Large companies have entire departments dedicated to bookkeeping and accounting.
However, for most small to medium businesses and solopreneurs, managing invoices from suppliers is a lengthy and time-consuming process. The first step is to collect and validate all invoices. Then, you need to process and keep track of payments, and export the data for accounting purposes. This results in spending several working days each month managing the status of expense documents.
Qonto's users were not motivated to document information in Qonto nor willing to upgrade because of missing basic features, so they would use third parties for bookkeeping and accounting.
User story 1
Users need a way to ... centralize and visualize invoices so that they can keep track of documents correctly and efficiently.
Feature Goals
Drive engagement and upsell on Solos by building and activating Invoicing and Bookkeeping.
🎯 Feature success: Reach 500 organisations that have at least 1 invoice in the paid section (manual action from the user, excluding automated processing) within 30 days (M+1)
Research
What are some issues created by the mishandling of invoices?
- ⚠️
10% to 20% of late payments are due to incorrect information on an invoice.
- ⚠️
Late payments incur a 10% fee in Europe + a 40€ fee per invoice.
How do users store their documents at the moment?
Some users still store invoices in paper format, especially in the constructions industry (2% of users)
Most solopreneurs will receive a PDF via email/slack and will keep the document floating around a folder inside their personal laptop.
Others will rely on specialized bookkeeping and accounting tools (Quickbooks, etc..)
Competitor teardown
Analyzing our competitors to see what different subset of features they have implemented, what we can improve in terms of usability, and understand the product usage from a user perspective.
Feature guidelines
At this moment we're building a preliminary sketch in low-fidelity of what we want our product to include. We try to forget about UX decisions and UI details, but focus on product features and user flows to identify a possible happy path for our user to reach their objectives.
User story 2
Users need a way to easily collect documents from various sources: email, file upload, tax system integration, scraping.
User story 4
Users need a way to review and validate details of an invoice for accounting purposes.
User story 5
Users need a way to repair OCR errors, so they can manually reconcile invoices and payments.
Agreed User Journey
The selected user stories can be summarized and visualized in the journey below. They fit into 4 main steps for the user: Collect, Review, Pay, Reconcile.
Happy path user flow
We also designed a scenario for a “happy path” that would guide us in building a prototype for the full experience, taking into consideration the steps a user can go through.
Wireframes & Solutions
Invoice Section Exploration
Various explorations on how to display the new section in the UI, several back and forth with the design system team, product managers and frontend developers to make sure that the designs are effective, feasible, and compliant with the rest of our product.
Sidepanel & Upload Flow
Solution: Tab-based Organization
We decided to separate invoices in different tabs (paid/unpaid) based on their status, allowing users to immediately recognize the status of each invoice and easily move one invoice between tabs.
Solution: Loading State & OCR
We introduced a mandatory loading time of 6 seconds to prevent users from editing info while the document is being scanned.
Solution: Manual Reconciliation
We added a secondary CTA that would open a modal where users can select transactions (sorted by relevance). Matching an invoice to a transaction would also change its status to “paid”.
Solution: Auto-complete for Suppliers
We implemented a dropdown auto-complete selection to reduce manual errors when entering supplier information.
Developer's Handoff
Once we solved all the hard points, we finalized all screens and flows, not just for the happy path but also for all unhappy paths, loading states and network errors.
Prototype
We iterated several times to provide a prototype for the full experience that would be aligned between product, design, and tech teams.
Results
We reached our goal of 500 organizations activating the feature in the first month.
We also drove 52 pricing plan upgrades from Basic to Smart+ in the same time-frame, these are counted only from our new landing page, without considering upgrades which happened from other touchpoints.
500+
Organizations activated
52
Plan upgrades
