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):
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.