In case you missed it, we’ve been gradually testing and rolling out changes to the FreeAgent UI over the past year. We’re delighted to let you know that we’re now preparing to release another exciting visual improvement into the FreeAgent app. This is a huge milestone in our redesign journey, and we wanted to let you know how we arrived here.
The arrival of the UI engineering team
Since its inception over 12 years ago, the FreeAgent product has been through a huge amount of development, and with that, many attempts have been made to standardise its customer-facing interface. However, due to a lack of a dedicated team, the UI was left fragmented and I dare say, a little neglected. You see, our original UI team was comprised of a plucky group of ‘volunteers’ from other teams, who had great intentions but were unable to fully commit to such a large and complex task. To solve this, just over a year ago the FreeAgent UI Engineering team was born, and we were tasked with delivering a fast, modern and accessible experience to our customers.
A fact-finding mission
We knew we had a big task ahead of us, but also that we shouldn’t be afraid of the road ahead. So we set out to lay all of our UI issues out on the table, ‘warts and all’, with the mindset that understanding the problem is half the battle.
To give you some context around the scale of this task, here are a few things that we discovered during this fact-finding exercise. The FreeAgent web application (at that time) had:
- Over 600 unique colours
- Over 90 unique font sizes
- Confusing and inconsistent naming conventions, for both components and images
- Inconsistent ways of doing similar things in the application
- Lots of code duplication
- Patchy support for accessibility and assistive technology
We weren’t overly surprised, but we were quite excited! Much of what we uncovered was symptomatic of new features taking priority over front-end technical debt. A lot has changed in web development in the last 12 years and we found that while we work with some very talented engineers, FreeAgent needed an extra bit of front-end expertise. This was our chance to take control and start moving the user interface forward.
How we tackled the challenge
To give you a flavour of what we’ve been up to, amongst other things, we’ve spent the last year:
- working towards an accessible colour palette
- agreeing on a concise step type scale
- standardising our spacing and vertical rhythm
- outlining and developing patterns and workflows to drive consistency
We’ve been building all of these structural foundations into the app, actively cleaning up and standardising the code that holds it all together as we go — all while making sure that all of our features continue to work exactly as they should.
Where we are now
We’re not reinventing the wheel or moving anything around, instead, we’re applying a modern look and feel to FreeAgent — think of it as a design refresh rather than any kind of overhaul.
There’ll be a range of improvements you’ll notice making their way into FreeAgent in the coming months: things will appear cleaner, more refined, and designed to share the same design language. We’ll keep cleaning up behind the scenes, and as a result, the application will become faster, more accessible and easier to use.
We’re not done yet — and we still have a long way ahead of us — but we hope you like where we’re going. Please do get in touch with any feedback you might have for us — and keep an eye out for more updates in the future!
Stu Grant is the UI Engineering Lead at FreeAgent, the UK-based online accounting software made specifically for freelancers, small business owners and their accountants.
