Invoice Approval Application- A UI/UX Case Study

Time period: 1 Week

Problem statement

The legal department in your company acquires services from other vendors (attorneys or lawyers) to work on certain cases. Your application needs to authorize the vendors and approve the rates of the attorneys working so that the invoices sent from the vendors for the attorneys' work can be approved. Provide a web-based software solution for your company so that vendors can first be authorized, then attorneys' rates can be approved, and finally, invoices with details of the attorney’s billing can be approved and paid out.

| Project objective

My objective is to create a comprehensive software system that simplifies and improves management operations inside a law firm or legal organization. The goal of this program is to automate repetitive operations, increase productivity, and provide a centralized platform for managing attorney-related information, case papers, client communication, and overall workflow.

The process

1. Gathering & analyzing all the available data to prepare a visual board of the early-stage ideation phase
2. Understanding the problem statement and considering the user journey to design an efficient user flow
3. Creating a user persona based on the nature and potential users of the product
4. Framing the why & what questions
5. Wireframing
6. UI designing

| Research topics

| Questions

Why is invoice approval required?

To guarantee accuracy, compliance, budget control, effective payment processing, dispute resolution, audit readiness, cost management, and client satisfaction, invoice approval is necessary. It is a crucial procedure for upholding fiscal honesty, legal compliance, and efficient business operations.

Why is the invoice approval process important?

It is essential for ensuring the accuracy of financial transactions and supporting an organization’s overall success and financial health.

Why do we need software for invoice approval?

increased productivity, accuracy, visibility, teamwork, compliance, and integration. It simplifies the approval procedure, boosts communication, promotes data management, and offers insightful data for efficient financial management and decision-making.

Why is such a service required by clients?

It gives clients the tools they need to manage their financial operations, including invoice approvals, effectively, which enhances financial management and fosters stronger vendor relationships.

What are the requirements for such software? (what it should be like)

User-Friendly Interface: Both attorneys and clients should find it simple to browse the software, review invoices, and start the approval process. The software should have an intuitive and user-friendly interface.

Customizable Approval Workflows: The software should allow for the configuration of customizable approval workflows to match the organization’s hierarchy and approval processes.

Document management: The program must offer a centralized location to keep invoices, relevant files, and supporting documentation. It must make it simple to upload, arrange, and retrieve papers for review and reference.

Integration Capabilities: The software should be able to easily integrate with the organization’s current accounting, ERP, or other pertinent software systems.

Compliance and Security: To safeguard private customer and financial data, the program must follow stringent security protocols. It ought to provide data encryption, user access restrictions, and adherence to pertinent laws like GDPR or HIPAA.

Alerts and Notifications: The program should have alert and notification features to let users know when an invoice is approved, rejected, or when its status has changed.

Tools for Collaboration and Communication: The software should make it easier for lawyers, clients, and other parties engaged in the approval process to work together and communicate effectively.

Mobile Accessibility: It may be beneficial for the software to have mobile accessibility, allowing attorneys and clients to review and approve invoices on the go using smartphones or tablets. This ensures flexibility and convenience in the approval process.

Audit Trail and Compliance Documentation: The software must keep a thorough audit trail that documents every activity made during the approval process. It should keep track of who looked at, approved, or made changes to invoices, as well as the appropriate timestamps and information.

Audit Trail and Compliance Documentation: The software must keep a thorough audit trail that documents every activity made during the approval process. It should keep track of who looked at, approved, or made changes to invoices, as well as the appropriate timestamps and information.

Flexibility and Scalability: The software must be flexible and scalable to meet changing organizational or client needs. It ought to be capable of managing several users, approval requests, and invoices without experiencing performance issues. It should also be adaptable enough to change with evolving business needs or operations

Integration with E-Signature Solutions: The software should be able to allow integration with e-signature solutions if necessary in order to enable the digital signing of invoices and improve the convenience and effectiveness of the approval process.

| Secondary research

After the primary research phase, I proceeded to understand the product even better, so I collected some basic data that is available regarding the process and steps involved in the authorization and invoice approval process of an attorney.

What does an attorney’s invoice look like?

Primarily, these are some of the common criteria for an attorney drafting an invoice:

1. Law Firm Information:
2. Client Information
3. Invoice Date and Number
4. Description of Services
5. Time and Billing Entries
6. Expense Breakdown
7. Fee Structure
8. Subtotals and Taxes
9. Discounts or Adjustments
10. Total Amount Due
11. Payment Terms and Instructions
12. Attorney Contact Information

| Invoice approvals

How do invoices get approved in a general scenario?

Summarized in 10 steps

| Step 1

The company’s responsible division or employee, usually the accounts payable division or a designated billing coordinator, receives the attorney’s invoice

| Step 2

The invoice is examined to make sure it contains all relevant information, including the name of the law firm, the client’s identity, the date and number of the invoice, the description of the services, time and billing entries, an expense breakdown, a fee schedule, and any supporting documentation.

| Step 3

The invoice is checked for compliance with the company’s policies, such as billing rates, expense guidelines, and any applicable legal or regulatory requirements.

| Step 4

The invoice may need to be coded or categorized according to the company’s accounting system or matter management system. This step helps with tracking expenses and allocating costs to the appropriate matter or department.

| Step 5

The invoice goes through a series of internal reviews and authorizations before being approved. Depending on the company’s hierarchy and internal control policies, the specific approvers may change.

| Step 6

The invoice is carefully examined during the approval process to ensure accuracy, completeness, and conformance to the services delivered. This could entail comparing the invoice to any supporting documents, such as contracts, engagement letters, or details of the work being performed.

| Step 7

During the review process, any inconsistencies or problems are discussed and settled with the lawyer or law office.

| Step 8

Once all necessary reviews and reconciliations are completed, and any discrepancies are resolved, the invoice receives final approval from the designated approver(s) within the company.

| Step 9

After approval, the accounts payable department initiates the payment process based on the approved invoice. The invoice details are entered into the company’s financial system, and the payment is scheduled according to the agreed-upon payment terms.

| Step 10

Once the payment is made, the accounts payable department reconciles the payment with the approved invoice. This ensures accurate record-keeping and proper documentation of the payment made to the attorney or law firm.

How does an attorney get authorized?

| Basic user flow

After understanding the basic process of reviewing and finalizing an invoice and gathering information about the potential users of the software, I decided to draft a basic user flow of the software to better understand the structure.

| Information Architecture

The purpose of information architecture is to build a logical and user-friendly framework that makes it easy for users to discover and access the information they require. It entails evaluating the relationships between various bits of material, identifying the information hierarchy, and building successful navigation methods.

| Assumptions about the user

| Assumptions about the business

| Market Analysis

After keenly studying the business model and before I moved up to the wireframing stage, I wanted to see other available models out there. After my research, I came across six good competitors out there, named as follows:

After understanding all the competitors and going through their products one by one, I had a general idea of what was available on the market. This gave me great insight into starting with the initial idea and wireframes, which later led me to the stages of drafting the final screens

Out of all these platforms, the one that intrigued me the most was Clio due to its easy-to-use interface and clean UI.

| User Persona

Before moving to the wireframing stage, it was important to understand the needs and goals of the users of this product. In order to do that, I generated two user personas. One for the attorney or lawyer uploading the invoice to be approved, and another for the invoice approver responsible for getting the invoice approved.

|Empathy mapping

After creating the user persona, the next task in hand was to understand the user’s pain points and frustrations to build a product that is aligned with the user’s interests and needs.

| Brainstorming & Wireframing

Putting everything under consideration, along with all the collected data, it was time to do some sketching and ideate the final idea in a visual format. I created a general flow of a user getting their invoice approved based on the formulated output.

| High-fidelity wireframes

| Final Screens

| Conclusion

I effectively ideated and designed an attorney management software for corporate lawyers delivering services to corporate customers using this UI/UX case study. I wanted to streamline the invoice clearance process and improve the user experience by concentrating on intuitive design, smooth cooperation, compliance, and efficiency. The design solutions prioritized user demands, boosted productivity, and reduced mistakes, resulting in a more simplified and effective invoice approval management system.

| Scope for improvement

If I had more time and resources regarding this project, I’d have made further improvements and changes to the product:

1. Build a mobile application along with a website for large-scale users using multiple devices.
2. Addition of a feature to make the product much more customized for users to get a much more personalized experience of using the product, like choosing templates for the invoices and adding content to the document based on the type of services offered.
3. Design a user flow for the authorization of attorneys and lawyers getting onboarded to the application