Gini

Project Overview

Offering more robust support for novice Gini users to navigate the intimidating world of financial modeling.

Company Overview

Gini is a financial platform that syncs with Xero, QuickBooks, and Google Sheets to auto-update any cash flow forecast, P&L, balance sheet report

Methods

User Research
Data Analysis/Synthesis
UI/UX Design
Visual Design
Figma

My Role

UI/UX Designer

🔎️
The Opportunity

What is at the heart of the problem at hand?

Novice users of the gini web-app, especially those less financially experienced, expessed concerns over understanding how to interact with their cash flow forecast, P&L, and balance sheet reports within the platform.

3 User Research Insights:

1) Insufficient information/summaries available about what each report type (cash flow, P&L, balance sheet) offered users.

2) Report flow card graphics are not informative and too abstract.

3) Help Center lacks visibility.

🤔
Outlining my solution goals

How can I directly target and resolve each of the three pain points

1. Revise copy to better prime user expectations with helpful information around the purpose of each dynamic report.

2. Design visually appealing graphics that would communicate the capabilities of each financial report type.

3. Create visible and seamlesss navigation to the Help Center.

After crafting the three ways that would directly target the pain points brought to light by the user interviews, I then brainstormed how these changes would take form in actual design features. Would these be features in the support documentation space (i.e. Help Center)? The actual app experience? Or maybe the output material (i.e. financial reports)?

Fig-Jam brainstorm session (click to visit file)

After brainstorming and clustering my sticky ideas, I created a short-list of which features I wanted to prioritize and others that would just be nice-to-have depending on time. As this was a collaborative project, I took it upon myself to tackle the in-app and output material features/re-design while my teammates worked on the Help Center.

🖋
The Process

Let’s begin designing!

How might we establish new information architecture that incorporates revised copy and new visuals without cluttering the existing UI?

What did the original flow look like?

Users begin at the Dashboard (1) where they can select the type of financial model they want to select.

The Spreadsheet Report (3) is then produced where users can see their imported data, manipulate their assumptions, and view the AI-generated financial analyses/forecasts.

Then, users will enter a Configuration Modal (2) where they can preview the desired flow (report template) and connect their accounting data to their Google Sheets account.

Some of the constraints I had to be conscious of

1) Limited space on existing UI cards for each report type

2) Inability to directly change the design of the output material as reports were generated directly on Google Sheets

3) Limited time of 2 weeks to complete the project

4) New visuals and designs had to adhere to gini’s existing branding and colors

Brainstorming different wireframes/layouts:

Overlay?

Accordian?

Split Screen

Collapsable Side Window

Solution: Implementing Tabs/Toggle

After iterating potential ways to include better support/help material, I decided on the tab/toggle approach.

1. It had the most potential to create more “space”

2. Users would have the choice whether to make the extra information visible or not

3. It would allow users to easily configure their databases right after reading about the flow detail

View all iterations of the tab/toggle layout...

Card Icon Design

Adhering to gini’s bright, neon colors and geometric style of brand identity, I wanted to create graphics that were simple and geometric in aesthetic, yet communicative and instructive in their function.