A new take on expense reports that suck even less

Thomas Genin —  December 4, 2013 — 12 Comments

Since 2008, Expensify has been striving to make expense reports not suck.

Over time, the design of our site and mobile app has evolved, but the basic design has remained pretty much the same. Sure, we have tweaked and improved it, but globally the design has stayed relatively consistent.

Before

Before

Historically, our users have enjoyed Expensify because it’s an easy to use product with a clean interface. To continue to provide this feel, we felt that the current UI/UX could stand for some modernization and simplificaition. It took tons of collected feedback, lots of time and even more discussion but we’ve finally come up with something that we feel will make your Expensify experience better.  You can try this pretty, new Expensify by opting into our beta server.

After

After. [heads turn] Oooohhh… Ahhhh..

For a company, creating an expense report “solution” can be an easy process. You define what you need and just do it, user experience be damned. Many people are using an awful Excel based process. (want to leave that behind? Try SmartReports) .

We here at Expensify have a different take on it. We believe that expense reporting can be simple and convenient using automation and robust company controls to encourage compliance. To this end, we’ve created an application that supports individual users, tracking their personal expenses, AND multinational corporations with thousands of employees. Our current design did a good job at “hosting” all our functionality, but as I said before, we can do better.

New Header, Improve Navigation

One of the first things you’ll notice is the new header/navigation bar. We merged our headers  into one, freeing a lot of vertical space.

Header

Header

The global navigation of the application has been updated. The dashboard is now “hidden” behind the logo. It is our homepage, so binding it to the click on the logo made sense. This freed vertical space on the navigation bar but also removed a secondary screen from the highlights. The navigation will now contain the most important pages of the site prominently: “Expenses”, “Receipts”, “Reports” and “Admin”.

Help Menu

We also grouped most of our help links into a new, context sensitive, help menu. Here you can find common questions, direct access to search our help website, and a way to send us direct feedback.

Help Menu

User Menu

You may have also noticed the picture on the top right. Click on it and you will discover our new user menu.

User Menu

User Menu

This menu aims to group together, in a less obstructive way, the settings that apply to your account. You will find the list of policies that your account has access to and the ability to pick the one you want to use here. You can also connect to other users accounts thanks to our Wingman feature. Finally, you will be able to access your Personal Settings and change your avatar. For that, we are using the excellent Gravatar as it is easy to use, free and widely accepted.

Once again, hiding these “secondary” elements allows us to uncluttered the UI and show only the most important navigation elements.

Report Filtering

Pagination controls

Pagination controls

On the reports page, most of the changes are behind the scene.

We are now doing real backend filtering and use real pagination to load the list of reports. In plain English that means that we are now loading the 250 most recent reports initially. You can view more by using the pagination control on the top right of the reports list.

We hope it will solve the confusion created by our previous behavior of initially loading the last 45 days, which would make older reports “disappear” after a while.

Another benefit is the substantial speed boost. Accounts with a lots of reports can now load the page more quickly.

You can now filter the list of reports by submitter, report name and report ID using our search bar. For submitters, we even help you write the email address of the submitter thanks to our handy autocomplete feature.

Autocompletion of the submitter email

Autocompletion of the submitter email

Report Page

All previously mentioned magic, we spent most of our time improving the report page. Our goal was to provide an accurate preview of what your report will look like if you export it to PDF.

Report Page

Report Page

It’s hard to list all of the changes we have made, but I will try to focus on the most import ones.

Report status: We are finally displaying the status of the report!

Report status

Report status

On the same level you will find the report ID and the report type selector which allows you to convert an expense report into an invoice.

Policy Selector: The policy used by this report is now clearly indicated and can be changed using this control.

Policy Selector

Policy Selector

This single item justifies the whole redesign. By clearly separating the primary policy used by the account from the policy of a report, we hope to streamline and simplify the Expensify experience for user with multiple policies.

Report cycle: You can go switch between report without having to go back to the reports page, making the approval of a bunch of reports much faster if used with bulk approval.

Report cycle

Report cycle

Action Buttons and Next Step: We have increase the visual weight of the buttons for changing the state of the report to make it more obvious and visually accessible.

Action button and next steps

Action button and next steps

Report Tools: On the right of the report, you will find the new toolbox.

Toolbox

Toolbox

Here you can change the report layout, export the report to PDF, attach receipts, add expenses, and share the report with other people, etc.

To use Expensify with this new layout, just jump on our beta server. Tell us what you think, we are still making improvements!

We hope you love the changes! VIVA LA EXPENSIFY!!!

Old Report Page

Old Report Page

New Report Page

New Report Page

12 responses to A new take on expense reports that suck even less

  1. 

    I think we have been using Expensify since its launch. I have used tons of Excel based reports and even ones I created, Expensify is far and away the best expense management product around.
    Congratulations on this new leap in user experience.

  2. 

    Still struggling with features of iphone vs ipad vs website
    My company uses expensify to reconcile company CC but the mobile apps don’t always respond same way (cant save a new expense without a receipt-sometimes you don’t have the receipt yet). Will the apps ever catch up with the site? I need the convenience of apps to make expensify truly valuable.

  3. 

    This looks much better so far! I hope you will include support for both portrait and landscape entry.

  4. 

    Nice work! The streamlining is not only visually easier to navigate, it also makes your site easier to use. Thank you for the effort on this!

  5. 

    Hey Bob!

    The iPhone currently has most of the website functionality, except for changing some granular settings and admin features. We are working on bringing this complex admin functionality to the app. As an end user, 99% of what you need is already on the app. We are currently working on bringing all the functionality of the iPhone to the iPad.

    You should be able to create expenses without a receipt. If you click “Add Expense” you can manually create an expense without a receipt image. If you have any further questions, please don’t hesitate to email me ryan at expensify dot com. Thanks!

  6. 

    Like Bob A above, I’m still trying to figure out the mobile apps. I’d like yo be able to approve an expense report on my iPad, not just submit one.

  7. 

    Thanks Diane, we’ve heard that request a number of times. Right now we’re focused on fleshing out the submitter experience on mobile, but manager will come next!

  8. 
    Lyndall Marwick March 31, 2014 at 9:17 am

    Love the new look and the Wingman functionality works well for some of our exec’s who “don’t have time” for expense reporting. The one problem is we do not have a currency option we use to have on the old site. ZMW – the Zambian Kwatcha. Which is posing a problem for staff in Zambia at the moment! Please help! Keep up the great work

  9. 

    Hi, thank you for the kind words and for reporting the bug. We did a small mistake when we removed the ZMK currency which now “retired”.

  10. 
    Lyndall Marwick April 1, 2014 at 12:47 am

    Thank-you so much for the speedy response time and fixing the bug!

Trackbacks and Pingbacks:

  1. Expensify Beta: From the Design Department, With Love « Expensify Blog - December 27, 2013

    […] recently highlighted some of the new features you can expect to see with the launch of our new and improved Expensify Beta, but dive deeper and you’ll find that there’s a rhyme and a reason behind many of the design […]

  2. 4 Expensify Tax Tips you should know in 2014 « Expensify Blog - January 6, 2014

    […] extremely excited for 2014. Our revamped new site just went live last week and there’s plenty of new and exciting things planned for the […]

Have something to say? Share your thoughts with us!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s