Overview
Northeastern University’s finance department faced challenges with a time-consuming and complicated payment request process. To enhance efficiency, reduce errors, and streamline the workflow, the Northeastern University Information Technology Services team collaborated with the finance department to develop a new, professional, and user-friendly online form. This initiative aimed to optimize manual processes and expedite approvals, ultimately improving overall work efficiency.
My Role
UX Designer
- Assist the project manager to define features
- Conduct usability research
- Defining Workflow
- Visual and interaction design
- Development collaboration
Stakeholders
- Finance Management team
- Project Manager
- Development team
- Accounts Payable staff
Duration
16 Weeks
The Challenge
Northeastern University had a complicated Invoice processing system. Few challenges that were mentioned by the Finance department and the end-users are are as follows :
- The invoice requesting process was still paper based
- Use of different forms for different methods of payment
- No Transparency in the status of the payment request
Design Process

Double Diamond Approach @Northeastern University
Need for Re-Design

Top 3 Findings :
- The current form needed the user to manually do a Vlookup to find the Vendor’s ID
- The current for has an important message on the side of the form which may go unnoticed by lot of users
- The current form uses multiple textboxes or combined text boxes for important fields
Research
Studying workflows, users and product gaps
We followed a mixed-methods approach to understand
product gaps, user’s needs and behavior’s
Contextual Inquires
Takeaways
- User Needs and User Behavior’s
- Usability Issues
SME Interviews
Takeaways
- Project Goals
- Workflows and Interactions
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
Transparency in transactions
Implement a user-friendly experience that provides transparency into the status of a request and the ability to look back at the historical 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
Can be faculty, staff or student who submits the form and requests for invoice payments

Head of the Department
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.

Accounts Payable member
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
Inclusivity
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

Concept and Design
Ideation, Workflows, Design Guidelines and Mockups
Approach to the Solution
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

Design Guidelines
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.
Mockups
1- Notification – Pop-up Notification to notify users for the limit of using the Form

2- No more Vlookup – Vendor Details with Vendor ID search that pulls infoirmation from Vendor directory

3- Confirmation – A confirmation notification that provides transparency to the user for future reference

UI Specification Documentation
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.
