UX Design, UI Design
Peri® is an enterprise travel and expense management application. It allows the employee to draft and submit expenses, keeps the expensing records. On the other hand, it provides a platform for the managers, auditors and other potential supervisors to process and manage the reimbursement.
Just imagine you, as a sales representative, went to Spain for a marketing conference and you have got many related payments that need to be expensed by the company. You have a handful of paper receipts, receipt photos and receipt emails there, quite a mess. You need to group them carefully based on your fading memory, log them one by one in the gloomy and ancient system and fill in lots of fields for each of them. Expensing process will definitely be a nightmare. Maybe you have even thought about giving up. That’s why you need Peri, which will serve you nicely so you can deal with the expensing in the simplest way ever.
After initial stakeholder review, we figured out and illustrated four primary roles in the system:
User interview, competitive research, and stakeholder review brought some challenges up to the surface:
- In order to expense something, the employee has to create a report and add individual items to the report then submit the report. It’s not a intuitive way for the users, especially for the first time users. Guiding them so they can get familiar with the process is a challenge;
- When it comes to the intermedium users, how to lighten their burden, make it as easy as possible to create expenses and reports is also challenging;
- On the manager side and the auditor side, there are so many reports coming in every day, how to assist them to quickly get started and process those submissions efficiently is a big challenge as well;
- As the project goes, some stakeholders addressed the need for ‘trip request’, which means the employee has to submit a request before a business travel actually happens and estimate the budget for all the potential expenses in that trip. And then the employee will create a report from the trip request and make sure the expenses are within the approved budget. How to help the employee to track the budget of reports dynamically is complicated and will challenge the UX design.
Here are the challenges related user flows and stories:
Challenge 1, 2
The challenge of an employee submitting expense report is that most users are not aware that they need to create a report to submit the expense. But the data structure requires this two-step process. The mismatch between the system model and the user’s mental model makes the first time users confused and even skip the first step. I clearly remember that a co-worker complained about this unclear process: “I have logged in my expense 2 weeks ago, so where is my money?” And the finance team could not do anything but told him that he needs to create a report first.
In order to submit expense to get reimbursement, the employee has to fill in a lot of fields for the report and individual expenses, the process contains tons of data gathering and entering on submitter’s side. It is a primary issue and we should try to optimize the experience.
The approve manager is often responsible for dozens of people, and the expense reports stacked in his queue for reviewing can be overwhelming. We need to figure out an ideal way for him to quickly scan the pending reports and go to the ones that need his extra attention.
Though similar to approve manager, the auditor is responsible for even more people, and the expense reports stacked in his queue for reviewing can be more overwhelming. Other than that, when reviewing a report, make informed updates is extremely important and demanding job. We need to do our best to facilitate the auditor.
When the employee has a trip request at hand and wants to create an expense report from it, it is a big deal to make sure the expense does not exceed the set budget. However, the commonly used tables and card lists do not provide such transparency, we need to provide a unique solution to help the employee track the remaining budget dynamically.
To help the users onboard in the easiest and most friendly way, I need to imagine what I will be looking at if I myself was a first-time user. After he logs into the system for the first time and tries to expense something, he will see nothing but an empty expense or report list. It’s neither helpful nor friendly.
So how to guide the user onto the right track naturally? It’s actually a matter of considering ‘Empty State’ thoughtfully. I displayed the informative but concise text explaining what this list is about and what should be on this list. More importantly, a clear and highlighted CTA is placed right below, urging the user to quickly start his first expensing process right from here.
It’s known to all that the primary user group shall be the intermedium users who have learned to use the system. However, many of them are still struggling about entering tons of receipts and logging everything properly. The solution here is to aid them entering the fields as easy as possible with the data they have at hand, meanwhile, give them the flexibility to
So tech-wise, we provide receipt upload and OCR recognition for auto-filling the expense details. And design-wise, I carefully designed a very flexible workflow that supports the mentioned user needs. The user can start with expense or expense report and slowly add on the pieces left from each side; The user can create/attach expenses one by one and they will be saved safely in the expense hub; The users are always allowed to save an incomplete expense, incomplete expense report, or unassigned expense, which they can come back to later and finish the task.
- Start creating from wherever they want;
- Build things a little by a little;
- Have a break, gather the rest of the data and then pick up the task whenever they want.
When it comes to the approve manager, the research told us that they will open up the portal once or twice a week and try to finish up the stacked reports all at one time. What they need is a ‘To Do List’ of everything that he needs to go over. Definitely, he has visibility to all the reports that sent by his employees but the common use case is that he will only look into the ones that are pending in his queue for review. So I separated the reports and put them under different tabs based on the ‘Status’. Actually there are more than 3 report status (Draft, Rejected, Manager’s Queue, Auditor’s Queue, Approved, Payment Initiated, Reimbursed) in the system, but the manager is not (and does not need to be) aware of that, so I designed the 4 tabs (All, In My Queue, In Progress, Closed) to better match a manager’s mental model. They can dive into all the reports that need his attention easily with this carefully-grouped tab system.
And in the report details page, the approval manager can easily track the historical activities happened to this report to get synced in no time. All this information will be sufficient for him to make an informed decision.
The solution here came from putting my feet into the user’s shoes. Imagine when they need to know the details of remaining budget and how detailed it should be. It goes without a doubt what it is when they are drafting a trip request-based expense report. There are two ways of creating this sort of expense report, the first entry point is from a trip request, the other one is the regular expense report route. Therefore, there are two screens where they will be looking for the budget information. I designed a budget sheet to clearly display the budget, expensed amount and remaining amount for the total and each individual category.
Due to the time and resource limitation, the pain points came from the internal, namely the employees in our company. In addition, we gathered requirements from stakeholder reviews and competitive analysis. So the bias might exist because of the lack of diversity and small sample pool.
However, since we have had the new approval manager and auditor portal live and our dev team is slowly implementing the rest of the design, we will run usability tests and simultaneously be waiting for the feedback coming into the help desk to see how the design works with real users and start iteration for better user experience.