FreeAgent

FreeAgent is a award-winning accounting software designed to help small businesses take care of their finances. Since FreeAgent was acquired by NatWest group, it grown really fast, so one of the measures taken by the company to improve the UX was to build a design system.
Even though I am currently part of the design system team, I also take ride on some projects attending meetings with PM, research team, and making interviews with users.

‍

Problems

These are some of the problems we could identify through product designers and engineers interviews, bugs that team reports, and also our own experience while working on the DS.
- We didn’t have a baseline to compare if our work was having good results
- The handoff was confusing, the engineers were accessing components before it was ready to build
- The app doesn’t attend to some accessibility standards, one of which is not being responsive
- Disparities between Figma and code

‍

Improve hand-off and ways to collaborate

We were facing some problems with the handoff, causing disparities between Figma and the reference website, duplicated work, and some components being implemented without passing through the DS team. What did we do?
- Created a file on Figma for request from designers
- Added a checklist so designers can make sure that all is in place before the handoff
- Built a template called “Tell the story” where we describe all the component details from designers and engineers side to make sure they are aligned
- Added flexible office hours so the designers can reach the DS team in the early stage to communicate ideas

Create a responsive design

The software doesn’t have yet responsive screens, it was a stakeholder’s decision. So we defined a strategy, and presented it to the CEO:
- We designed the most complex screens to make a comparison
- Made an estimative of how long it will take for the engineers to make it happen

Usability Test

Make a usability test to understand how the team is working, and also define some metrics to compare the DS improvement. What we found out:
- Designers were using wrong components
- Designers were struggling to find the documentation
- To help the, with these 2 issues we tested a plugin (Ghist) that you can access the documentation without leaving the Figma canva

‍

Outcomes

Some feedback we had from the actions we took:

- Designers found easy to use Ghist and it helped them when making the decision of what component to use
- Designers found the component proposal helpful, and also found the checklist a good support to make sure the accessibility matters were being attended
- To help the, with these 2 issues we tested a plugin (Ghist) that you can access the documentation without leaving the Figma canva
- Devs found the component Proposal helpful and started to use it as their source of truth as it was the most up to date file
- The responsive design was something I didn't have time to test with users, but I'm really proud my team engaged on doing something so important to make our app accessible to more people