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
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. [heads turn] Oooohhh… Ahhhh..
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
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.
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
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
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
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
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
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
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
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
Report Tools: On the right of the report, you will find the new 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
New Report Page
