We Woke Up Like This: New Look for Expenses, Reports, and More!

Shawn Borton —  October 3, 2014 — 2 Comments

It’s that time of year again – the team is working hard from Portugal on the offshore and if history has taught us anything, that means it’s time for the design department to bring you a lil’ visual refresh. This time around, we’ve tackled the way we display tables, including a revamped Expenses and Reports list, and we’ve given our Approval Mode selector a complete makeover too. 

Old Expenses Table

Out with the old…

New Expenses Table

…and in with dat new new.

Let’s Start With The Tables

We’ve made some pretty significant strides in the past couple of years in terms of our UI, but the expenses list and reports list haven’t really changed much. We wanted to not only make the tables easier to read and look at for users, but also to make them easier to style and control for our engineers as well. Rather than bloating our base table class, we’ve now got a whole slew of helper classes to keep our CSS much cleaner. Semantically, it’s now easier for engineers to pass these helper classes through to the table object to add certain effects to the table such as draggability, hoverability, selectability, and more.

The reports list got a lot of love too, making it easier for admins and employees alike to scan through reports regardless of the length of report titles, email addresses, and policy names. Colored borders on each row help communicate the report status, and new report type icons make it clear that you are looking at a report or an invoice (and down the road – a trip and more!).

New reports list.

The new reports list.

New report table.

Tables in reports need love, too.

What Up, New Approval Mode Selector

From our support agents, we realized that a number of users were confused about how to change the default Approval Mode in a policy. It wasn’t obvious that there were a number of options to choose from, or even how to choose another option in the first place. To solve this, we made a much more visual selector that clearly shows which option you have enabled, and which options you have to choose from.

Old approval mode selector

How do I change approval modes…?

New approval mode selector

There we go.

We hope you like the new changes, and we’re always open to hearing your feedback! If improving a product that millions of people use to make their life easier is your cup of tea, then head over to our jobs page because we’re hiring too.

Shawn Borton

Posts

Designer at Expensify.

2 responses to We Woke Up Like This: New Look for Expenses, Reports, and More!

  1. 

    Shiiiiinnneeey. That is all.

  2. 

    Reblogged this on ["hip","hip"] and commented:
    New shiney goodness @ Expensify

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