How might we improve the campus billing experience?
Collaborators: Cassidy Hsieh, Julia Liang.
The UC Berkeley Student Information System office contracted our team at Berkeley Innovation to help them in their large-scale effort to redesign the online student experience at Berkeley. Our assignment is to tackle the portion of the experience that deals with paying bills to the university. As we quickly discovered, this is a deeply complex series of interactions between students and the online systems.
The sections below describe the steps we've taken in the design process so far, as well as some future directions.
Defining the problem
The problem, as we see it, is two fold. First, students cannot understand their bill and how their financial aid interacts with it, and second, students feel they cannot trust the system or even their own actions.
We would like to help students better understand the connection between their financial aid and billing statements and make the system more intuitive for users by implementing an easily navigable interface.
Target Users: Undergraduate students who are highly dependent on financial aid
Our first move was to familiarize ourself the space. This meant reaching out to our friends at other universities to get screenshots of their online billing systems. One thing we noticed right away is that they were all pretty terrible.
We then gathered data on peoples' general sentiments regarding the online bill/financial aid experience through a Google survey. Some questions included "How often do you use the online billing system?" and "Tell us about a time you were frustrated with the system."
In additon to this, we conducted several in-depth interviews wherein we asked participants to take us through the process of paying their bill. Participants were instructed to voice their thoughts throughout their experience interacting with the software.
We gave priority to people we knew who depend heavily on financial aid when choosing participants.
On the left are notes from an interview conducted by Julia.
Key Insights and Ideation
We synthesized our data to identify four key insights about the problem. They are listed below with some proposed solutions.
Users feel they cannot trust the system because it lacks specific information about the allocation of financial resources.
Provide a breakdown of charged fees, including where they're from and where to go with questions.
Information icons beside each item
Consistent color coding across the platform
The most important information to students is not presented to them immediately.
Add a checklist so students know exactly what actions are required of them
Visualize how student loans and financial aid affect billing in a clear way.
Enhance the onboarding experience to familiarizes students with the information architecture
Provide disclaimers before potentially risky actions.
Much of the terminology throughout the platform is misleading or confusing.
Place information icons beside each item with important definitions and instructions
Create a page called "Understanding your bill" containing an index or glossary of terms.
Users are not given feedback for their actions.
After paying a bill, a banner or some other indication should clearly state that a payment is being processed to avoid double payments.
Visual cues should indicate when a payment has been finalized (such as greying out the option)
Online discussion forums for students to share their knowledge.
In order to create a clearer, more communicative user interface, we set out to clearly define the role of color. The color scheme we used can be found to the right. Some notable decisions:
We derived the different shades of blue from the website that will house the myFinances page. We considered it a priority to ensure our design solutions would feel appropriate in the setting.
The green, yellow, and red are derived from the official UC Berkeley branding guidelines as well as the existing myFinances website for similar reasons.
With only a couple weeks until our due date, we had to move quickly on a layout for the new design. We started by generating several alternatives and using a combination of user testing and our own discretion to narrow the selection down.
Some Important Design Decisions
After testing several options, we represented the relationship between financial aid and the monthly bill using a progress-bar-like graphic. Per the color scheme previously defined, different segments on the progress bar show how much of the bill has been covered by existing payment methods, and how much is left to be paid.
The "amount due," which users repeatedly complained was not obvious in the original UI, is displayed front and center. The amount owed is colored red, consistent with the "action required" coding.
The colors associated with each category are brought to the descriptions in the form of a bar on the side.
Our proposed UI has more descriptive and prominently featured notifications, which are also color coded to indicate status.
Students who click through to view more details are met with a detailed description of what is paying for what in their bill. Information icons appear to the right of terms that may require further definition.
Links that were part of a poorly placed "Frequently Asked Questions" card have been migrated to the bottom of the page to reduce clutter.