MyBill “Announcements” Redesign

The Brief

MyBill is a website that allows UC Davis students and authorized users to view their bills, make payments, and manage student accounts. However, the site can be confusing and with something as important as paying tuition, a confusing site can lead to detrimental mistakes. For a project, I was asked to redesign an aspect of the website in order to refine the student experience of using MyBill.

User Research

To understand users’ pain points when using MyBill, I conducted several one-on-one user interviews.

Here are some of the questions that I asked my users:

• What task(s) have you used MyBill for?

• What has been your experience using MyBill? Positives? Negatives?

• Have you ever used MyBill to opt out of SHIP* or equitable access*? What was that process like for you? Positives? Negatives?

Here are some of the common pain points that I discovered in my research:

• The announcements section on the left side is text-heavy and overwhelming; users can easily miss important information and opt-out deadlines for SHIP, equitable access**, etc.

  • The opting-out process is quite difficult too, since the links included take you to FAQ/informational pages, which users have to look through to figure out the process

• When viewing account activity, myBill shows several fees (waivers, financial aid, etc.) added and subtracted, which makes it confusing for the user to understand what they were and weren’t charged for

* SHIP stands for the Student Health Insurance Program. Students that already have health insurance can submit a waiver to opt out of the university health insurance in order to save money.
** Equitable access is a program where students can get all course materials for a flat fee of $169. Students who would rather buy course materials on their own can choose to opt out.

Defining the Scope

The Problem

The announcements section within MyBill is not helpful to the user. 

• The excessive amounts of text are difficult for the user to navigate, and important information is not clearly visible to the user upon opening MyBill. Opt-out announcements get lost and users can easily miss deadlines.

• After clicking links within the announcements section, users must carefully read a new webpage to find instructions on opting out.

• The color coding is not helpful and does not seem to follow a clear logic. 

The Goal

To design a new solution that makes it easier for users to view the information included in the announcements section, reminds users of any upcoming deadlines, and allows users to act upon any pending tasks in a straightforward manner.

Wireframes

The new “To Do” section clearly shows users the tasks previously listed in the “announcements” section, and it is located right above the “Student Account” section. That way, users see it right when they open MyBill. Payment deadlines, which were also included in “announcements” earlier, are shown under “Student Account,” so that users can see this information right above their pending balance.

Each of the tasks in the “To Do” section are linked directly, unlike the “announcements” section. However, users can still easily visit informational webpages by clicking “Read More.”

I also included time periods in the task name so that users know how often they will need to complete the task (if applicable).

Final Product

The original UI used only white backgrounds, but the sections were outlined in gray. I decided to keep the backgrounds for the sections white and add a soft drop shadow over a light gray background to make the distinction more subtle. I also used rounder corners throughout the interface. These changes allowed me to add more friendliness to the user interface; I wanted to create a design that would clearly show users any upcoming deadlines without overwhelming them.

Additionally, to make the interface more consistent with UC Davis branding, I used Proxima Nova instead of the existing font, which is likely Roboto. Furthermore, I added more colors from the branding, incorporating more of the “Aggie Blue,” along with some secondary colors: “Gunrock” (ultramarine blue) for the links and “Double Decker” (bright red) for alerts.

After completing the SHIP waiver or opting out of equitable access, the bubble for the task is filled in, the text describing the task is crossed-out, and the section is grayed-out; only the "Read More" link remains clickable so that users can still easily reference webpages with relevant information. The task is also pushed to the bottom of the to-do list. This way, it is clear to the user that the task has been completed. However, it remains on the to-do list so that users can easily verify that they have completed the task.

Because the direct deposit authorization*** only has to be completed once, and not annually or quarterly, it does not remain on the task list, so that the task list does not seem long and overwhelming to the user.  

***students may sign up for direct deposit so that the university can deposit any refunds/returned fees directly into their bank accounts

What I Learned

In this project, I had the opportunity to figure out how a process that UC Davis students have been doing for years can be streamlined, which is especially important for new students. I practiced my user research skills by conducting interviews and organizing the data that I collected in the form of an affinity map. I also practiced my user interface design skills by updating the UI of MyBill to make it more in line with the UC Davis branding and also seem more “friendly.” Overall, I enjoyed figuring out the small changes that would significantly improve students’ experiences using the website.