LiUNA Dues Dashboard

Jan 2025–Apr 2025

Reducing Member Complaints With A Simple UI Fix

When working within a large organization, it can feel impossible to solve day-to-day issues because they’re often tied up in the foundational systems that keep it running. But by listening to the people these issues affect and understanding how they work together, we can sometimes find the solution in fixing a simple miscommunication.

Reading Time: 5 mins

Desktop and mobile versions of the dues dashboard screen. The screens are overlapped on top of a green background.

The Problem with Arrears Notices

When I started this project, my primary contact was a developer who maintains an admin application for a local union branch. This application keeps track of dues payments and he was looking for help with redesigning it to solve an issue the administrators were having.

Members' Complaints

The developer explained that admin were getting calls from members who had received an arrears notice and were confused about when they missed their dues payments.

Drawing of a member looking at an envelope with a warning symbol on it.

Members would receive an arrears notice, telling them they hadn’t paid their union dues.

Drawing of a member calling the office with their mobile phone while reading their arrears notice. A thought bubble beside the person's head reads: '??'

Some would be surprised and concerned because they thought that their employer had missed a payment, so they would call the office.

Drawing of a member having a conversation with one of the administrators over the phone. The member looks angry and the administrator looks stressed. Overlapping speech bubbles imply it is a heated conversation.

When administrators tried clarifying using the information in the application, it would often cause more confusion.

Fixing the dues application

Some union staff had suggested that they change how the payments were recorded, so that admin could explain it more easily. But the developer explained that these changes would require a complete overhaul of the application.

This would take a long time, and to add to this, many of the more experienced admin were used to how the application worked and would have to learn a new system.

Pro:

Reduce member complaints

Pro:

Simpler to understand

Con:

Costly implementation

Con:

Admin have to learn a new system

This left them with the question:

If it wasn’t feasible to completely change the application, how else could they alleviate confusion about members’ dues payments?

Finding the Miscommunication

Before I started exploring solutions, I wanted to really understand why members were calling the office.

My first question was...

What did the arrears notice tell members?

Icon of an envelope with a warning symbol on it.

If members still had outstanding payments after a certain amount of time, they would be sent an arrears notice that looks something like this:

Mockup of the arrears notice letter. The notice reads 'Notice of Arrears: You are hereby notified that you are behind in your dues by the amount of $43.00 There is a table below showing month owing and amount. It says 'Due Dec-2025', Amount:43.00

From this notice, you might assume that you owed $43.00 from a missed payment for December 2025.

However, this was not always true—it could be the case that the missed payment was from a different month.

This led me to ask...

How did the dues application keep track of payments?

Icon of a computer screen showing a database.

In order to understand how the date on the arrears notice could be “wrong”, we have to understand how the admin application keeps track of dues payments:

In the application, a member’s balance can be thought of like a measuring cup, with each line representing a month of dues.
A measuring cup that has each measurement line labelled with a month, going from June at the bottom to December at the top. The cup is filled to the July line.
When a member makes a payment, the cup fills to the next line. If a payment was missed, the next one would contribute to the previous month.
A measuring cup that has each measurement line labelled with a month, going from June at the bottom to December at the top. Above the cup is the text '$42' and an arrow showing it is going into the cup. The cup is filled to the August line.
When an arrears notice is generated the application would use this “measurement” to say which periods were missing.
A measuring cup that has each measurement line labelled with a month, going from June at the bottom to December at the top. The cup is filled to the August line and the level between August and September is hatched in red to indicate a missed payment. An arrow points from the cup to the text 'Month owing: SEPT-2025'

So when we look at the example arrears notice it could be that the member missed their December payment or it could be a scenario like this:

Say in one year, you worked January-September and November-December, and in October you had forgotten to pay your dues while in between jobs.
A series of measuring cups showing the sequence of the months of October, November, and December. In October, it shows $0 being added to the cup and it's filled to the September line. In November, it shows $42 being added to the cup, now filled to the October line. In December, it shows $42 being added to the cup, now filled to the November line.

Month owing: DEC-2025

This made sense to the admin because they had the complete records which showed when the payment was made, who it was made by, how much was paid, etc. But since the members were only given the period of the missing payment, they had to fill in the gaps themselves.

This made me think...

Was there any other way for members to check their dues payments?

Icon of a receipt with a magnifying glass over it.

I asked the developer if there were any other sources of information that members could access before calling the office. He said there was one other option:

The dues dashboard on the member's portal

Screenshot of the desktop version of the dues dashboard.
Dues Dashboard - Desktop

This page showed their payment history, but as you can see, this could be hard to read and didn’t provide information on who was responsible for the missed payment.

So why were members calling the office?

Due to the unintuitive way the system categorized dues payments, the arrears notice and dues dashboard didn’t provide enough information to clear up their concerns. The only way to get this information was to call the office.

    mail
  1. Receives their arrears notice
    2. Member's thoughts:

    “I’m missing a payment in December? But my employer should have paid this month!”

    captive_portal
  2. Checks their dues dashboard to find the missed payment
    3. Member's thoughts:

    “This just says the same thing! I still can’t tell if my employer paid...”

    support_agent
  3. Calls the office to ask admin

Bridging the Gap

The thing was, all the information was in the system—what payments were being missed, who was responsible for them—it just wasn’t being shown to the members.

I suggested that they could alleviate members’ confusion by updating the dues dashboard with better information.

With the information readily available, members wouldn’t have to call the office in the first place.

mail

Receives their arrears notice

captive_portal

Checks their dues dashboard to find the missed payment

“Oh I see... I missed a payment while I was between jobs"

check

Understands their outstanding dues

Targeting the dues dashboard instead of the dues application would eliminate the need for costly changes and keep the system that the administrators knew best.

Redesigning the Payment Page

Working within a limited budget, I focused on how I could make things clearer using content and styling.

I avoided making major changes or adding complicated new features that would slow down implementation. At this stage, it was important to work closely with the developer to understand the technical limitations of what data could be displayed and how we could format it.

To start, I reevaluated what data the table should show:

Previous Version
A screenshot of the payment history table on the dues dashboard page, labelled with the numbers 1 to 3.The header row of the table has three columns: Date, Description, and Amount. Beside each title is a downward arrow button indicating they are sortable. The date column shows a date in day-month-year format. The description column shows a month (Mar-2024, Feb-2024, etc). The month column shows dollar amounts in Canadian dollars.

In the previous version, the table displaying the payment history was unclear & lacked crucial information.

  1. Names of columns were vague and didn’t describe their content well.
  2. “Date” and “Description” fields seemed redundant.
  3. Sorting by “Description” and “Amount” wasn’t helpful to members.
Updated Version
A mockup of a redesigned payment history table labelled with the numbers 1 to 3. The header row of the table has four columns: Period, Payment(CAD), Paid By, and Balance(CAD). There are no arrows beside the titles. The period column shows the month (Mar-2024, Feb-2024, etc). The payment column shows dues paid in Canadian dollars. The paid by column shows the text 'Paid by' followed by the payee. The balance column shows the running balance during that period in Canadian dollars.

To provide members with the complete picture of their payment history, columns could be renamed and more data could be added.

  1. Combined “Date” and “Description” into “Period”.
  2. Renamed fields for better clarity.
  3. Added columns for who made the payment and what the total balance was that month.
  4. Removed sorting features.

Next was the overall lack of readability.

Previous Version
A screenshot of the mobile version of the dues dashboard, labelled with the numbers 1 and 2. All text in the table is bold and, instead of being laid out in columns, each rows' cells are stacked vertically. The background colour of these 'rows' alternates to separate them.

A lack of visual hierarchy made it difficult to find what you were looking for, and there were some challenges with the responsive design on mobile devices.

  1. Similar text formatting made it harder to read.
  2. On mobile, the stacking of the rows made it awkward to read and scroll through.
Updated Version
A mockup of a redesigned mobile layout for the payment history, labelled with the numbers 1 to 3. The payment history table's rows are displayed horizontally, like in the desktop version. Text in each column is formatted differently, with the payment and balance information bolded. Positive amounts in the balance column are coloured red and negative amounts are coloured green.

To improve readability, I thought it would be best to preserve the table formatting on mobile. Further styling could be used to make important information stand out.

  1. Changed the text size and font weight of certain columns to create emphasis
  2. Colour-coded the “Balance” to show which periods the member was owing or had credit.

The final priority was to provide members as much clarity as possible about their account status.

Previous Version
The top of the payment history page labelled with the number 1. This shows that above the table, there is a button labelled 'Make Payment'

When a member opened the dues dashboard, there was no summary of their account or overall balance.

  1. Payment button shown, but no information on the status of their account.
Updated Version
A mockup of the top of the dues dashboard, labelled with the numbers 1 to 3. There is a section added above the 'Make Payment' button which contains the text: 'Current Balance: $85.00'. Below the text 'Current Balance' it says:'Due May 1 2025' with an hourglass icon. Below the text '$85.00' it says 'In Arrears' with an exclamation point inside a circle.

To make the experience as seamless as possible, a summary could be added to allow members to see their account status at a glance.

  1. Displayed the member’s current balance.
  2. Displayed the upcoming due date.
  3. Displayed the status of the account.

I put together three different versions of the dues dashboard, showing different desktop/mobile layout at different levels of effort of implementation.

Introducing the New Design

In the end, the team agreed to proceed with Concept 3.

A phone screen showing the redesigned dues dashboard.
A laptop screen showing the redesigned dues dashboard.

Since hand-off, the new payment history page has been implemented and is now being used by members.

So far, responses have been positive and according to the office staff, calls have reduced.

Although I only had a small role in updating this system, I learned a lot about navigating the interconnected needs of the people who use it. It’s difficult, especially when every change has an effect on so many people, but to me this shows that there is immense potential for improvement simply through bridging some gaps.

← Back to Portfolio