Hold the phone! Why FreeAgent redesigned their mobile app

Two years ago this month we launched our first native FreeAgent mobile app on iOS. It was a huge company-wide effort, involving a whole range of teams, from product, to engineering to comms. The first version was focused around FreeAgent’s most-used desktop features — invoicing, expenses and contacts.

The initial release was always intended to be an MVP, with a view to adding more features over time. Using the first version as a base, we added banking, time tracking, profit and loss view, cashflow view, tax timeline and tax notifications. It’s given us invaluable insights about our users, as well as the product itself, and ultimately it’s brought us to where we are today.

Why was it time to redesign the FreeAgent mobile app?

The main overview screen (aka where the action happens) had turned into a long (long…) list of panels. It was starting to feel a bit cluttered and difficult to navigate. This gif gives you an idea of how the previous layout compares to the current one.

So, in one fateful sprint planning meeting in October 2016, we decided it was time to act.

We were planning ahead for the new quarter, getting excited about all the things that we wanted to achieve in 2017. We had all these ideas and plans for the app, but we kept coming back to the same question: “where will we put it?”. The current mobile design only allowed us to add features as widgets to a single overview screen — hardly ideal for improving and evolving the app. It was time for a change.

Goals for a new design

We knew from the start that this was going to be a bigger project than it looked. Together we set out three goals for the redesign:

1. Super simple navigation
Users shouldn’t have to struggle to find everyday features in the app. By making features more findable and predictable we could save them time and effort.

2. Speedier task completion 
We know our users are busy people, who want to tackle their accounting quickly. Whether it’s whipping up an invoice or taking a snap of a receipt, everyday tasks should be quick and easy.

3. Room to grow
We’re always working on new features for the app. How could we redesign the current navigation so that we had space to solve any problems that might crop up in the future?

1. Super simple navigation

Reorganising the features inside an app is a bit like reorganising your wardrobe. You need to find a way to group similar things together so that you can find them easily. You also want to be able to leave room for exciting new additions. After all, there’s nothing more frustrating than trying to remember where you put those suit trousers during the morning rush.

Reorganising the features inside an app is a bit like organising your wardrobe.

Working with our user research team, we did a number of tests involving existing FreeAgent users and non-FreeAgent users. The research showed that one of the natural ways that people grouped tasks was by whether they were tasks to do with money coming into the company (invoices, time tracking, projects) or money going out of the company (expenses, bills).

With this information in mind, our product designer Paddy played around some different navigation designs, such as a hamburger menu, as well as different styles of tabs.

After much discussion, we settled on a tab-based design.

2. Speedier task completion

From a combination of usage statistics and other user research, we know in a majority of cases our users open the app so that they can add something quickly. We wanted to make sure the app was lightning fast for all tasks, whether it’s adding an expense at home, or creating a timeslip on the move.

In our previous mobile design, there was a ‘quick add’ button on the main screen tucked away at the top right hand side. For such a key feature, it wasn’t pulling nearly enough focus within the design. We increased the prominence of the quick add button, being mindful of standard mobile app conventions, and embedded it into the bottom navigation bar.

3. Room to grow

With the app redesign complete, not only did we have room to breathe but the app did too! Simplifying and reorganising the navigation had brought with it newfound space within the app. This has given us the freedom to introduce additional improvements. We’re now working on expanding each of the top level panels to include even more timely and relevant information.

With the app redesign complete, not only did we have room to breathe but the app did too!

So without further ado, here’s an exclusive sneak peek at what we’ve been up to! Soon the three month graph will be available on the cashflow panel, meaning our users won’t have to go into the cashflow section itself to see this info.

We’ve also been experimenting with showing the number of ‘unexplained’ and for ‘approval transactions’ inside the Banking section. This means that our users can see at a glance whether there are any unexplained transactions that they need to explain.

So with these tabs in place, we’ve got room to expand for the new and exciting things we want to do in the future.

Ta da! 🎉

Today, we’re finally rolling out the mobile navigation redesign!

It might seem like a small change, but has taken a huge amount of work. The whole process took around four months, including a round of user research and two rounds of user testing to get to a design that we were all happy with. We’re really excited to hear how our users react to the new design, so if you’re one of them, please comment below or email us at support@freeagent.com.

The FreeAgent Mobile team is made up of Paddy Duke (product designer), Anup Narkhede (engineering team lead), Ioan Serban, Paul Smith (senior software engineers) and me, Kate Ho (senior product manager).

This post is part of a new series of blog posts going behind the scenes, digging into our design and development processes, sharing the lessons we’ve learned and openly discussing the challenges we face. See more details here.

Kate Ho, senior product manager at FreeAgent