How to expense multi-page receipts on mobile

This was an exercise in deep interaction design. ExpenseIt is Concur’s relatively new simple expense reporting app. Take a picture of a receipt and ExpenseIt uses OCR to fill in all the stuff you used to have to do manually, like “merchant name” and “total cost.”  I was not involved in the design of the first version, but after a while, we started noticing that multi-page receipts (like itemized hotel receipts that get printed on several 8.5×11″ sheets of paper) were being submitted as multiple receipts — there was no way to expense a multi-page receipt in the app! I was assigned the task of designing an interaction that would make it clear what a user needed to do in this case. There are several ways of accomplishing this (you may remember some of them from using scanners to scan documents back in the late 90s and early 2000s):

ei_concept_1

1. Ask at the beginning of the expense flow to ask if there are multiple pages

ei_concept_2

2. Ask whether there are any more pages after the first page has been captured

ei_concept_3

3. Give the user a way to toggle between the two types of flow, either before or after one has been entered

Through a combination of analytics and contextual inquiry, I discovered that most people who use apps like ExpenseIt are usually capturing single-page receipts and will actively look for the correct way to capture multi-page receipts. In Android, this means that the simplest thing to do is add it to the overflow menu. We also wanted an even quicker way of launching this flow; one that didn’t require the user to look in the overflow menu (which is hidden by an ellipsis in the actionbar on most devices). Testing on multiple people while I designed, I went through three different versions.  The main takeaways were that the user needs a way of knowing they’re in a multi-page flow throughout the entire process.  Take a look at the final version and see what you think.

launch_proto_expenseit

Leave a Reply

Your email address will not be published. Required fields are marked *