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

User Research

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.

Gathering Data
  • 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.

  1. 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
  2. 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.
  3. 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.
  4. 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.
Color coding

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.
Weighing Alternatives

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.

Final deliverables
Some Important Design Decisions
More Interaction Design