Category /
selected work
Expenses Mobile Redesign
Mobile-friendly way for job candidates to submit expenses for reimbursement
Tags:
Mobile / High-fidelity / User testing
Role:
Primary designer / User researcher
Impact:
Saved time for personas; Contributed 3 new components to design system
Timeline:
8 months
step 1:
Context
What is Bullhorn Expenses?
Job candidates submit their expense reports to the Bullhorn Expenses platform. These expense reports are then sent to the Bullhorn ATS for payroll admins to review on their desktop screens.
Quantifying the Issues
Through calls with payroll admins, we learned that they typically reviewed 40-50 expense reports a week.
Both payroll admins and candidates alike complained that the existing experience was overly complex and not optimized for mobile even though 55% of candidates used the mobile experience. Thus, our goal was to help both save time in their busy workdays by reducing complex flows and optimizing for mobile.
step 2:
USABILITY TESTING
Usability Testing Objectives
We interviewed payroll administrators from 4 different companies to showcase and test our new design system for the first time and validate whether the redesign met the needs of their job candidates.
We observed payroll admins perform the following tasks with the high-fi prototype I designed:
1. Create Expense Report
2. View Expense Reports
3. Upload & View Receipts
step 3:
Prototyping
Prototyping New Features
After usability testing, I worked with the product team to narrow down the most relevant takeaways. We came up with the following changes to the design based on user feedback.
Candidates often submitted expense reports without uploading their required receipts, often because they lost the receipt.
To solve this issue, we created a new feature for candidates to bypass the receipt upload by adding a missing receipt declaration. Thus payroll admins would know they lost the receipt and would not reject the expense report for not having one.
Expense Reports Tab
Editing Expense Reports
step 4:
final experience
Final Mobile Experience
You can view the final mobile experience below, separated into the three main tasks: Create expense report, view expense reports, and create expense report.
1. Enter Expense Report Details
"Finish Later" confirmation pop-up
New position for "Delete Report"
2. Add and Save Expense(s)
"Expense type" field triggers others
New "Missing Receipt Declaration"
New "Submit Report" pop-up
3. Submit Expense Report
Confirmation pop-up before
Information toast banner after
1. Find Expense Reports
"Active/Past" toggle to sort reports
New ability to edit a subitted report
2. View/Edit Expense(s)
New ability to detach receipt
New feature to sort expenses
3. View/Edit Report Details
Export report and/or view attached receipts
Total reimbursement info at bottom
1. Upload Receipt
Add receipt from local upload
Feature to take new photo
2. View Receipt
Option to edit/crop uploaded photo
Delete receipt if needed
Project Learnings
This work culminated in a presentation to internal leadership. Overall, it was valuable to see how the user feedback influenced our new designs, although ideally I would like to chat with our candidate end user in the future as well and examine impact via quantitative metrics more. This project was a great experience in owning a design from research to design and collaborating with the product team!
"As the original designer on the project, I was very appreciative of the level of detail Angela put into improving the existing UI components in the designs. Angela attended weekly meetings with the other UX designers involved with the Talent portal to both contribute and stay on top of updates to a brand new (and constantly evolving) design system. She was diligent about bringing up questions about the components that came up while she did this work, which ultimately helped improve the design system."
Katie Todd
Principal UX Designer at Bullhorn
