Futrli by Sage cashflow and forecasting online platform
The challenge of designing a platform to help small and medium businesses thrive
When I joined Futrli in April 2018 as a UX/UI Designer, we had an existing financial forecast platform which was already successful amongst mainly accountants. It came with all that you'd expect from a financial forecasting software, including dear old dashboards. The software, however, was suffering from not being scalable and able to keep up with the company's growth plans. More importantly, it wasn't user friendly enough to solve our target audience's pains.
Based on interviews with small/medium business owners it had emerged that more often than not, start up founders, freelancers and chiefs of small businesses have little or no time to look at their cash flow or make sense out of it to steer the wheel and stay afloat - let alone trying to do any financial prediction without the complexity of an excel spreadsheet. In the UK only, 50% of small businesses fail after 2 years because of the lack of education around cash flow and how to handle daily tasks to avoid the worst.
So the challenge was to build something to help busy small business owners keep track of their cash flow easily, without having to interpret dashboards or excel spreadsheets, without having to jump from their bank account to their accounting packaging and in a way that is clean, user friendly and can be also embraced by accountants.
That's when Flow started to take shape. I worked on this product as principle in-house UX/UI Designer alongside three Product Managers, a remote Visual Design contractor and a remote UX Design contractor.
The first version of Futrli Flow was launched in October 2019.
Based on 25 interviews/workshop we set up three main personas and used affinity mapping to gather our findings with post-it notes on the office wall to synthesise emerging patterns. We referred to them throughout the entire product development process.
👉 One of the first processes I implemented when I joined the company was to set up personas to really understand the pain points and problems we're trying to solve rather than working on assumptions
👉 Our personas took form after a few interviews with business owners and the CEO's own experience as a former retail business owner herself
👉 Every persona profile lists context, their daily habits, the tools they use, goals and frustrations
👉 I initially shared them with 2 PM's and the CEO
👉 Using the personas helped me and the rest of the product team keep the focus of the overall experience around solving their pains
👉 I would check on a monthly basis how we were respecting the personas with our designs and development of the product
Problem statement: Small/medium business owners fear having to deal with cash flow, don't have time to understand what their financial priorities are, find financial packages complicated and time consuming, cannot afford expensive advisory services and have no idea what is going on with their accounts.
Solution statement: To develop a platform that gathers all the information related to the business accounts, prioritises what requires immediate attention and informs the user through a daily-updated newsfeed that is free. This can help small companies keep track of their business pulse in just 5 minutes a day.
I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product:
👉 We decided to focus on the main goals and pains that had emerged into a pattern every time we were doing user research
👉 Thanks to the user journey maps we managed to walk in our personas shoes to feel their pain, align with their goals and set the path to find the perfect solution to the the problems that had been defined
It took a lot of iterations, discussions, brainstorming and interviews to ideate a solution that could meet our users' needs and relieve their daily frustrations.
So, how did we solve the issue of small business owners who don't have enough time or don't know what actions to take without consulting their accountants? How could we make them feel supported when they have to deal with the reality of risky financial situations? We designed a daily Actionfeed for their business. Initially named Newsfeed we then decided to change it to Actionfeed as the notifications and posts come with CTA's to educate the user to understand their business issues (and also to celebrate their successes).
All the users need to do is connect their cloud-based accounting package - like Xero or QuickBooks - upon registration and we do the heavy lifting. The system checks on a daily basis what is happening in the users' accounts and posts news with specific CTA's.
The posts in the Actionfeed are prioritised based on urgency with a score system in the back end to keep the user focussed. The Actionfeed aggregates notifications from both cash in and cash out accounts. For example, if the user is overdue a high amount of money by different clients, one of the posts would read "There are 11 overdue invoices from customers right now totalling £44,000" with a CTA linked to a table within the Cash In tab with a list of all overdue invoices. The table can be filtered by overdue date, by customer, by amount etc. Every customer and every invoice can then be explored more in depth: how much is the user dependant on one single customer? What's the pattern emerging from some customers' payment behaviours? The user has all this information available in one single platform and we update it automatically.
How did we solve the issue of small businesses not having enough disposable cash to afford expensive apps? The Actionfeed is free forever for all users. Other features like specific in-depth information into cash in and out are free to use for 24 hours and then accessible through a monthly or yearly subscription.
At the beginning of my design process I created a few wireframes for presentation and testing purposes:
👉 This helped to spot any usability issue at an early stage before going into development
👉 It served the purpose of gaining stakeholder acceptance
👉 These were designed in Sketch and prototyped in InVision
Before launching the product, I did 5 rounds of testing in order to reveal possible usability problems:
👉 We wanted to determine to what extent the current version of the product was usable
👉 We tested on a prototyped version (InVision)
👉 Test subjects were small business owners willing to help and a few colleagues who in the past had owned their own business. At this stage these colleagues hadn't had any form of access to the new platform UX
👉 This was a moderated test where I was the facilitator with 2 note takers. Sessions were all recorded using lookback.io
👉 We all found these sessions very useful as they shed light on how some features could be made clearer and the language more accessible
We designed a style guide based on Material Design (with an 8px grid) that eventually evolved into our very own design system. The design system is managed and updated by me in Zeplin, which I personally chose as a tool because it offers a highly collaborative system between design teams and engineering teams.
We chose orange as the cash flow product colour as it is often perceived as bright, happy, and uplifting and not too corporate. Various shades were used to differentiate graph elements.
The font we chose is Graphik, which with its rational grid composed of nine weights in eight different widths, offers maximum flexibility across all media.
The icons were based on Feather Icons stystem, but we changed them to be thinner to align with the rest of our UI.
After releasing a beta version of the product, we started gathering some usage insights and realised that only 60% of users were completing the initial onboarding:
👉 First we tried to understand why that was happening. We asked our users and they were really candid in telling us that sometimes the prompts to the next steps were not immediately clear
👉 The challenge was we didn't have many engineering resources to rebuild a different onboarding experience
👉 Subtle changes that wouldn't add too many development days and still change the user's experience were required
👉 I made some changes to the UI that would make some of the prompts clearer. These changes took only one front end development day
👉 The result was that now 87% of users are completing the onboarding 🎉
👉 There is no such thing as too many iterations
👉 Working closely with engineering teams and the rest of the product team is an empowering journey that opens your mind to many different aspects of the evolution of a product
👉 It was interesting from a UX perspective to see how the integrations with third party data sources talk to each other within the product
👉 When you think you're done with testing... test more!
