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.

By Uncategorized