Archives For design

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.

Name: Shawn Bortonbort

Alter ego/Nickname: Bort, Shane Burton, Bortista (for his supreme barista skills)

Hometown: Selinsgrove, Pennsylvania

Roles at Expensify: Chief Photoshop Officer & Part-time Designer

Expensify Start Date: 10:00 AM US PST on September 10, 2012

What is/has been your favorite project to participate on at Expensify?

Refactoring the sign in page. It turned out very well, and the team contributed some really cool images for your sign-ining pleasure.

Life outside of Expensify?

An abysmal chasm of confusion, loneliness, and darkness. (He’s on a pretty bad FIFA losing streak.)

Outside of Expensify and FIFA, you can find him wandering about the city by day, playing soccer by night, and getting $10 haircuts in the Tenderloin bimonthly.

What is your idea of happiness?

A 25 yard knuckler, 20psi of boost in my 1.8T, my Grandma’s meat pie. (Soccer banter, fast cars and Grandma Meola’s fantastic Easter-time dish to the laymen)

What is your idea of misery?

Spending a day with Internet Explorer.

Favorite hero?

My mother Linda – notably for her accomplishment as a back-to-back breast cancer champion.

If you could have a mediocre super power, what would it be?

The ability to untangle headphones with one hand.

How do you want to die?

In exactly the same fashion as General Maximus Decimus Meridius.

What would you look like as a statue of Buddha?

This:

Inspired by his recent trip to South East Asia.

Inspired by his recent trip to South East Asia.

The Expensify Experience

micah —  November 18, 2010 — 6 Comments

Bigger, Bolder, Better

For the past couple of months we have been working on overhauling the Expensify Experience. But what exactly does that mean? For one, it definitely involves a visual makeover. But making it pretty is just the surface. There is a lot more that goes on behind the scenes to make entire *experience* a better one.

Consistency

Whichever page you are on, whichever dialog you open, or whichever button you click, you should know and feel you are inside Expensify the whole time. For an overall sleeker look we created a unified color scheme, matching icons, a bolder logo, evenly distributed whitespace, controlled font sizes, rounded corners, and some surprise drop shadows here and there. To ensure everything looks the same way, we established styling patterns for existing and future features that designers and developers must adhere to.

Interaction

Since we see and breathe Expensify every day, sometimes it’s hard to see the app from a user’s perspective, when everything is new and unfamiliar, and at times even confusing. Thus we strive to make each action unconfusing and obvious in order to match the user’s expectations as closely as possible. Do the buttons look like buttons? Will a user know how to close a dialog? Should that be on the left side or the right side? These and more are the questions we tested, implemented, re-implemented, and discussed at length. For example, we did away with the cancel and done buttons to close dialogs, and opted instead for just a regular X, which is the same way you close a window. We added an ellipsis … to buttons that open a popup. There is no more search button if the search updates automatically. The main site navigation has moved from the left side of the screen to the top. Now there is additional information with tips, hints, and handy shortcuts on the left side of each page, leaving much more room to manage your data. Thus by merging established web patterns with bold explorations of new ideas we made Expensify as easy to use as possible.

Flow

Complex systems are complex, no matter which way you look at it. However, you can still make a complex system understandable by breaking it down into discrete steps that show only what is necessary at that point. Therefore, we carefully analyzed our flows to detect problem points, confusing messages, and just common annoyances. Then we crafted a plan to get highlight the positives and get rid of all the negatives (even if it meant massively reorganizing existing code) in order to achieve a much smoother flow.

Sign Up: Before, it took a user at least 5 steps to actually sign up and start using Expensify, given that they didn’t diverge into other convulted steps. Now, you can sign up in one click, and BAM you’re in the Dashboard, ready to start.

Sign In: Often what seems so straightforward can contain a number of different errors which crop up at a crucial point; in this case, before you’re even in the app. We polished our sign in flow to distinguish existing users from new users, pre-fill your email, show only the relevant Single Sign On option, and helpfully inform the user of any errors, making sign in seamless.

Import a credit card or bank account: What used to be a dreaded process is now as easy as 1, 2, 3, literally! The new import flow nudges you along your import journey, whether it means uploading an OFX or CSV file and customizing the settings or entering your username and password from on online account.

Features

Expensify wouldn’t be Expensify if it were just a plain ol’ expense reporting application. To get that little extra kick we added sugar and spice and everything nice, plus these juicy extras. Some of these new features have already been popping up, and they are all part of the big redesign. Morevoer, there a number of brand new features packaged in this launch.

Centralized Billing: To do away with the confusion of who is paying, we introduced centralized billing at the beginning of the month. You can read more about it here.

Reports: We simplified report states and added starred reports so you can easily see which reports are awaiting action. You can read more about it here.

People: With the people page you can consolidate all of your employees, consultants, clients, and others you work with, as well as manage their admin status and their approval workflow all in one place. You can read more about it here.

New Expense: Now there’s a better, slicker, quicker way to create expenses. You can easily switch between adding a manual expense, be it a cash expense or from a card, and a mileage expense. You can fill in all the expense details, and even attach the receipt or map right there. Another of the big improvements is the ability to create expenses in bulk. Modelled after a spreadsheet, the Excel-like table of data allows you to add multiple expenses faster and in one go. And yes, you can even add mileage this way.

Analytics: You could already quickly filter your expenses by date, category, tag, keyword, and then view them in a line, bar, or pie chart. Now you can save these charts to your Analytics page, allowing you to see more data at a glance. You can also go back to your filtered expenses with one click, so you spend less time getting to your data and more time thinking about your data.

Dashboard: We recognize expense reporting and tracking can be overwhelming at times, so we decided to give you a stable ground to start on. At first you’ll see big icons that guide you towards the next action you should take, so you can start expensifying as painlessly and quickly as possible. Moreover, the dashboard changes as your needs evolve. After you’ve added or completed an action, you’ll see in its spot a useful summary of your activity along with shortucts to jump straight into productive expensifying.

And it doesn’t end there. We are continually working on fixing, tweaking, and adding new features, so you can always expect to see improvements in the Expensify Experience.

So, what do you think? I’d love to read your feedback about these big changes. After all, we work for YOU.

I was taking with a user the other day and I asked “So, we’ve been doing a ton of work, what do you think?”   He thought about it and replied:

I have noticed massive improvements in the iPhone app. With the HTTP application, I’m hard-pressed to think of the changes I’ve encountered.

I was struck in two ways.  The first way was: ‘Wow, we’ve been working around the clock making this thing better, and he didn’t even notice?” But then the second was “Actually, that’s great news.  That means we’re doing things right.”

See, we have two conflicting goals: make the service better, but do so without alarming or upsetting our existing users.  We do this by making very small changes, continuously, and rolling them out in an incremental fashion such that — hopefully — nobody notices.  It just gets a little faster,  easier, and better every day.  Unfortunately (or fortunately?) sometimes we need to make substantial changes that people will definitely notice.  We’ve got a few of those coming up, so I’m going to try to explain what they are as they come, starting with the changes we just released to the reports page.

Behold, Stars and Simpler States

Expense reports can go through a surprising variety of states, many of which are generally uninteresting to you but we need to track anyway.  But whereas before we just threw the full complexity out there for you soak in, in an effort to make things simpler we’ve opted to reduce the number of visible states from over ten to the following five:

  • Open – This report is being edited
  • Archived – The creator has archived the report
  • Submitted – It has been submitted and is awaiting approval
  • Approved – It has been “final approved”
  • Reimbursed – It has been or is in the process of being reimbursed

Some of these states have informational sub-states — eg an “Open” report might have been “[rejected]“.  It’s still open, but this gives a sense of how it got there.  These sub-states appear in square brackets next to the name of the report.  Additionally, for those reports that are waiting on you to do something, we’ve added a helpful “ToDo” column that has a friendly star in it:

New ToDo column, simplified report states

So ya, it’s nothing earth shattering.  Some people might not have even noticed. But it’s the sort of increasingly-visible change we make every day, rolled out in a way that hopefully minimizes the impact on existing users.  We’ve got a lot more on the way, so please speak up if we do something you don’t like or if there’s something you’d like us to do more.  Thanks!