Project

Design Revamp of Allovue’s Spending Tracking Software

Balance Manage was Allovue’s first product. I led the Balance Manage 2019 redesign to enhance the user experience.

Responsibility

Product design

Balance Manage is a software that helps K-12 school districts track their spending.

Every year, billions of taxpayer dollars are put aside to fund public schools. School districts need to track where their funds go, make sure the money is spent effectively, and prove to policymakers that they are fiscally accountable.

District officials need to track tens of thousands of transactions throughout the school year using a combination of federal, state, and local funding. Enterprise Resource Planning (ERP) systems in school districts can be complicated and hard to understand. Manage Balance provides school districts a user-friendly and transparent way to access financial data.

We want more high-quality and actionable data at our fingertips to provide insights and to make better decisions.
Allovue Customer

Since its inception in 2015, Balance Manage has gone through multiple iterations. However, its general look has remained the same. When Allovue expanded its product line, the design of the newer products made Balance Manage look outdated by comparison. Balance Manage also had performance issues that could be solved using new development frameworks.

Knowing that the changes we wanted to make could not be achieved through iterations, we decided to redesign Balance Manage.

3 goals of Balance Manage redesign

We finished 4 major screen-level redesigns in 2 months.

The Balance Manage accounts page, before & after
Organizing the navigation bar for clarity and scalability for future products
Optimizing the tables
  1. We redesigned our tables with a simple row style to achieve a clean appearance.  
  2. The new table has customizable columns. Each column is sortable and filterable.
  3. Based on A/B test results, we decided to set a limit of 3 rows to text wrapping in the table cells.
  4. This redesign gave us a perfect opportunity to move away from infinite scrolling to pagination.
Ensuring Balance Manage is color-accessible

We used contrasting colors for greater clarity on the stacked column charts. We also added patterns to ensure that people who are colorblind can distinguish data even easier.

Creating a great filter experience

Every day, our users use filters to surface the finance information they care about. Most of our users’ screen sizes were small, and we must prioritize the use of the screen space to show charts and tables. Our challenge was: How might we make using filters an easy and intuitive process without having it take up too much screen space?

Instead of showing all filtering options at once, we placed a drop-down menu at the left top of the page and visually enhanced the button with a background color.

  1. Categorize filters We sampled many account strings and transactions from customer data and sorted filter categories by their relevance to users’ needs to enhance usability.
  2. Multiple selections Allowing the user to make several selections in the same filter category at once gives users more flexibility in narrowing down their desired results.
  1. Display applied filters An applied filter section appears whenever filters are applied to give users a quick way to check currently applied filters. The number of filter results will also be shown in the table.
  2. Filters can be edited easily From the applied filters section, users can modify the filters without having to refresh the page or start over their search again.
Creating the Summarize function

Summarize is a function that helps users put accounts that share the same account string into a group to summarize the total balance.


In the original Balance Manage, users could only apply one Summarize function at a time. If Principal Dave wanted to know how much of Heath Fund was spent on each program at each grade level, he would not be able to Summarize Heath Fund by subject and by grade level at the same time. Users need to apply multiple Summarize functions so they can narrow down to the data they want.

Charts of accounts are hierarchical. That creates a lot of complexities when the hierarchy and multiple types of Summarize overlap one another. For example, Heath Fund has multiple levels of parent-child hierarchy. Principal Dave should be able to apply Summarize function by grade level to the Math account at the highest level, or to Everyday Math account at the lowest level.

To address the complex relationships, we sketched 8 versions of design and went through 3 rounds of testing with our users and district partners.

Our final solution

  1. A fixed column constantly allows users to see the balances, without the need to scroll to the end every time they want to find the numbers.
  2. In-row buttons provide users with the most approximate context.
  3. We used indents to demonstrate parent-child relationships. We also include connecting lines because a parent and a child can be vertically parted by expansions or another Summarize function.
  4. Arrows show whether a row is expanded or collapsed.
  5. Active groups are easy to spot and can be removed easily.
Curating the overview page

An overview page is a powerful tool that helps users monitor data at a glance. In our research, our users found the old overview page “confusing, and not very helpful.”

Overview page before redesign

First, we defined the goals of our users: they come to the overview page to ensure that their spendings are on track. Then we prioritized data that could help users spot unintended outflows.

  1. A bar-chart that compares current expenses to past fiscal years lets users gain insight into monthly spending.
  2. A donut chart shows composition with a mini table to help users make sense of the data.
  3. A table of weekly transactions. Our research showed one week is the proper time range to show on the widgets.
  4. Users can view fund utilization by account segments.
Scoping dashboard data

Balance Manage has several user roles. A superintendent may want to oversee the budget of the entire district, or a school principal may want to only monitor the expenses of their school. Both users are trying to complete the same task by interacting with different sets of data.

We tailor to individual user needs by allowing each user to scope information to the bookmarks they’ve already created.

The outcome

Over 3 months of collaboration across 4 time zones, we launched the new Balance Manage together.
Our users usually don’t like changes. However, this time, we saw excitement for the redesign. After the release, every user we’ve consulted thought the new app is better and easier to use, not only because it has new functionalities and runs faster, but also because the transition to the new app is not overwhelming. We made this happen through knowing our users and what was important to them.