Redesign update: the new Overview

We’ve just pushed the new Overview screen out to beta testers. It’s the single biggest change in the new FreeAgent UI, so we are really excited to give you a preview of what’s coming soon.

Before that though, a bit of background.

The problems

From a design perspective, I've never been particularly happy with our current Overview screen. The multiple panels are great for quickly seeing what needs attention in your business, but there are some fundamental design and usability issues:

• There's simply far too much information on display at any one time. For first time users, and even seasoned veterans, it's simply overwhelming.
• There's no organisation of the different blocks of data, so the information on display lacks hierarchy.
• The charts are currently drawn in Flash, which don't work on many mobile devices, including the iPhone and iPad.
• The page doesn't work well at small screen sizes.

Beyond the design problems there are serious issues with the performance of the Overview page, and it’s one of the slowest pages in the app. As we scale this not only affects individual users with lots of data but everyone using the app. Which is bad.

As a result keeping the Overview page as is, simply isn’t an option for us. Which leaves us with 2 options:

• Permanently remove content from the Overview, trimming it down
• Keeping the existing content but coming up with an elegant way to handle the current information that works from a design and performance perspective.

As you might have guessed, we’ve gone down the latter route.

The solution

With the current problems in mind, we knew what we wanted to achieve with the new Overview screen:

• The same rich, at-a-glance view of your current financial position
• Significantly better page performance, achieved through "lazy loading" of the content.
• Introduce a logical grouping of the different content blocks to create natural content hierarchy.
• Migrate our charts from Flash to a JS-based charting library for better accessibility and device support
• Better layout at smaller screen sizes and across a range of devices.

The new Overview

The new layout now contains 4 grouped "tab panels" roughly split up into the following areas:

• Money in - Invoicing, projects, timeslips
• Money out - expenses and bills
• Banking
• Accounting and tax

Grouping the information together like this significantly reduces the amount of information on display at any one time, which means the Overview is much cleaner and faster to load.

The grouped panels have fixed heights and equal weighting, resulting in better balance and easier scanning. If there’s lots of data within a particular panel (say you have lots of outstanding Invoices) you can scroll through all the entries using the arrow buttons at the bottom of each panel.

Cashflow reporting

In addition to reworking the existing data panels, we’re also adding in some great new functionality in the form of a historic cashflow panel.

The cashflow panel sums your money in/out across all bank accounts and displays a monthly breakdown, alongside totals for different date ranges. Really useful to see how the bottom line of your business has been performing.

Looking good

All of this comes together in a new design that works great on smaller screens and devices like the iPad, where the new Javascript powered charts display perfectly.

There are a few other extras on the Overview page, but we don’t want to completely spoil all the surprises just yet.