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.
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.
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
- 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.
Cash flow reporting
In addition to reworking the existing data panels, we’re also adding in some great new functionality in the form of a historic cash flow panel.
The cash flow 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.
There are a few other extras on the Overview page, but we don’t want to completely spoil all the surprises just yet.
- Home truths: 10 things everyone who works from home knows
- Leave the laptop at home - a day with FreeAgent Mobile
- Introducing CIS subcontractor support
- 8 things to do before taking on your first employee
- A spring clean for FreeAgent Mobile