Autobooks - PDF Invoice Upload Feature
Adding a feature to the existing Autobooks website, an invoicing and payment solution that is integrated into online banking.
My Role
User Research, Persona, User Flows, Task Flows, Wireframing, Prototyping, Usability Testing, Branding, and UI Design
UX Designer
Team
Individual Project
Timeline
June - July 2023
Problem Statement
When it comes to small business finances, they are often overseen by one person who does not have a finance background. Therefore, these businesses look for an all-in-one, integrated financial application, like Autobooks, that can help them invoice, manage cash-flow, check bank balances, etc. They rely heavily on these applications to ease the frustrations of managing finance, but even so, they still run into issues with human error. A lot of invoicing frustrations can come from account numbers or banking numbers being incorrectly input into the system, resulting in failed payments, banking fines, and frustrated clients & vendors. Small business need to ways to minimize human errors and speed up their invoicing processes.
Project Goals
Help small business owners that are trying to be efficient with their time, quickly & accurately add vendor information to their Autbooks account.
Help small business owners that are frustrated with manually typing in vendor invoice information automate this process to minimize human error and save the time.
Project Process
Starting the Research Journey
Data Analysis
Starting the Design
User Testing
Refining Design
Final Results
Starting the Research Journey
I started off the research for this project with my personal invoicing with experience with Autobooks in mind, but soon discovered that I needed to gather information from others to fully understand the scope of needs for other users like me and what problems affect everyone.
I informally interviewed a few people with accounting backgrounds and small-business owners to understand their main struggles that are worth investing time and research into before diving into research.
But First…What is Autobooks?
Autobooks is a complete accounting solution designed specifically for small businesses. It is a cloud-based invoicing and payment solution that is integrated into online banking. It simplifies the invoicing and payment process by enabling you to create and send invoices and receive payments directly to/from your bank account.
AI in Banking
AI is being used in Finance and Banking globally with the use of OCR and NLP (natural language processing) algorithms to extract text and data from scanned documents, including PDF files. It can extract metadata such as dates, names, and addresses, and output the data in a structured format.
Autobooks does not currently use any AI in its program to help its users which make it less competitive when compared to other E-Invoice companies in the industry.
Data Analysis
In order to get a good understanding of what small-business owners needed improved on Autobooks, I leaned on interviews and a lot on survey participants to get a good sample size.
User Pain Points
Sending payment to a vendor, but the banking information is entered incorrectly into the system
Incorrect Vendor Info
Not Enough Automation
Not enough automation causing repetitive and unnecessary workloads
No Confirmation
No confirmation with process, like if an invoice was received or if an account number was correctly or incorrectly entered
Survey Findings
Interview Insights
I wanted to make sure to get a good understanding of different perspectives to support my survey findings. To accomplish this I interviewed an accountant with a business background & a small business owner.
Interviewee 1
Accountant, Male, 28
“Right now, all the invoicing suites that I have ever used are independent online platforms, so a platform that is connected with your banking… and having AI uploading PDFs and taking all that information and automatically putting it in the system… That would be a game changer. No typing!”
Interviewee 2
Small Business Owner, Female, 66
“I used to do everything by hand, so I am a fan of the automated transactions that make things easier & save time, like memorized transactions & customer history. It would be nice to see more of that type of automation that speeds things up.”
Personas
Competitive Analysis
How Might We Questions
Help small business owners that are trying to be efficient with their time, quickly & accurately add vendor information to their Autbooks account?
How Might We…
Help small business owners that are frustrated with manually typing in vendor invoice information automate this process to minimize human error and save the time?
How Might We…
OCR Feature Being Added
In order to meet the user needs of automating e-invoicing more efficiently and effectively when users are trying to import vendor invoices/bills, the feature that has been added is a PDF import feature that uses OCR technology to detect information from an imported invoice/bill PDF and generate information into the system, that can be edited and corrected. OCR takes the edits that you make and learns from them to be faster and more efficient moving forward.
Sitemap
User Flow
Adding New Vendor Invoice
Initial Low-Fidelity Prototype
Easy Uploading PDF Option
OCR Invoice Uploading
Shows When Invoice are Uploaded Successfully
All Invoices Show Up on Main Vendor Information Page
High-Fidelity Prototype
The feature that was incorporated into the existing Autobooks website was the OCR PDF Vendor Invoice Upload feature that can be accessed through the Vendor tab.
User Testing
Usability testing was used to test the efficacy of the design and what improvements need to be made to increase the quality of the user experience and address user pain points. Only one feature was tested in this usability study; the addition of the OCR PDF Vendor Invoice Upload feature.
Usability Study Parameters
Study
Moderated Usability Study
Location
Seattle, WA & Remote Testing
Participants
3 Participants
Length
Avg. 10 min
Usability Test Findings
Change the language from “Vendor Invoices” to “Vendor Bills.” The most mis-clicks were attributed to the confusion between the “Invoice” sections & the Vendor Invoices that could be found within the “Vendor” section.
Language Improvements
Change PDF loading bar aesthetics to match on all pages. The aesthetics were a bit distracting for the users because the different phases of the PDF uploads looked a bit different.
Aesthetics of Loading Bars
Add “Preview File” Feature on Uploading page, so that users can double-check that they uploaded the correct documents, especially when uploading many vendor invoices at once.
PDF Preview
Refining Design
A lot of the feedback that I received from the Usability Study involved making the invoice PDF uploading feature easier to navigate and easier to understand. Because business owners need to maximize their time, making information as easy to process as possible is the goal.
Design Developments
Loading Page Aesthetics
Adding PDF Previewing
Style Guide
Final Results
When integrating the final improvements generated by the usability study, I also got feedback that it might be useful to also have this feature in the mobile version of this website, so I developed the feature on mobile as well.
Final Desktop Design
Mobile Version
Autobooks does not have its own app because it is integrated with users’ banking accounts, so the mobile version acts more like a responsive website pop-up than a dedicated application.
I made sure that the feature reflected the current branding on the mobile website.
Next Steps
I would love to redesign the Autobooks website to make it more modern and improve the UX experience through better UI.
Redesign Autobooks
Add Another Time-Saving Feature
It would be useful to look into ways to automate the collection of information, filling tax forms out, and putting information into the Autobooks system.
Wow! Thanks for making it until the end!
Fitsio
Social Fitness Application
Pianese
Piano Learning App
Roadie Rendezvous
Road Tripping Planning & Budgeting Website