Rethinking business travel receipts

At Egencia, I was the dedicated designer on the Trips team– we handled business travel itineraries and anything a user might do after a trip is already booked. When I joined the team, it became clear to me that our receipts experience was flawed– receipts were hard to find and difficult to read once you found them. I suspected it might be one of our customers' biggest pain points and something we could greatly improve upon.

Existing receipt

• No visual hierarchy
• Too small to read without zoom
• Unclear labeling

Reviewing feedback

I was lucky that Egencia already had a platform specifically for collecting feedback from customers. Here's what I found people had to say about receipts:

• “My trip information for receipts is often convoluted."

• “I cannot download or email receipts. This is an issue and needs to be resolved ASAP."

• “Receipts for completed trips are very hard to find."

After reviewing customer feedback, there was no doubt in my mind– receipts were a problem. I approached the team about adding improving receipts to our priorities with some specific goals in mind.

Goals

1. Clarity

• Design receipts that are easy to understand and consume.
  
• Provide clear price breakdowns for different types of charges
  
• Label and name everything explicitly

2. Accessibility

• Emphasize the ability to download and email
• Optimize to be easily read on mobile devices

3. Discoverability

• Make receipts easier to find
  

Approach

I brought my pitch to the Trips team, both developers and product managers, and presented it in front of other key stakeholders from across the business as part of our quarterly planning cycle. My pitch was a success, and receipts became a top priority.

Exploring what's already out there

What are the most familiar patterns in receipt design?

What do business travelers' other receipts look like?

How can we leverage what's already out there for a clear solution?

I divided my research into three different types: travel industry examples (what travelers are already using) simple price breakdowns (the most concise examples of a receipt possible) and detailed invoices (examples that include each detail of a transaction). My goal was to take the best elements of each to create an intuitive and uncomplicated design.

Competitive research

Sketching and iterating upon ideas

I began sketching out initial ideas just to get down everything I was thinking. Then, I put together some higher fidelity prototypes to share with fellow designers and the Trips team for feedback.

One thing I also concluded from my research was that the receipt didn't need to live on its own webpage, but could instead be a linked PDF travelers could open, print, and email from their web browser. This would not only remove a huge amount of development effort, but also leverage what travelers already use for other documents.

First iterations

• Created hierarchy with color
• Utilized full-length of page
  
• Experimented with type weights

Second phase designs

• Narrowed width so all receipt information would fit on mobile
• Tried out stronger color contrasts
  
• Brought relevant information together

Narrowing down a final design

Once I got feedback on some of my earlier iterations, I began consolidating my ideas into a final design. Some of the feedback I decided to keep in mind was simplicity, being conscious of those who prefer physical printing, and legibility, especially on mobile. With those incorporations, a final receipt design was born.

Considering the end-to-end experience

The improvements to the receipt itself still didn't address one of the main issues identified from during my research: discoverability. It was important to me to not just think about redesigning receipts, but to consider the user's entire experience in context.

Legacy itinerary

In the legacy experience, payment and receipt information lived in three different places:

Historically, we'd thought of receipts as a separate entity from the cost summary, as one was an official invoice and the other was simply our estimated breakdown. I wanted to eliminate any confusion that might exist between the two and bring all payment information to one place in a clear and defined way.

Freehand sketching

• Brought payment and receipts information to the top
• Eliminated disconnect between Cost Summary and Receipts link
• Exposed all charges to the surface instead of hiding in dropdowns
  
• Emulated physical receipt design to be immediately identifiable

Updated itinerary design

After reviewing some of my freehand ideas, I created a new right rail for the itinerary page, bringing the estimated costs and receipts link to one easily discoverable place.

Testing proposed improvements

I then took my designs to UserTesting.com and filtered test subjects for business travelers from a diverse range of income brackets and locations. The goal of these tests was to measure the new design against my three goals– better clarity, accessibility, and discoverability.

UserTesting sessions

• Tested both old and new designs
• Asked users to interact with both their itinerary page and receipt PDF
• Asked users to rate:
  • Ease of finding receipts
  • Ease of understanding cost
  • Clarity of information

Looking through qualitative feedback, it seemed the new designs met our three main objectives:

Old Design

New Design

1. Clarity

“Really have to focus to find all the information.”

“All the information is right there, it’s quite transparent.”

2. Accessibility

“Hard to read heavy disclaimer at the top and very small text"

“I like the way it’s laid out, not melded all together. Very easy.”

3. Discoverability

“I would expect receipts to be with the Cost Summary, but it’s on the top bar. Honestly, it wasn’t really that noticeable."

“It drew my eyes right there. The top part looked like a sample receipt that said, ‘Hey, this is your receipt.’”

Quantitatively, it was also evident that the new design brought us closer to our goals. On a scale of 1 to 5 where 5 = Very Easy, test subjects rated finding their receipt on the old design a 4.5 out of 5. On the new design, they rated it 4.8 out of 5. On a scale of 1 to 5 where 5 = Very Clear, test subjects rated the information on the old receipt a 4.5 out of 5. On the new receipt, they rated it a 4.9 out of 5.

I made a few small tweaks based on this testing, reordering some of the items in the cost summary and making a few text sizes larger. Once that was complete, I share the designs with the team to push to the site.

A/B testing

At Egencia, we also use A/B Testing on any changes to the experience before they are migrated fully to our product.

When these designs were A/B tested, we saw 2% fewer calls to customer service. That may seem small, but it adds up to millions of dollars saved. And most importantly, fewer calls to customer service means users are finding what they're looking for.

Going forward

The tested designs were rolled forward, but the process didn't end there. After going live in production, we continued to iterate as small issues came up– like how some travel agents worked in a tool that didn't support PDF viewing. Most significantly, even as the itinerary page continued to evolve, reciepts were finally recognized as an important priority thanks to the results of this effort.

© Sarah Gorman 2023