Katie Mentus Author
Team Travelbank

Optimizing Productivity with a New Expense Design

With our expense product in the market for almost a year, we learned a lot about how businesses and employees manage expenses. You’ve heard it before, no one likes doing expense reports. Employees loathe that three hour stretch on a Friday before COB when they scramble to scan their receipts through the Xerox machine. The finance team dreads being the expense police, kicking back reports with incorrect data and heckling the team to submit their spend before quarter close.

Early on we solved a lot of these issues with snap-and-go technology for capturing receipts and one-tap expense reports from an easy to use interface. But, as our product platforms and user base are growing, the expense data is becoming more dynamic than ever before. Our users are spending in foreign currencies, they’re syncing expenses from various sources, and our products are becoming more intelligent thanks to innovations in OCR technology and machine learning.

So as we planned the next release of expense reports, we stopped and asked ourselves, how can we leverage design to optimize productivity for these complex use cases? And can we create a design that replaces feelings of loathe and dread with ease and delight?

We started with visual hierarchy.

After analyzing how users were engaging with our expense product and carefully listening to their feedback, we redesigned the expense list to bring the most important content to the front, using typography and color to give visual weight to top tier content like the merchant, amount, and category.

The new visual hierarchy for expense cards prioritizes important information

We minimized the receipt photo thumbnails to showcase more meaningful content such as foreign currency conversion and whether or not the expense is reimbursable by the company.

Next, we brought the new UI to life.

After making drastic updates to the visual design, we identified content that is frequently edited and added in shortcuts to increase productivity. For example, now from the list of expenses users can easily tap on the category and make updates in line.

we identified content that is frequently edited and added in shortcuts to increase productivity

You can also tap on the receipt thumbnail and review it directly from the list view.

Finally, we’re adding animation to exude confidence.

With our snap-and-go camera interface, users are able to take photos of receipts while our technology fills in the details like the merchant, date, and category. In this new design, we’re considering adding an animation that visually communicates to the user when their expense is getting scanned and has been successfully completed.

Scanning animation visually communicates when receipts are getting scanned and processed

Overall, our new expense design helps users save even more time and effort. By diving into some of the most tedious and common use cases for expense management, we were able to identify the most important information and bring it to the front of our design in an elegant and effective way. Listening to user feedback allowed us to increase productivity with shortcuts for frequently edited data fields, and animations help us communicate more to users, using less space.

Get the Latest Release.
This new expense design is available in the latest release on iOS and Android. Download from the app store and sign up for free to get started.
Download The App