Problem:
Upside Business Travel helps grow companies and careers by providing digital travel services and support to small-and-midsize companies. Upside’s users were struggling to get all the information they needed from receipts. This was causing frustration and challenges when expensing their purchases.
Goals:
To successfully improve this issue for our users, we needed to understand what financial and payment information users really needed post-purchase, and define how we could best present that information.
Process:
Stakeholder interviews
interviewed our customer service team
reviewed more than 2,400 inbound conversations
discovered that 10% of those conversations were questions surrounding receipts.
led a working session with our finance team on what their wish list would be if they could put any information they wanted on a receipt.
User interviews
We talked to client leaders who review travel expenses and users who submit the expense reports to understand their pain points, wish lists, and what they’re looking for when they review a receipt.
Wireframing
Based on the interviews and data, we wireframed a solution for a possible receipt layout. We kept it simple so we could move fast and iterate on this wireframe often throughout the user testing phase as we validated our choices.
Usability testing
We returned to some of the same — and a few new — users and stakeholders and asked them pointed questions about the wireframe. These questions were targeted at the issues we heard during the interviewing phases. We also worked with some internal and external finance professionals to redline all of the terms and information we were using to be sure this matched industry standards and user expectations.
A header box calls out the most important information, while the Purchase Details, below, provide detailed information.
Design
Once we had a solid wireframe, the design phase needed to account for all possible scenarios of flight, hotel, rental cars, paying at the time of purchase, paying at the time of check-in, cancellations, updates to reservations, and so on. Working with the development and quality engineering (QE) teams, we outlined those scenarios and design a template that used modular pieces to build all the variations easily.
The updated designs feature a modular design that can accommodate many different receipt variations through using clear components. We used Freehand (part of InVision) to collaborate between Product Management, UX Design, and Engineering teams to be sure we were clear on all possible variations.
Engineering Collaboration
Throughout the development process we addressed technical limitations to the intended designs. Once built, collaboration with our QE team was critical in making sure they understood the intended designs and were able to verify the desired results.
Results
Conversations with our customer service team asking for an itemized receipt decreased from 10% to 2.5% in the first month after this work was released.
Next Steps
We are monitoring receipt errors, inbound conversations, and other feedback to continue to improve the receipts over time.