Diego Valencia
UI/UX Product Designer
Made with

A cash flow platform to understand your business.

7 mins read

Cashflow overview

Cashflow overview

"Diego has a vast knowledge in managing customers and creating value on a fast pace with a short amount of direction and great results both in design and UX/UI. Great experience working with him!"

-Daniel Martin, CEO

01. Overview

Overview

Equity Advisors is an investment and finance firm focused on helping startups and small business define their business model and study their cashflow and costs to maintain a healthy business.

After quite a long time in the industry, they realized that clients asked them to do the same things over and over again: analyze cash flow, costs and finance indicators.

The way they'd been doing that is by using spreadsheets: they write up all the client's data (products, clients, numbers...) and set up meetings to explain them what those bunch of columns and rows mean.

The amount of data they had to handle and the way they were showing it was too overwhelming for both themselves and their clients.

The amount of data they had to handle and the way they were showing it was too overwhelming for both themselves and their clients.

One of the biggest issues of this approach was that this amount of data is too difficult to manage, hence it was not fully understandable for everyone. 

The Equity team needed a tool that allowed them to show clients how their companies were performing in an easier way without having to be present to explain them all the things going back and forth countless of pages in their spreadsheets.

During 4 weeks, I was responsible for the new cash flow process, architecture and overall interface and experience of the platform.

Challenges

How do you add complexity to a platform while making sure the experience is as simple as possible? 

We wanted to put the things that mattered most for the MVP:

  • Cashflow - so that companies know what their incomes and expenses are.
  • Costs - so that companies know not only how profitable they are but how their clients and products are performing. The was going to be a pivot table.
  • Indicators - such as Dupont, ROA/ROE, debts, etc.

Based on the work they've done for their clients, we understood what business want to achieve in each section of the platform and thought of a solution for each goal.

Based on the work they've done for their clients, we understood what business want to achieve in each section of the platform and thought of a solution for each goal.

Design challenges

  • The platform has to work on its own. That means that clients should be able to look at it and understand their whole business without the Equity team being next to them explaining the data.
  • Since business owners would be able to use the platform on their own, they should do so on desktop and mobile devices. How is the platform going to provide the same value on larger and smaller screens?
  • I had some issues understanding some 'technical words' used in that particular industry so I had to educate myself to design the experience of the platform.

03. Designing the platform

A cash flow platform to understand your business.
A cash flow platform to understand your business.

A more understandable cash flow

We show their balance, including an overview of income and expenses. Then we allow them to see how their cash flow has been during the year or filter what they see by a different timeframe.

We took this further by allowing them to create scenarios where they can see exactly what happens if they hire a new employee or move their business to another city, etc.

Scroll inside the image to see more

Scroll inside the image to see more

Analyze gains & losses

They want to know whether their business is profitable and if they're making deals with the right people.

At this point, I hadn't understood pivot tables that much so this was my first try. It worked, but didn't quite serve the purpose so I had to tweak it a bit.

Scroll inside the image to see more

Scroll inside the image to see more

Indicators

Basically all the indicators from their activity: revenue margins, Dupont system, liquity ratio and more.

04. Interface design

A cash flow platform to understand your business.

A lot of data to import

We implemented a way for the team to upload the data they already have gathered for their clients. 

One thing I needed to consider was that the data for each section is fully independent. That means that the data imported in the cash flow section does not work in the others so I had to create a different flow for each.

Cash flow made easier

The empty state screen allows you to import the data:

  1. Upload the .csv file
  2. Select the columns you want to import. This is crucial since we just show what matters the most. For coding purposes, we divided numeric and text fields.
  3. Review what you've set and edit your selection if needed.
  4. Get a full understanding of how your business is doing with this two view graph -you may want to see the evolution of your cash flow (by default) or an income vs expenses view. You're even able to compare all of that with what you'd budgeted for.
  5. Users want to compare their income and expenses, so we added an inner page that helps them do just that. Plus we added an overview of the exact impact all their income sources and expenses have in their organization.

Pivot tables made simple

This was the hardest section of the platform in terms of experience and design.

Although accountants have been working with pivot tables in excel for quite some time, we needed to provide a simplest solution in this platform to tackle the same problem and make it understandable not just for accountants but for every business owner. 

Users may see the profitability of their company and play along with the data. It's a matter of help them make better business decisions based on the results they get by playing with the variables in the graph.

A cash flow platform to understand your business.

Importing the data

As in the cash flow section, we upload a .csv file that contains all the data for this particular section and select the columns we want to import, each classified in text_field or numeric_field.

Selecting the X axis that includes text fields such as region, product, client.

Selecting the X axis that includes text fields such as region, product, client.

Setting Y and X axis

We decided to keep numeric fields on the Y axis and the text fields on the X axis. 

The platform asks you to select the text fields (e.g region/location, product, month) you want to include as options and the same with the numeric fields (e.g net profit, income, expenses).

Playing with the pivot table

Now that we have imported our data, it's time to select the filters we want to see on each axis and gather helpful information. 

A cash flow platform to understand your business.

Drag and drop the fields on each axis

By having the numeric fields on the Y axis and the text fields on the X axis, we make sure there is always a comparison that make sense to view. Users can get results like:

How much did my clients/products sell? How much of income did they generate to my business? Which one is more profitable?

A cash flow platform to understand your business.

Filter the data

All text fields are filters, which means that whichever box they put on the X axis, they are able to filter the data to match their needs.

Having region/location selected on the X axis, they may want to just see how all the places their business is in performed. But what if they also want to see how just a particular client or product performed in those places? The platform allows them to make those kind of filters.

A cash flow platform to understand your business.

Results that make sense

When you add filters, there may be times when they don't match with the others or are limited by them.

For instance, when you have the location field active on the axis and want to see how much a client sold, it just shows you the location in which this client is in.

Indicators

Scroll inside the image to see more

Scroll inside the image to see more

It's responsive too