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.

We 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 choices we made over the past few months while bringing you expense reports that suck even less.

Structure, Oh Structure

One of the most immediate structural changes we wanted to make was a better usage of screen real estate. The old Expensify was a bit chunky with lots of unnecessary whitespace. But with our new beta, we trimmed some pixels which yielded a much more obvious and harmonized page structure across varied content. No matter the page, we can simply plug it into this template:

EXP-Template

And though we’d hate to say we’re a predictable group of lads and lasses, there’s nothing bad in having predictability in a user interface. We carried that over to the bread and butter of our product — the expense report itself — where we also wanted to condense information yet still make it easier to find what you are looking for.

OCDelightful Reports

Behold, where it all started. The revamped report page was the driving force behind the Expensify Beta project and rightfully so — this is where submitters and approvers a like spend a lot of time. And any time we can save you from doing expense reports, well that’s time well-saved.

EXP-Report

Primary Navigation: Where am I?

Secondary Navigation: What status-changing actions can I do here? This light blue bar is a site-wide indicator of some top-level actions you can do in respect to the page that you are currently on.

Next Step: What needs to happen to keep this report moving through the approval flow? Look at me I’m YELLOW! We’ve purposely placed this high up on the report so you can instantly see what you need to do (if anything).

Report Header: What’s the status of this? Is this an expense report or an invoice? What policy is this report using?

Title & Amount: Important information = Large font size please.

Report Details: Gimme the breakdown.

Report Actions: A sticky toolbar so you can make report actions no matter where you are scrolled on the report.

Report Items: The meat and potatoes of the report.

A more colorful, friendly place

Pretty pictures and colorful icons make a world of a difference when it comes to doing something as mundane as expense reporting (Disclaimer: I’ve only ever read five books in my lifetime and three of them were coffee table books). It’s not much, but just a little bit of personality across the site can make the overall experience much more pleasant.

EXP-Dashboard

Remember the old dashboard? Probably not.

EXP-DomainControl

Ohhhh, ahhhh.

EXP-Distance

You can create a receipt from a map?!

Consistency Across Devices

We also took this opportunity to unify our design across our mobile app, our web app, our blog, and soon our help site among other things. The dark blue color in the header, or “Kiwi Blue” as it’s being dubbed (Expensify Beta is coined as Project Kiwi internally), has made its way around our product and our marketing too.

EXP-LaptopPhoneCountless other details went into the Expensify Beta project and we hope you’ll enjoy finding all of them. We’ll be rolling out Expensify Beta to the masses right around the start of the New Year, so here’s to 2014 — the year of sexy expense reports that suck even less.

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!