Work Thoughts Gallery About Let's talk →
LinkedIn Dribbble Instagram
← All works
✱ FinTech Cash Flow Sep 2020 – Mar 2021

JusFlo

Designing payables and receivables for cashflow forecasting - turning complex financial data into a tool small businesses can actually use.

📊
💸
📈
Cash Flow Forecast
Company
JusFlo
Timeline
Sep 2020 – Mar 2021
Role
Product Designer
Tools
Adobe XD · Zeplin
Overview

JusFlo is a cash flow forecasting tool that helps in estimating the projections of an organisation's future financial position based on the payables and receivables - be it recurring or one-time. It assists with managing liquidity within an organisation, ensuring the business has the necessary cash to meet its obligations and avoid funding issues - essentially, better management of working capital. As product designer, I created the design system, designed the product and landing page, and drove early research by talking directly to small business owners.

✱The Challenge

Correcting
wrong entries.

Designing a tool that forecasts cash flow by adding income and expense details based on past, current, and future business proceedings introduces a key risk - the possibility of entering incorrect data. This meant we needed a robust feature for correcting inaccurate entries.

  • The data needs to be displayed in a data table format that doesn't look exactly like a spreadsheet report - familiar but clearly a product.
  • The tool allows users to enter amounts as either a single entry or a recurrence entry. The edit feature needs to cater to both of these distinct data types.

Wrong data in a forecasting tool doesn't just look bad - it leads to wrong financial decisions. Getting the edit experience right was critical.

Cash flow data table UI
🖼
Cash flow data table UI
1
Step 1 - Identifying Edit Properties
✱User Journey Map

Mapping what
users can edit.

Based on the challenges, we started questioning the entries that users are allowed to update and created a user journey map from observations for both income and expense entries.

We identified that editing the recurrence entry had a lot of properties associated with it - far more complexity than a single-entry edit. This insight shaped the entire design direction for the edit feature.

User journey map
🖼
User journey map
✱Step 2
2
Optimising the Screen Real-estate

Less clutter,
more clarity.

The product included comprehensive and diverse functionality that had to be presented in a simple and clear way. With a limited pool of users to test against - as the product was still under development - we decided to bridge inputs both from users and similar tools in the market.

✱Competitor Analysis
Pulse
Separate Edit Entity
The edit feature was a separate entity, but the tool has a complex recurring payment type - editing them was even confusing for us. However, editing a single item was straightforward and easy. Clear lesson: single-entry editing patterns work well; recurring is where it breaks down.
Brixx
Inline Editing
Brixx had a better experience overall. The key takeaway: editing a component inline - in the same place - was better than taking the user to a new screen or a new window. This became our guiding principle for single-entry edits in JusFlo.
✱User Flow Analysis

Where should
editing happen?

To avoid over-using screen real estate, we first decided whether to allow users to edit entries on a new page, same window, or inline. These options were derived from common UX patterns across the product.

📄
New Page
If the user has the necessity to edit any entry, it can be edited on a new page. Provides maximum space but disrupts the user's current context and flow.
🪟
Same Window
If the user has the necessity to edit any entry, it can be edited in a modal sheet from the same window. Keeps context without a full page transition - ideal for complex data.
Recurring entries →
✏️
Inline
If the user has the necessity to edit any entry, it can be edited at the same spot. Fastest and most context-preserving - best for single entries and categories.
Single entries →
3
Step 3 - Prototyping
✱From Sketch to Hi-Fi

Drawing it
out.

To visualise all that information, it was necessary to make wireframes - starting with pencil and paper sketches to establish visual hierarchies and screen structure. We initially sketched editing for a single entry and then quickly realised it needed to handle recurring entries too.

Low-fi Wireframes

Pencil and paper sketching to facilitate visual hierarchies and the structure of the screens. Starting with the single-entry edit, then expanding to cover recurring entries as the complexity became apparent.

Low-fi wireframes
🖼
Low-fi wireframes
Low-fidelity - pencil sketches
Hi-fi Final Designs

On double-click, the user is prompted with the option to edit a single entry or recurring entry. Single entries are edited inline. Recurring entries open a modal - the same modal used to enter a payment, providing a consistent experience for both adding and editing.

Hi-fi - inline edit & modal
🖼
Hi-fi - inline edit & modal
Hi-fidelity - inline & modal edit states
Recurring entry modal - edit state with visual difference highlighting
🖼
Recurring entry modal - edit state with visual difference highlighting
After editing, a visual difference is shown to keep the user aware of changes made to the data table
✱Reflections

What I learnt.

✏️
Just Draw It
Get the ideas down on paper - it doesn't have to be a fully polished design. The act of sketching surfaced the gap between single and recurring entry editing that we hadn't fully anticipated when thinking abstractly about the problem.
🧠
Seek Design Feedback Widely
Engage in brainstorming and seek design feedback from as many people as possible. Different perspectives surface aspects you might not have considered alone. Design critique is a potent means to gather feedback and uncover blind spots before they become expensive problems.
That's all 6
See all case studies
← All works Let's talk →