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.

6 responses to The Expensify Experience

  1. 

    Love the changes, especially to the mileage area. Great job! One request: if we could only create a mileage expense in the place where I would create them from, the iPhone app…

  2. 

    As an early adopter, I am anazed by the changes I see every week. The system has saved us countless hours since May. The employees like it and accounting likes it. Great choice for us!

Trackbacks and Pingbacks:

  1. You’re the Boss: This Week in Small Business | LIVENEWS.ME - November 22, 2010

    […] A 17-year-old makes $130,000 thanks to Apple. But did he do it legally? Expense-tracking service Expensify launches a new […]

  2. UX Design: What are the best examples of brilliant but simple UX design on the web? - Quora - March 30, 2011

    […] UI; clean, functional, effective. You can read about their creative/design process here – https://blog.expensify.com/2010/1….1:24pmView All 0 CommentsCannot add comment at this time. Add […]

  3. Office Profile: Meet Mich « Expensify Blog - April 29, 2011

    […] is the most exciting project you’ve completed so far for Expensify?  The Expensify Experience […]

  4. How to Sell it To the Man « Expensify Blog - June 24, 2011

    […] User Interface is constantly praised for its simplicity and ease of use. Even people who struggle with sending an […]

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