I’ve been the design lead on FreeAgent’s first native iOS app from the start, taking it from research and planning, through visual design and prototyping, building out the HTML & CSS front-end, pairing with engineers to implement, and measuring the effectiveness of what we’ve built.
In the process of working on the mobile app, I built FA CSS Utilities; a universal language for using our global design properties across our projects and platforms.
The app is a web/native hybrid, allowing us to maintain largely the same codebase while pushing out new features across iOS, Android, and eventually web versions at the same time.
I conceived, researched, designed, and built the prototype for Project Dashboards — allowing FreeAgent customers to share the status of projects with their clients: budget remaining, task statuses, balance owed, expenses logged, and more.
They’re intended to provide a quick way to passively check-in on the time and money aspects of a project, negating the need for manually written status updates. They also give clients the ability to pay outstanding invoices online.
All dashboard information is derived from projects already in FreeAgent, so there’s no extra work involved for customers. They simply share the dashboard link with their client, and the client can stay up to date wherever they are on whatever device they might have.
FreeAgent Mobile Web
I designed and built out the front-end for the mobile web companion to FreeAgent’s ‘desktop’ app. Having started out as a Hack Days project for a few of us frustrated with (the lack of) FreeAgent mobile offering.
Two particular constraints made this project interesting: there had to be a strong likeness to the desktop app to make switching seemless, and it had to work well on budget Android handsets and Windows Phone.
Though not without its faults, we chose to detect the user agent of devices and serve up mobile-specific views instead of ‘mobile optimised’ versions of the desktop views. I also opted to build the front-end from scratch rather than using a framework, so things remained as light and nimble as possible.
Earnest was my very first foray into native iOS design — an iPhone app to help self-employed people keep track of their income, expenses, and tax owed. I designed the UI, logo, and other brand assets.
The intention was to counter typically dull, utilitarian record-keeping software with something slightly more playful and fun. There also had to also be some visual and behavioural consistency with FreeAgent, Earnest’s “big sister”, to ease the transition people might make when ‘graduating’ to FreeAgent.
Earnest won ‘Best Mobile Application’ at the 2012 Scottish Digital Business Awards.
One of my earliest projects at FreeAgent was to redesign our then 4 year-old ‘desktop’ app, relied upon daily by tens of thousands of people to run their businesses. No pressure! Customer pain points were clear; support tickets, public forums, and private conversations had all helped inform what needed to be done.
A reimagined overview screen allowed customers to see their cashflow, customise their layout, and quickly switch to specific sections. Navigation was redesigned, and a new sidebar component added to display rich metadata about the current view. Countless other visual and functional changes were made.
After bringing customers in-house for usability testing sessions, we extensively beta tested the redesigned app for months to help refine our ideas and execution before succesfully launching in June 2012.
The redesigned app has played a key role in sustaining the growth of the product and customer base. It also taught us invaluable lessons about scope creep, strict refactors, and avoiding ‘big bang’ launches.
BuildBoard was an experimental project for Build, created as a way to track attendee activity and sentiment. I designed and built its mobile-first responsive layout, based on Kyle Meyer's Build site design.
Made as part of a collaboration between FreeAgent and developer James Newbery, we mapped out Foursquare check-ins so attendees would know where other Build folks were, and combed #buildconf tweets for ‘hot topics’.
We also built an event countdown tied to events throughout the week, and an admin area allowing conference organiser Andy to update attendees with any timely information.
The Depot provides FreeAgent users with a snapshot of what features are currently in development, and allows them to vote for the features they want the most. I designed and illustrated it, along with building the front-end.
The challenge of creating The Depot was how to make something like a public product roadmap (already contentious, even dangerous), without setting unrealistic expectations for customers. Customers could have their say, but on things we’d already agreed as an organisation to focus on.
The illustrative approach was intended to make it feel distinctly different from the FreeAgent app; it should be a different headspace altogether.
Designing marks and logotypes is something I’ve kept up over the years, despite not taking on much freelance work. I really enjoy the challenge of translating an organisation’s ideas or values into a simple visual form, then figuring out how to use that in a whole brand identity system.