Currently the invoicing solution is not user friendly. It has hidden actions and pour organization of information, including the placement of content, actions, inputs and menus. The invoicing has limited abilities that with research have shown are important for an invoicing product. The UI is visually unappealing giving a poor overall experience. The biggest issue with this current feature is that it is only available on desktop browsers. It is not responsive and there is no native app. This is especially a problem for any user that needs to be able to make a new invoice, request payment or look up an existing invoice on the go.
Project Type
Duration
1 person design and research
(Additional team members reviewed and collaborated during sessions)
Overall Waterfall within Agile sprint environment
Spring to December 2023
Tools
My Role
Figma
Jira
Usertesting.com
AQA - Web Accessibility Testing
Google Meet
Lead UX Researcher & Designer
Skills
Competitive Research
Information Architecture
User Flows
Wire Framing
Design
Prototyping
User Testing
The Challenge
The problem that needed to be solved: How to make invoicing easy for a desktop power user and at the same time for an on-the-go app user. How do we make the overall user experience efficient, show important information in prime areas, and create a design that feels modern?
The Plan
Start with researching the competition. Next, organize the actions required to complete the task. Then, move on to the design phase of wire framing all the way to high fidelity prototypes. Last, is user testing and finding insights. This will be repeated as needed to make a great user experience.
The Process
Research
Tasks Preformed
Competitive Research & Analysis
User Research & Interviews
Journey Map
Competitive Research
I started with finding out who the competition was and made a list. Then, I spent days taking screenshots and looking at the interactions and transitions of elements. I paid special attention to the features within the invoicing section the competition offered. I also made sure to look for any WCAG issues the competition might have to make sure I did not repeat the same mistakes.
User Research
It was important to understand the needs of multiple user types. To start this process I conducted interviews of users to find out what pain points they were experiencing with their current solution. I also wanted to understand what was working for them. Also, were there any features that were missing from their current solution?
I also asked some quantitative questions, such as how long they have been using their current service, how often they use it (monthly, weekly, or daily), or have they tried other services in the past?
Journey Map
Even the happy path user journey provided insights to research and create an even better user experience.
Analyze
Tasks Preformed
Identify opportunities and pain points
User Flow
Information Architecture
Ideate Solutions
Verify Requirements
Opportunity Insights
1. Combining the business services dashboard and the main accounts dashboard for business users would greatly improve the overall experience. However, that will be another project in the near future.
2. Research ways to improve the filtering experience
3. User test saved searches option.
4. Create custom invoice templates for faster invoice creation for common invoices.
5. Add quick actions on mobile device to Edit/Review & Send invoices.
User Flow
Information Architecture
This step was useful for our filtering feature for the invoice table on the dashboard. The first step was to organize the different status types. Then, from there determine the other data filters a user may want to filter an invoice by.
For the individual invoice page I waned to make sure that the most common actions taken on this page other than editing the data on the invoice would be easily accessed by quick actions.
Ideate Solutions
I wanted the invoice page to follow a similar pattern as a standard invoice. However, adding a table for line items divides out the sections with minimal dividing lines, which in turn creates less visual noise. Softening the dividing lines with a medium grey color improved the the experience of quickly scanning items in the table. It was also important to follow a ledger type alignment to assist the user to more easily scan the invoice for the information they are looking for.
Creating a table that was responsive and modern looking took a few tries, but in the end I was able to accomplish the task. I was also challenged with an more evolved set of line items. Which was having the ability to add multiple bank account transactions as individual line items or have the ability to a standard line item. No current competitor has this unique ability.
I would also need to us the current design system's UI to make sure the entire product maintained it's cohesive style.
Verify Requirements
Making sure I did not miss any important legal elements, I met with the compliance team to get approval.
Design
Tasks Preformed
Review pain points and requirements
Ideate low fidelity design
Create high fidelity design
Prototype and pretest
Review Pain Points and Requirements
Before I starting on the design I reviewed the pain points and opportunities. I also referenced other invoicing UI's to make sure that I was following what most users would understand with an invoicing product.
In addition to the standard invoicing functions, I had the added requirement of creating a brand new function that is not currently on any on-line banking or app. Which really challenged me and I love that.
Ideate Low Fidelity Design
To start, I worked on building preliminary wireframes to block out the areas of each element, starting with the dashboard page. Then, I quickly moved to the invoice page.
Create High Fidelity Design
Once I had a wireframe I was happy with I moved on to creating the design using the design systems UI elements. I built out tables, menus and groups of information in a easy to scan format.
Native Invoice Preview
I made sure to bring attention to the most important information. Also, allowing enough white space for the user to rest their eyes.
Then, I starting designing the invoice page. I wanted to always keep the invoice in edit mode when viewing or editing. And, then provide a quick action to view the invoice preview page if they wanted. I kept the invoice elements in the same position as the invoice preview page to help the user familiarize themself with the strategic placement of information.
Native New Invoice and New Customer
In addition to the invoice page, invoice preview page, and the invoicing dashboard, we needed a customers page with individual customer information pages. Using our design system components and following the existing patterns we currently use in our product I made designs for all pages, sections, menus, drawers, and modals or sheets.
Responsive Web On-line Banking Invoice page for desktop and mobile.
I designed both desktop (Responsive Web on-line banking) and native application products as similar as possible with placement of content, inputs, actions and all other UI elements. I did this while maintaining the individual platforms UI components and style.
For this invoicing feature we wanted to not only include the usual invoicing product abilities and functions, but we also wanted to add the ability to attach a transaction from a spending account to an invoice and use the transaction as a billable item. This functionality has never been done before in a banking platform. Since, this was the first of it's kind I tried to figure out what other banking or invoicing functions were similar to what we wanted to achieve and I researched those. Gaining inspiration to create a great user experience.
Prototype and Pretest
Once the designs were approved by my UX team I was able to prototype to as closely as possible simulate a real invoicing feature with Figma. After I completed the prototype I spent a lot of time going through the prototype making sure it was working properly and that the flows needed for user testing were fully functional.
Desktop On-line Banking Customer Filter Prototype
Native Invoicing Dashboard Invoice Search Prototype
Desktop On-line Banking Dashboard Filters Prototype
Native New Invoice Creation Prototype
Desktop On-line Banking Create New Customer from Invoice Prototype
Native Edit Invoice Prototype
Desktop On-line Banking Edit Invoice Prototype
Test
Tasks Preformed
Prototype testing
Prototype Testing
From there I created the user testing script for unmoderated user tests. I preformed the user tests using Usertesting.com.
Once, all tests were complete I reviewed the sessions and marked important findings. I calculated the data collected in the user tests and added them to a presentation of the findings I shared with my UX team. The results were outstanding.
Conclusion
Great Feedback
During the user testing I ask those that have not used other invoicing products what they thought about our product feature. The feedback received was it is easy to use, and it's like second nature. I asked testers that have used other invoicing products what their opinions of our invoicing experience is compared to what they have already used. The feedback I received was phenomenal. All testers preferred the invoicing experience I designed. They commented the organization of information and elements are were you would think it would be making it very easy to use.
Ease of invoice creation 100%
Filter functionality 100%
Template creation 100%
Thank you!
