1. OVERVIEW

Analyze your retention and churn

Pour over retention and customer cohort analyses, as well as upgrades or downgrades within your existing customer base, helping you form an accurate revenue projection.

Manage your runway

Topline analytics will show you your runway based on ARR, hiring and spend. And if that’s not enough, we can also help you raise non-dilutive capital to further fund your growth.

2. RESEARCH

Understanding the Problem

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.

These are some of the customer pain points:

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.

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.

The Persona

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.

Coming Up with Ideas and Solutions

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, seamless process to raise capital when needed, and tweaking plans based on reality vs. planned. Topline plans to integrate with payment processors, subscription management companies, and customer sentiment scores to become a single source of truth and an insights platform.

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

2. 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.

3. 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.

UI Library ITERATIONS

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

In-Progress Prototype with added revisions

The prototype is the best way to present what the final product would look like and how it would work to the stakeholders.

With the clickable 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. Fortunately, all of the users were impressed by the designs and intuitive UI. However, many responders addressed the need more more integrations (apart from Stripe, Quickbooks, and Xero) and the need to download and compare forecast values versus from Profit and Loss statements.

Overall, they found the product well organized, very intuitive, aesthetically appealing and equipped with common integrations that made the product competitive.

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.