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. Continue Reading…
Archives For design
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. Continue Reading…
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. Continue Reading…
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.
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.
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.
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.
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:
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!