Student debt can be a confusing arena where it's often difficult to understand how to compare the financial benefits of getting a college degree. Getting a college degree is often a part of the American dream, but students and parents taking on this debt often fail to realize the debt burden after school. This tool aims to help 21 million prospective college students and their high school counselors.
Research: User testing and workflows
UX design: Collaboration and constraints
Visual design and prototyping: Code-first design process
As a part of the product team at the Consumer Financial Protection Bureau, CFPB, I prototyped my designs in code and worked with other UX designers in sprint cycles to release Paying for College, a set of tools catered towards the education life milestone.
Paying for College is a tool to help prospective college students and their families decipher how much a college degree actually costs. The cost comparison worksheet computes the actual cost of the chosen schools by comparing tuition, books, and other expenses, estimated post-school debt and overall debt burden.
Our users for this tool included 21 million students enrolling in college every year and their guidance counselors. Our team of consisting of a product manager, developer, UX designer, and myself also worked with the CFPB “Students Team” delving into student debt data and the Department of Education.
Starting out, we mapped how a student might use this tool as they applied for colleges and student loans. This included researching schools, filling of a FAFSA application, choosing a loan, comparing costs of different colleges, managing money, and finally repaying debt. We conducted usability tests which revealed the beta tool was ineffective because it’s layout was difficult to understand.
Brittany Mederos and I collaborated on how to build this tool, whiteboarding out different scenarios that we’d both elaborate on and test. We ran into issues of how users were going to input data (if at all), how we would integrate two-year and four-year programs, and how to easily compare costs of different programs. This stemmed from working inter-agency with the Department of Education.
From our usability test data, we decided to redesign with a new layout which would include school indicators so students could compare more effectively, and a GI Bill calculator to calculate eligible benefits. We decided to move forward with a prototype to enable better user testing of the tool.
Paying for College was meant to be an extension of the Consumer Financial Protection Bureau brand. It drew inspiration from the light usage of color on the rest of the website while focusing primarily on interactions. One of the more interesting parts of the interface was the sticky input header that allowed users to easily switch between schools, and the sticky footer containing important debt information that would attach itself to the bottom of the page once the user reached far enough down the cost table.