Dashboard for managing operating expenses

The issues of origin dashboard

The original expense overivew dashboard is placed prominently on the homepage on web and mobile app. However, the dashboard is not helpful for users to monitor and control expenses. Specifically, the dashboard only shows metrics on actual spent amount, which is historical data and something already happened. Therefore, users couldn’t take action to prevent actual spent from overbudget.

Expected outcome

Make the dashboard insightful, actionable, and accessible on web and mobile app for three user profiles, including financial controllers, business owners, and team managers.

My approach

I followed the 5 stages in the Design Thinking process.

1. Empathize with users
2. Define user problems and product key values
3. Ideate key metrics and user flows
4. Prototype & testing dashboard layouts

I followed a fairly linear approach from stage 1 to 4 to create the first prototypes and gather initial feedback. I believe that the more detail I provide, the more concrete and actionable the feedback will be.

The internal stakeholders I worked with throughout the project included the CEO, CTO, Tech Lead, and Finance Manager. In addition to designing the UI, my key role was to represent the voice of the users and the product, helping drive alignment among stakeholders during times of ambiguity.

I conducted initial research before ideating dashboard concept. I kept the research quick, then I validated assumptions through prototyping and testing.

Objectives

• Assess the need for a spend overview dashboard.
• Understand how financial controllers and business owners track spending.
• Identify their expectations for the dashboard.

Methods

Given time constraints, I utilized three accessible sources:

• Interviews with internal stakeholders (CEO, finance manager, and accountant).
• Input from the Customer Success team on commonly requested spending reports.
• ChatGPT for refining data and terminology.

Key Insights

1. Customers often request raw spending data to track individual expenses and identify over-budget items.
2. Financial managers manually prepare monthly planned vs. actual spend reports for the CEO.
3. Business owners want the dashboard to answer three key questions:
   • What did we spend?
   • What will we spend?
   • Do we still have budget to spend?

User Needs

Research revealed the following key user needs:

1. Users can approve or reject individual expenses on Bizzi’s platform but lack the ability to monitor spending situation in real-time.
2. There is no easy way to compare planned vs. actual spending or identify top spending areas.

These gaps hinder business owners and financial managers from making effective financial decisions, which is critical for SMEs with tight cash flow.

Product Key Values

To address these challenges, the dashboard must deliver:

• Real-Time Insights: Provide CEOs and business managers with up-to-date spending data.
• Quick Overview: Enable fast scanning of the overall spending situation.
• Detailed Insights: Offer a 360-degree view with drill-down capabilities to analyze individual employees or expenses.

Key Metrics

To support business owners and financial managers in tracking expenses, the dashboard should highlight:

• Expenses: Include approved, planned, and pending approval amounts.
• Budget: Provide an overview of available and spent budgets.
• Top Spending: Categorized by department, employee, or category.

These metrics should be presented using trends, timelines, and comparisons for better insights.

User Flows

The user flow is designed for seamless interaction:

1. Login: Users land on the dashboard, which serves as the homepage.
2. Dashboard Overview: The dashboard displays financial summaries, trends, and top expenses at the company or department level.
3. Drill-Down Details: Users can click on specific metrics to view detailed data about individual expenses.
4. Make Informed Decisions: If users notice irregularities, they can approve or reject expenses directly.

To meet the tight timeline, I combined prototyping and testing with internal users, including the CEO, CTO, and financial manager, to minimize the feedback loop.

Through 10 iterations, I finalized a design that balances clarity and usability.

Key Challenge #1 - Consolidate Data into One Overview Chart

My initial thought was to add the missing metrics (e.g., pending approval) to the dashboard in a box. However, it created fragmented view.

The CEO wanted a single, comprehensive chart summarizing company spending to address three key questions for business owners:

• What did we spend? (Approved Expense)
• What will we spend? (Pending Approval)
• Do we still have budget to spend? (Remaining Planned Expense)

Notably, to simplifies these overlaps, providing clear, actionable insights for business owners, I mapped the business flow - requests, expenses, and reports into the user-friendly flow

Additionally, I defined logic for displaying scenarios, such as when expenses exceed the budget.

Design Trade-off: Increasing the over-budget amount doesn’t expand the red section on the chart.

Initially, the finance manager wanted to track how much was over budget. However, after alignment, we agreed that the goal of managing expenses is to avoid seeing any red at all. When users do see red, they tend to take action to correct it—so it’s rare for the over-budget amount to grow significantly.

‍

Key Challenge #2 - More Holistic View on Expenses

My initial approach was to show paired comparisons of approved expenses, budget, and planned expenses. However, this made the dashboard feel long and fragmented. I then redesigned it using combined charts that present all three metrics in a single, more holistic view.

The mobile experience is tailored to the smaller screen and the user’s need for quick updates. Additionally, users can only view details of their own expenses, not others’.

Key adjustments that ensure users can access key insights efficiently on mobile:

• Emphasis on Overview and Top Spending: The mobile layout prioritizes the overall financial summary and top spending insights for quick updates.
• Drill-Down to Top Units or Categories: Users can explore top expenses by category or unit. For example, with each category, users can see which units spend the most, followed by the individuals within those units who contribute the most to the expenses.

• Feature shipped: I designed and defined the logic, enabling the team to design and deliver the dashboard for web and mobile within just 4 months.
• Business Value: The dashboard has become a key selling point for the Bizzi expense management platform, with the Sales team using it to demonstrate value to potential customers. The CEO praised the dashboard, noting that it effectively addresses all customer inquiries.

• Deep Product Understanding is Key: Designers should invest time in understanding the product’s logic and technical constraints. This not only leads to better designs but also fosters efficient collaboration with developers and greater team alignment. Depending too much on product managers without grasping how the product works or how users interact with it limits a designer’s impact.
• Building upon agreed ideas: In one instance, I proposed changes after a discovery session, thinking my new ideas were better. This frustrated the CTO, as it deviated from what we had agreed upon. Upon reflection, I realized the importance of understanding the rationale behind prior decisions.
  • What I’d Do Differently: In projects with many unknowns, I’ll start by building on agreed ideas, quickly presenting wireframes for feedback, and iterating from there. This approach ensures alignment while allowing space for innovation.