Bullhorn Expenses Redesign

Mobile-friendly way for job candidates to submit expenses for reimbursement.

TIMELINE
8 months
ROLE
Lead designer and UX researcher
TEAM
Senior designer and Product manager
TOOLS
Sketch, InVision, Whimsical, Zoom
IMPACT
Led redesign, conducted 4 user tests, contributed 3 new components to evolving design system

STEP 1: CONTEXT

What is Bullhorn Expenses?
Bullhorn sells recruiting software, one part of which is Bullhorn Expenses. This primarily web-based experience is where job candidates would submit their expense reports. These reports are then sent to the Bullhorn ATS for payroll admins to review on desktop.
Who are the target users?
What prompted this redesign?
Both personas complained that the existing experience was overly complex and not optimized for mobile. My objectives were to simplify the experience and ensure mobile responsiveness to ultimately help candidates and payroll admins save time in their busy work days. The statistics below help quantify the needs of our target users.

STEP 2: USABILITY TESTING

My team and I used the high-fidelity prototype I designed below to conduct usability tests with payroll administrators from 4 different companies. I ran most of the calls in partnership with the senior designer and product manager on our team.
Usability Testing Objectives:
Usability Testing Tasks:

1. Create Expense Report (0:00 - 1:06)
  • Enter report details and edit if needed
  • Add receipt and associated expenses
  • Save expenses and submit report

2. View Expense Reports (1:07 - 1:22)
  • View approved expense report
  • View report details for reference

3.Upload and View Receipts (1:22 - 1:57)
  • Add receipt from local upload
  • View uploaded receipt
  • Delete receipt if needed

STEP 3: PROTOTYPING

After gathering feedback from our usability tests, I synced with our product team to narrow down the most relevant takeaways for our designs. The following screens depict the changes we made to the experience including a new feature and new design components.
Pain Point #1:
New Missing Receipt Feature
Screen A addresses the first pain point of "blurry receipts" by having text that clearly instructs candidates to upload one receipt per image. Screen B shows our new "Missing Receipt Declaration" feature which allows candidates to declare a missing receipt for expense reports where receipts are required, to bypass the receipt upload step.
Pain Point #2:
Editing Expense Reports
Change A demonstrates a simple solution to the problem of not being able to read the expense report status by adding a border to increase legibility. Change B addresses the problem of an unclear expense button by adding elevation and a blue button with a pencil icon to indicate it is editeable.
Pain Point #3:
Finding Expense Reports
Compared to the Version 1 screen, our final prototype added an "Active/Past" toggle to help filter expense reports and make it easy to search (Change A). We also allowed submitted expense reports to be edited to prevent duplicate reports and foster user freedom (Change B).

STEP 4: FINAL EXPERIENCE

Here are the final prototypes on mobile and desktop (use Bu11h0rn! as password). The three design components I added to the design system were the "Active/Past Toggle, Status Chip and Pagination." You can view the main updated flow of each main task below.
Create Expense Report
1. Enter expense report details
  • New "Finish Later" confirmation pop-up
  • New position for "delete report" option
2. Add and save expense(s)
  • "Expense type" field triggers other fields
  • New "Missing Receipt Declaration" feature
  • New "Submit Report" confirmation pop-up
3. Submit expense report
  • Confirmation pop-up before submitting
  • Informational toast banner after submission
View Expense Reports
1. Find expense reports
  • "Active/Past" toggle to sort reports
  • New ability to edit a submitted report
2. View/edit expense(s)
  • New ability to detach receipt from expense
  • New feature to sort expenses
3. View/edit report details
  • Export report and/or view attached receipts
  • Total reimbursement information at the bottom instead of Total Pay & Bill
Upload and View Receipts
1. Upload receipt
  • Add receipt from local upload
  • Ability to take photo
2. View receipt
  • Edit and crop uploaded photo if needed
  • Delete receipt if needed
Project Learnings:
  • Valuable integrating user feedback into designs
  • Presented results to internal leadership
  • Ideally chat with candidate end user in future
  • Examine impact via quantitative metrics