Case Study

Student Financial Aid

Making applying for financial aid easier

University of Missouri, June-November 2021
Role: UX designer

Background

Nearly all 31,000 students at the University of Missouri Student interact with the MU Student Financial Aid website at some point in their academic careers. While the information on the current site was well-maintained, the look and feel of the site didn’t match current university brand standards. This project also gave us an opportunity to improve the financial aid experience for our students.

The redesign project was split into two phases. The first phase involved a rebranding/redesign and move to WordPress (from a static site) with content changes strategically made to high impact areas. The second phase (in progress) involves implementing an adjusted menu system and site architecture along with additional content recommendations from the first phase.

Team

  • UX designer (me)

  • UI designer (wrote custom CSS and worked with developer to set site up in WordPress)

  • Digital content producer

  • Digital content strategist

  • Developer

Skills used

  • Interviews, surveys

  • Competitive analysis

  • Information architecture

  • Interface design (mock-ups/prototypes)

  • Presenting

Step 1 — Define user and stakeholder needs

After the project kickoff, I needed to build a deeper understanding of stakeholder and user needs. Unfortunately, we had limited access to students, families and Student Financial Aid staff for interviews. I did negotiate a qualitiative survey option that was sent to SFA staff. While this wasn’t optimal, we were at least able to get some additional insights into how the site was working for staff, and by proxy, students and families.

I developed a short list of questions for front-line staff and financial aid counselors:

  1. What questions do students (new and returning) and their families most frequently have?

  2. What are the current pain points (areas of confusion, etc.) that students and their families have when using the Student Financial Aid (SFA) website or when going through the financial aid process?

  3. What are your current pain points with the current SFA website?

  4. What is the best experience you can imagine for users of the SFA website?

The results

Frontline staff and counselors most frequently mentioned the following quesitons/problem areas in their responses:

Organizing it in a way someone who has no knowledge of financial aid could figure out where they need to look for the question they have.
— SFA staff
  • Need clarity on how to qualify for aid types (scholarships, grants, loans) and how to get more aid than awarded

  • Need specific disbursement dates

  • Understanding verification and how to complete that step if selected

  • How to apply for certain types of aid — the application processes for scholarships, loans and grants are all a bit different. Some require just the FAFSA, while others require separate applications.

  • Students often don’t complete items on their to-do list in myZou and then have a hold registration holds on their accounts.

  • Cost of attendance, especially for out-of-state students who are trying to figure out how to qualify for in-state tuition.

The survey responses pointed to some areas we might be able to improve during the redesign process. But before I made recommendations, I wanted to see what other universities were doing.

Step 2 — Find out what we can learn from other universities

Next, I did a quick competitor analysis of 13 Missouri public university, 14 Southeastern Conference (SEC) university and 64 Association of American Universities (AAU) member university student financial aid websites, to see how Mizzou’s website measured. I looked at how each of the schools:

  • Displayed costs and tution

  • Described the application process to students and families

  • Presented timelines or important dates for applying and accepting financial aid

  • Showed how much financial aid they provided to students

  • Presented disbursement and refund dates

  • Provided a document upload link for supplemental application materials and verification

Example findings: Costs

University of Missouri

Mizzou’s cost information was spread out amongst seven separate tables, which made it difficult to compare options.

Mizzou - University of Missouri logo
 

Other universities

The University of California-Davis consolidated their costs into one table, making it easy to see cost differences based on living options.

Rutgers University skipped the table altogether and created a widget where students enter their residency status, housing choice and campus location to receive a customized cost estimate.


Example findings: Application process

University of Missouri

Mizzou’s application process was structured in paragraphs, making it more difficult to see the steps and what order they should be completed in.

 

Other universities

The University of Texas at Austin and University of Arizona both clearly describe the steps and order of completion in the financial aid process.

 

Step 3 — Make recommendations

Given the shortened project timeline, I made six overarching recommendations based on the stakeholder survey and competitive analysis findings. These recommendations address some of the issues mentioned in the discovery phase of the project and were items the team could reasonably accomplish in the given time frame.

  1. Simplify the cost of attendance tables from seven to two.

  2. Create process overview entry points on the front page of the site (similar to University of Arizona). This will make the application process clearer for students and families so they know what steps to take and in what order.

  3. Reduce the number of audience gateway pages to only include one for parents/families. This will reduce redundant content, making the site easier to manage.

  4. Consider adding disbursement and refund start dates to help reduce “When do I get my refund?” questions.

  5. Make the document uploader more prominent on the site.

  6. Streamline and chunk page content so pages seem less dense and easer to understand.

Step 4 — Rework the information architecture so it aligns with recommendations

Next I created a new site map for the site that removed redundant pages, added clarity to several sections and provided a roadmap for phase two content work. This site map was partially implemented during phase one and will be completed during phase two as the digital content strategist reworks content based on the feedback we received from the survey.

Step 5 — Redesign the interface

I created prototypes in Adobe XD using the Mizzou Design System components and base theme. After the protoypes were approved, I wrote up design specs for our developers and met with them to hand over the project for development.

Before redesign

After redesign

The primary navigation has been reworked to follow the typically financial aid application and management process students follow. The document uploader link has been added to the tactical menu to make it easier for students to access.

The financial aid process is broken out into easy-to-follow steps on the site homepage.

 

Before redesign

Cost tables were broken up into many tables, making it difficult to compare options.

After redesign

Cost tables were consolidated into fewer tables, making it easier to compare costs associated with housing options.

Previous
Previous

COVID-19 pandemic communications