Invoice Implementation @ Manufactured Networks Inc.
Overview
Manufactured (MFD) is a startup company that helps manufacture, finance, and distribute products. The invoicing process for the Accounting team involved challenges in managing PDF invoices from vendors and freight forwarders, leading to a manual and time-consuming workflow. The limitations of the existing file format prompted the need for an on-platform solution.
Company: Manufactured Networks Inc.
My Role: UX/UI Designer
Deliverables: User flow, Wireframes, Prototype
Target User: Internal Accounting team
Timeline: Q1 2023
Outcome
50% reduction in the number of returned payments.
Reduced time to process an invoice from 4-5 business days to 1-2 business days.
The on-platform solution streamlined the entire invoicing workflow. Users can create, send, and track invoices without the need to switch between different systems or formats.
Problem
How might we implement invoice processing within the Manufactured web application?
The accounting team needs an invoice processing feature to streamline management, enhance reconciliation, and improve the efficiency of the invoicing process.
User Research Insights
To ensure a human-centered approach, we conducted interviews with our target users, the accounting team. These interviews aimed to understand the current process of handling invoices and the need to address them.
We identified the invoicing needs of our primary user:
🧮
Reconciliation: Compare and verify financial records to ensure they are accurate.
✅
Validation: Reduce the likelihood of errors and ensure financial data is reliable.
📍
Centralization: Reduce the need to navigate external tools or documents.
Decision
Build the invoicing feature into the existing foundation of the cashflow module, which already handles simple transactions.
🔗
Attribution: Attach individual payment requests to invoices.
🧩
Integration: Allow various payment gateways to facilitate easy and secure payments.
Competitive Analysis
Why did I do it?
My main goal was to discover common design patterns that could inform the development of Manufactured's invoice feature. Understanding prevailing conventions in the industry would help ensure a user-friendly and intuitive user experience.
How did I do it?
I analyzed three prominent accounting software applications: Quickbooks, Xero, and Soho. This analysis involved analyzing documentation, tutorial videos, and user reviews to gain insights into their invoice creation and management features.
What did I learn?
I gained valuable insights into common design patterns and features found in leading accounting software which helped me understand user needs and expectations. Such as:
Sortable Invoice List with Batch Actions: All three applications offer a dashboard with a table view of invoices, allowing for sorting, filtering, and batch actions such as approval and payment.
Inline Editing: Line items can be added and edited directly within a table interface.
Custom Invoice Templates: Users can customize the style, layout, and content of their invoices.
Custom Email Notifications: Users can send and schedule reminders to customers regarding their invoices.
Custom Item/Service Templates: Users can create templates for recurring products and services, streamlining the invoicing process.
Payment Gateway Options: Provide multiple payment options, including credit cards and bank transfers.
Information Architecture
The MFD web platform had already implemented payment transactions within the cash flow module which meant a lot of the backend requirements to support invoices (such as payment gateways and accounting software integration) were already fulfilled. This made it easy to figure out where to place invoicing within the MFD app and how users would access this feature.
sitemap featuring the path to the invoice module
Ideation
I created low-fidelity wireframes to explore the steps and screens needed to create an invoice. I referenced PDF and Excel files used within the accounting team’s current workflow to figure out the layout of information. It was during this phase I discovered how to allow users to associate payment requests and products with an invoice.
Invoice Creation Userflow
Invoice Approval Userflow
Low-Fidelity Wireframes
Decision
Create an invoice form with modal windows for interactions such as attaching invoices and products made within the MFD platform.
Prototype (1st Iteration)
After establishing the main flow in low-fidelity I moved on to creating a high-fidelity prototype to validate the design solution with our target users. I managed to quickly create a prototype by using MFD’s established design system. The main goal of this prototype was to illustrate the interactions involved in creating an invoice. This prototype was presented to the accounting team for feedback.
User Feedback
According to users, the invoice creation module contained too many pop-ups which made it difficult to keep track of contextual information. The prototype was presented to the accounting team to gauge whether the new solution would meet their needs. Many interactions (such as attributing payment requests or products) were done in a separate modal which would appear over the invoice. Having the invoice obscured made it hard to cross-reference information. The revised solution would need to have the main invoice form visible at all times.
Decision
Create a full-screen interface with side panels for invoice creation.
This will help users cross-reference relevant information without switching between different windows.
Low-fidelity wireframe detailing a split-screen interface for attaching payment requests.
Popups were excessive, disrupting user focus
Final Prototype
The prototype was revised according to the accounting team’s feedback and was approved. The new interface contained the invoice creation form on the left side while the right side contained an overview of transactions involving MFD and its selected customers for improved cross-reference. Any other screens regarding adding payment requests or line items would open as a side panel.
Post Launch
🎯
The feature helped finalize an invoice for a repayment plan worth ~ $280,000
The first customer we got to use the invoice feature with was an undisclosed beverage company. This customer needed financial assistance to fulfill their order of beverage goods. MFD agreed to lend money to cover the cost of goods through a repayment plan. The accounting team finalized the invoice within the web application documenting all manufacturing and distribution services covered as well as terms of the repayment plan.
Impact
50% reduction in the number of returned payments.
Invoices are processed in 1-2 business days instead of 4-5 business days.
The on-platform solution streamlined the entire invoicing workflow. Users can create, send, and track invoices without the need to switch between different systems or formats. This efficiency contributed to better time management and reduced chances of errors. The on-platform solution provided validation checks and data accuracy measures, reducing the likelihood of errors and ensuring that financial data is reliable.
