CalCentral Billing
UC Berkeley's student portal, including tuition billing and payment
Duration
January to April 2019
My Role
Designer + Researcher
Team
1 Analyst + 2 Developers
CalCentral is UC Berkeley's student portal, providing academic and financial tools to students and parents. The billing dashboard, where users review tuition and make payments, didn't clearly communicate which bills were due and it was hard to find important bills. The lack of clarity around billing created confusion and stress for users, and left support teams to field a high volume of calls.

Constraints

Outcome

I redesigned the dashboard to create a more intuitive and transparent billing experience. My designs went live in August of 2019. In the first 8 months after the release, support tickets dropped by 26% year-over-year.

Foundational Research

I conducted interviews with students and parents who had a range of financial experience and tuition payment strategies. I mapped their current pain points and identified three key themes related to their needs:
BUILD CLARITY

Financial aid can be complicated and feel unpredictable, leaving even experienced users confused.

BUILD Literacy

Many students are new to finance and need to be met where they are on their financial journey.

BUILD TRUST

Tuition is a significant investment. Clear communication about bills and confirmation of payments is critical.

Problem Definition

We ranked identified pain points based on user impact, stakeholder impact, and technical effort. While there were issues with the payment tool linked from the dashboard, it was not technically feasible to update. Identifying this limitation early on allowed us to refocus on other areas and build clarity about payments into the dashboard itself.

Problem Areas

We used our triage and affinity mapping to identify three problem areas critically impacting users and stakeholders that we could address within our scope.
01. Paying Bills

How might we clearly inform users about which bills are due and when?

02. Finding Information

How can we ensure users can quickly find the transactions and information they need?

03. Tracking Activity

How might we provide users with a clear understanding of their billing landscape?

Design Process

I organized my redesign into three areas of focus but my design work occurred simultaneously. I constantly considered how each area related to the others and how they fit together to create a cohesive experience.
01

Bill Payment

My foundational research helped us understand how students and parents prioritize information throughout the bill payment flow. My first step in the redesign was to elevate and clarify the information they value at the appropriate stages.

Billing Summary

The first stop in the bill payment flow is the Billing Summary Card. Improving its information display and interaction design was essential in order to align its function with user expectations.

Pain points

Redesign

Due Dates and Statuses

Assessing the due statuses and due dates of outstanding charges was another critical step in the payment process. However, users could not quickly identify the due status.

Pain points

Redesign

02

Finding Information

A significant area of friction for users was finding the information they needed to make sense of their account. To improve the experience, I analyzed how users grouped transaction types and how each type behaved on their account.

Transaction Table

For each user, the transaction table houses hundreds of items, each with sub-layers of important data. Users had trouble finding transactions and the related information they needed.

Pain points

Redesign

Mobile View

While Google Analytics showed that roughly 36% of CalCentral traffic came from mobile devices in 2018, the dashboard was difficult to parse and navigate on small screens.

Pain points

Redesign

03

Tracking Activity

Users had trouble understanding their account activity and how payments impacted their balance.  Many points of confusion could be traced back to the underlying complexity of the tuition system. Since we couldn’t overhaul the system, our challenge was to clarify these nuances in the dashboard itself.

Transaction Adjustments

Financial aid packages and tuition charges regularly change as a student’s eligibility shifts. In the original dashboard, each change was displayed as a new transaction line which caused significant confusion. Users were also uncertain about why changes occurred, however the rationale for these changes proved too complex and variable for us to address within our project scope. Instead we focused on clarifying the timeline of changes so that users could map them to other updates in their account.

Pain points

Redesign

Receipt

Policy dictates that payments apply to the oldest charge first, meaning users cannot select which charges to pay. This is in stark contrast with how users expect to be able to pay charges. Since we couldn't change policy, we incorporated a "receipt" into our redesign to clarify the system's behavior.

New Feature

Design System

Where possible, I followed the conventions of the existing design system. However, to improve usability I did redesign several elements and interaction patterns.

Outcome

See what you owe

The simplified billing summary allows students and parents to quickly understand the amount due and makes more detailed information easy to find.

Stay on top of activity

A reimagined display of account transactions and a more intuitive navigation scheme means users always know what's happening on their account.

Size up the details

Expanded transaction views untangle the messy aspects of billing and make it easy to dig into the details.

Reflections

Define the scope and goals of every project early on. By outlining needs and expectations with team members and stakeholders early in the project, we were able to work more efficiently and evaluate our redesign against concrete milestones.
Zoom in and zoom out. Design details are critical and, as such, are rightly the focus of many designers. I found my decisions were most effective, though, when I could both dig into the details, like badges and expansion interaction and then take a big step back to consider the larger billing experience.
MyShake
CalCentral Design System
Other Work
© Kaylin Rochford 2022
LINKEDIN