TOPLINE financial ANAlytics Dashboard

  • CLIENT: Topline, Inc

  • DURATION: 2022-2023

  • ROLE: Lead Product Designer

 
 
 
 

1. OVERVIEW

The problem

Topline is a fintech startup focused on building a financial analytics dashboard. In a post-pandemic economy, big tech and startups are shifting from a growth strategy to focus on revenue retention and cash runway. As a result, Topline needs a financial analytics dashboard to help B2B SaaS companies drill down into ARR, customers, and other topline metrics so founders can make smarter decisions faster.

The Solution

Create a financial analytics dashboard that reconciles fragmented financial data, provides accurate revenue projections, and connects customers with capital solutions.

The final product is integrated with accounting providers, such as Stripe and Quickbooks, to directly automate Topline’s dashboard.

 

2. RESEARCH

THE PROBLEM: Startups don’t track their finances until it’s too late

I worked with the go-to-market strategy team to determine existing paint points with SaaS founders. Based on the survey responses, I we found overlapping stress points as B2B SaaS companies scale and focus on revenue rather than growth. I started the project by conducting research in order to better understand the users. To help frame my research and ensure a structure was in place, I created a research plan, which includes the goals and objectives, assumptions, methodologies, participants, questions, and timeline.

Goal

Increase customer retention and connect users to capital providers by creating a financial analytics products that acts as a single “source of truth”, provides accurate financial projections that educates users on their financial wellbeing.

 
 

MARKETPLACE RESEARCH

Based on the analysis of the market, it's clear that many B2B SaaS companies are struggling with fragmented financial data, reactive management of cash needs, and difficulty in accessing capital for growth. These issues are preventing businesses from making sound financial decisions, limiting their ability to scale, and ultimately affecting their bottom line. While there are existing solutions for financial analytics, reconciliation, and capital, there is no single solution that brings all of these together in a seamless manner. By providing an integrated financial platform that provides a source of truth to customers, Topline aims to solve these pain points by providing a unified analytics experience for business metrics, scenario planning tools, and cash advance offers. Additionally, Topline is considering integrating with other products or tools such as payment processors and customer sentiment analysis to become a single source of truth and an insights platform.

Competitive Research

To evaluate the competition in the financial insights tool market, we examined the offerings of the following competitors: Chartmogul, Zeni, Mosaic, Forcastr, Baremetrics, and Profitwell. Each of these companies provides financial insights solutions, albeit with different features, strengths, and target markets. We compared top product features and services, which include: Target Users (B2B SaaS), Financial Analytics, Scenario Planning, Integrations, and Free Trials.

 
 

Looking at the leading competitors, Zeni and Mosaic offer a wide range of features but neither of them offer a free trial. While both products offer a demo of the service, each has a starting cost of over $500/month, creating an opportunity for a similar product as a more competitive price.

 

3. DEFINE

Empathy Maps

I generated three uniquely different types of users based user research. The dashboard caters mainly caters to the B2B SaaS industry, but three large focus groups include SaaS Founders, Fractional CFOS, and VC Partners. The challenge was to create a financial insights dashboard that addresses the major pain point across groups.

 
 
 
 

After empathy mapping and interviewing potential customers, one personas became a clear focus to the team and the target user group. The Persona was created based on the design research analysis, conversations with existing customers, and design partners at SaaS startups. With the user persona, I could empathize more with the end-users’ needs, motivations, and pain points with a financial insights tool.

 

SUCCESS METRICS

To design a ‘source of truth’ is to design for accuracy. 

The company seeks to differentiate itself by bringing together financial analytics, reconciliation, scenario planning, and capital in a seamless manner. The product aims to provide customers with an easy setup to understand their business performance, financial impact of decision making, and seamless process to raise capital when needed. The success metrics below focus on user research and competitive analysis of existing products.

 
 

Define: User Flow

Based on the personas, I created a feature flow to maximize user engagement and create a more intuitive user platform. The feature illustrates the steps needs to set up an account and integrate with Quickbooks, Stripe, or similar products.

 
 
 

4. WIREFRAMING

DESIGNING + PROTOTYPING

Sketching for Efficient Flows + Visualizations 

Previous to my time at Topline, there was an existing Style Guide, however, I was able to redesign the branding to make it more appealing to the target users. I started to look at different UI to design the best visualization for a fintech product. Stripe, Intuit, Mosiac, and Profitwell were sources of inspiration.

WIREFRAMING: USER JOURNEY

To seemlessly onboard new users with a financial dashboard that requires external integrations, it is importand to provide a clear user journey and onboarding process. The UI kit and design will help facilitate an intuitive user experience.

The main purpose of the user journey wireframing is to create a design with minimal edge cases in the user experience in setting up and viewing their dashboard.

 
 

Dashboard Home Page: Medium Fidelity

The main dashboard is centered around high-level monthly financial metrics (ARR, Net Churn, Revenue Retention, etc) that can be drill-down in click-into pages. As a result, I focused on the Dashboard visualization, managing integrations, and providing detailed click-into pages based on customer feedback. I proposed an interactive multi-panel layout with a simplified color scheme, a more visually exciting graphics, reduced text, clear hover states, and a more accessible click-into pages. These changes were made in order to create a more enjoyable user experience and an intuitive understanding of key financial metrics. The following shows the original concept for the dashboard.

 
 
 

5. FINAL DESIGNS

 
 

SIGN IN / SIGN UP

The sign up / sign in page for the web application allows users to sign up for the product and create a streamlined process for viewing a live demo, integrating accounts, and editing account information. One of the main pain points for adding a live demo is to illustrate an immediate add-value for potential customers.

Dashboard Homepage

I created the home dashboard with a simple, visually pleasing design. The design includes key metrics based on user feedback and conversations with partnering SaaS founders. Key metrics include: MRR (Monthly Recurring Revenue), Customers, ARPU (Average Revenue per User), Net Retention, Cash Flow and Runway, a Cohort Analysis table, and Customer Activity. Each chart/graph features hover states and click-into pages for drilling into additional details.

 
 

Click-into pages

I worked with the go-to-market team to create 6 distinct click-into pages for further investigating key metrics and customer details. The 6 pages include: Revenue, Customers, Customer Details, Retention, Cash, and Profitability. Additional pages are currently in progress, such as a Cash Forecasting tool.

 
 

EDGE CASES

Throughout the design process, I worked with engineering to address edge cases and create alternative designs for complex visuals problems. The edge cases below highlight the need for static visuals in replacement of live demo visuals for the implementation of the MVP.

UI Library

Based on the user types and challenges with the existing UI Library, I ran through many rounds of logo and branding iterations. One key challenge with the design was creating a sophisticated design that appeals to fintech design standards but also differentiates from the visual design of competitors. The end branding maintains a simple current color scheme and creating a clean and but engaging user experience.

Style GuiDe

 
 
 

6. TEST

SUCcess Metrics

With the final Figma prototype, I conducted an online usability review with a few design partners, SaaS founders, and financial advisors. During the reviews, I asked the users to address the products easy-of-use, impact on existing pain points, and outstanding user needs/concerns. Many users were impressed by the designs and intuitive UI. However, many responders addressed the need for accuracy across integrations and the need for additional features, such as a PDF download options and comparisons between forecast values and from P&L statements.

7. DELIVERY

Throughout the design process, I worked with the engineering team to address front and back end concerns with implementing the dashboard. The delivery process consisted of making sure all the elements and high-fidelity wireframes were prepared to be handed over to the engineering team. .

A key step in this process was creating a coherent UI Library, prototypes and hand-off using Zeplin. This helped the developers to understand the reasoning for design decisions and create alternative solutions if the development team faced challenges implementing the design.

8. TAKAWAYS

Collaboration is key. While I was the lead designer on this project, working directly with engineers, stakeholders, and end users was crucial in creating a feasible and successful product that addresses existing pain points.

Great feedback throughout the design process is just as important as great communication - it makes possible for designers to solve or existing issues rather than creating a solution that is not needed.