Heads up: why we’re redesigning the FreeAgent header

We’ve recently kicked off a new project at FreeAgent to redesign the header of the desktop product.

Give the scale and scope of FreeAgent this is no small undertaking, and we want to be transparent and user-centric throughout the whole process. To keep you informed, we’ll be posting a series of articles talking about the changes, our thinking process and how we’re involving users.

Start with why

If you’re a user of FreeAgent, you may have already noticed recent changes to the UI — for example, the progressive rollout of our redesigned form inputs — but the upcoming header refresh will be a much more noticeable shift.

Before getting into the details of what is going to change, it’s useful to consider why we’re undertaking the wider redesign project in the first place.

The reaction from users to redesigns is often justifiably negative. We’ve all had experiences of products seemingly getting worse after a redesign, so if it’s not broke why fix it?

To answer that, cast your mind back to 2012. The UK was in the midst of Olympics fever, Gangnam Style blasted from the stereo and Kanye West’s main priority was his new clothing line. Simpler times for sure.

But the Yeezy summer collection wasn’t the only hot release that dropped that year. We also released FreeAgent’s biggest interface overhaul to date.

At that time we had some clear goals in terms of improving performance, device compatibility and flexibility in layouts. I think we were successful in achieving those and the customer feedback was almost unanimously positive. The interface has stood us in good stead since then but increasingly it felt like it needed an update, for a number of reasons.

A lot about how people use the web has changed in the last six years, and as a product team it’s our job to ensure FreeAgent remains at the cutting edge of web technology.

Last year, when we kicked off the redesign project and started forming a dedicated team, we set out five main objectives for the wider work:

  • A better designed product that will delight users, reinforcing our positioning as a premium product
  • Consistency of customer experience across platforms — desktop, mobile and our marketing website
  • The ability to move faster, designing and building new features and potentially new products at a greater pace
  • The ability to continually evolve the interface of FreeAgent easily in the future
  • Happier designers and engineers who enjoy working on a cleaner codebase

As you can see, it’s a mixture of benefits for the customer and the people who work on the product day-to-day. There are a number of different strands of this work (including the creation of our design system, FreeStyle, which we’ll talk about in another post) but for now we’ll concentrate on the user-facing changes.

Before we get into the exact specifics of the changes ahead, I’ll emphasise that everything presented here is a work in progress and we’re working closely with customers to get their feedback and input on all this redesign work.

From the top

The header is the first thing users see when they log in to FreeAgent and it provides a number of important functions, including accommodating the site-wide primary navigation.

This is the current header:

Some of main the issues we identified with this are:

  • The colours used are not consistent with our brand, our mobile app or the marketing site. In general they feel pretty dull and uncharacteristically serious.
  • It doesn’t behave particularly well at small screen sizes
  • It’s pretty chunky, taking up a lot of screen real estate and pushing down content — this is especially noticeable on a laptop or tablet screen.

This last point is worth elaborating on, as this is one of the biggest shifts we’ve seen in device usage over the past six years. Six years ago, the majority of people were surfing (hey remember that!) the web on a desktop computer.

Since then, we’ve seen a dramatic shift away from desktop screens towards laptops, mobiles and tablets as can be seen in the chart below:

With such a shift in device usage it’s a both a challenge and an opportunity to ensure that we provide a consistent FreeAgent experience across all platforms.

The mobile, laptop and tablet screens we use today have different screen resolutions and interactions, and this factored into the decisions we made around the redesigned header.

Responsive website layouts (adapting UIs to any screen size) are the holy grail here, but in reality we still have to make decisions which trade-off the pros and cons of different layouts. This is where our new header design comes in.

Our process

We started by auditing the entire application to track down the different header variants that exist in FreeAgent. Working from this base we began to dig deeper into requirements for the header.

Our analysis of the current header was informed by feedback received through interviews, conducting usability tests and gathering stats to track common usage patterns.

We decided to explore moving towards a single line header and generated a sequence of designs to explore this. One of the first decisions was to move the company name from the left to the right, to sit alongside the header icons. Our aim was to allow for a consistent experience across devices whilst retaining the user’s company name for identification.

Thinking of cross-device use, we bumped up the size of the icons to make sure they were equally tappable across all devices. We also took the opportunity to redraw our icon set to add our own dash of personality.

Moving from sketches to prototypes we started exploring behaviours and actions. Working in the code, we began developing the shared UI components that you’ll see popping up (or down) across the app.

After a period of busying away in the background we are ready to start sharing our progress and to begin the next important design phase: getting feedback on the designs.

The new header

So without further ado, here’s the new header design:

The first thing you’ll notice is the reduced height, tightening up the vertical space and allowing for quicker access to the content on laptop and tablet displays.

At smaller screen sizes we used an improved responsive design to adapt some of the elements (like the company name) so they can fit into the smaller space.

The navigation information architecture remains the same for now, but this is something we may look at in the future. We’ve made the decision to drop the persistent secondary nav throughout the application. This might feel like a controversial choice, but from speaking to users it seemed like most people were using the navigation drop-down instead, so it was pretty redundant.

We’ve moved the company name identifier over to the right and combined this with the ‘utility navigation’ dropdown which includes Settings, Billing and Log out. Again, this makes better use of the space while still making it clear what company account you’re looking at. We know this is important for users with multiple accounts, as well as for accountants who may be viewing different client accounts.

We’ve improved the icons for the search, timers and Insights alerts and these now all work with consistent drop-downs.

The colour of the header has also been tweaked so it’s more inline with our brand colours, as well as the design of our mobile app.

Dude, where’s my logo?

Another change we’ve made is to remove the logo from the header. We know this may be a loss for some people, but it’s one of the trade-offs we’ve had to make to achieve the goals we laid out at the start. Only 15% of people currently upload a header logo, so it feels like a compromise that the majority of users can live with.

Over to you

As I mentioned before, everything we’ve shown here is still a work in progress, and we’d love to hear from you if you have any thoughts.

Looking forward to hearing from you.

Roan Lavery

Chief Product Officer, FreeAgent