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:
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.
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.
Remember the old dashboard? Probably not.
Ohhhh, ahhhh.
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.
Countless 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.
Expensify Blog 
I love you