top of page

Designing an E-form for requesting Invoice payment.


Users at Northeastern University are using an excel sheet for the Payment request form which should be printed and sent out to the Accounts payable department for approvals, the entire process is time-consuming and complicated, causing hindrance to the efficiency of employees. I was hired by Northeastern University to help the finance department build a new workflow and design an online form to improve the work efficiency, eliminate potential errors, and optimize the manual work process.


UX designer


  • Help Project manager to define features

  • Conduct usability research

  • Defining Workflow

  • Visual and interaction design

  • Development collaboration


  • Finance Management team

  • Project Manager

  • Development team

  • Accounts Payable staff


16 weeks 

The Challenge.

Northeastern University has a very complicated and disorganized Invoice processing system. Few challenges that were mentioned by the Finance department and the end-users are.

The invoice requesting process is still paper-based ​

Use of different forms for different methods of payment

No transparency into the status of the payment request

Double Diamond Approach @ Northeastern University





Contextual Inquiry

SME Interviews

Findings & Persona

User stories

Problem statements


Usability Testing


Need for re-design.

3 top reasons for rethinking online form


Current Form

Vendor Name - Vendor ID - Notifications on the side- Address - Invoice details- compliance check 

Team: "We need to create an online version of the form"

The current form needs the user to manually do a Vlookup to find the vendor's ID.

The current form has an important message on the side of the form which may go unnoticed by a lot of users

The current form uses multiple textboxes or combined text boxes for important fields


Studying workflows, users, and product gaps

We followed a mixed-methods approach to understand product gaps, user's needs and behaviours.

Contextual Inquiries


  • User needs & User behaviours

SME Interviews


  • Project Goals

  • Workflows & Interactions

  • Usability issues

Project Goals.

One-stop-shop service

Build a one-stop-shop service for all types of invoice payments by creating an online form that provides an option to make multiple types of payments

Implement a user-friendly experience that provides transparency into the status of a request and the ability to look back at the historical transactions

Transparency in transactions

Eliminate Manual work

Automate invoice process to eliminate the need to print paper signing forms offline and manually create banner transactions

Top findings.

What did we know about our users and product?

Three user types were identified from user research based on the user tasks.

End user

Head of department

Accounts payable member 

Can be faculty, staff or student who submits the form and requests for invoice payments

Is the head of the department, to whom the submitter reports to. She is the one who approves the request initially and forwards it Accounts payable department.

She is responsible for the visual compliance check and then entering the details into the university's banner to maintain records and later approves the payments

# Insight 1

Lack of efficiency

The form is heavily based on text fields and lacks accelerators.

# Insight 2

Lack of scalable design

The current design does not support the addition of new features like automated vendor ID search which confines the  usability.

# Insight 3


The form is not optimized for those with low technical knowledge ( A vlookup is not an ideal solution for a Literature professor)

# Insight 4

Too much manual work

The form is to be printed out and then sent for approval, in case of disapproval or any issues the entire process must be repeated (do a vlookup for vendor id, fill the form, print it out, and then send it again)

# Insight 5

Lack of Transparency

The current flow does not support transparency of the status of the request. user are left with no information about the request once they send the form to accounts payable

User Stories

As the end-user, I would like to quickly submit the request form  and be able to see the status of my request so that I can know if my request has been approved, if not, to know what is the issue for its disapproval

As the Head of the department, I would like to have an online system set-up so that I can provide immediate feedback to the requestor if they have to make any changes to the form

As a staff of Account payable, I want a process for entering only important details into the banner and avoid all minor things which can be automated so that I can focus on compliance check and ensure there won't be any discrepancies

Concept and Design.

Ideation, workflows, design guidelines and mockups

Approach to the solution

If the form is integrated with the Banner ERP

I conducted multiple meetings with the Accounts Payable Department and End-users to learn their pain points, during these sessions, we evaluated the current processing system and defined a new workflow. From the insights I got from the meetings, I developed several hypotheses, the ones that got the stakeholder buy-in are 

Manual lookup for information can be eliminated as required information will be auto-populated.

Automated notifications will be sent defining the status of the request

It can speed up the process as well, including Vendor profile, payment system data, and potentially even previous invoice submissions

Proposed Workflow

Based on the feedback from stakeholders, we combined the form and Banner ERP into one concept and generated workflows.

Swim lane flowchart (1).png

Design Guidelines.

A set of design principles to guide decisions

Less is more

Leave enough white space around areas so each section clearly catches a user’s eye. By keeping it simple we will improve the overall user experience.

Speak simply

When it comes to forms, we all prefer plain language – even the academics amongst us, the geniuses, and the experts.

Assistance or Validation

Use assistance and inline validation, the aim here is to illuminate users as to what they need to do or point out where and how the user went wrong.



Pop-Up notification to notify users of the limit for using the Form

No more Vlookup

Vendor Details with Vendor ID search that pulls information from Vendor Directory

Eliminating Text boxes

To reduce the complexity of the form, we included Add more option, in case a user has more than one payment 

Web 1920 – 7.png


A confirmation notification that provides transparency to the user for future reference

UI Specification documentation.

Screen Shot 2020-11-17 at 5.58.02 PM.png

I was also responsible to create an additional document for developers explaining the interactions of the form, I used sheets to provide the details of each section of the form, and explained how the interactions work. 

Usability Testing.

I conducted usability testing with different teams including Account's payable team, the compliance team, and the end-users. The new version of the process and the form needed to be tested and verified. I came up with a testing strategy and created a supporting document to perform the user-testing successfully. The following are scenarios that were validated while testing Invoice Automation.

Screen Shot 2020-11-17 at 6.10.00 PM.png
Screen Shot 2020-11-17 at 6.10.17 PM.png
bottom of page