Paying for College

Consumer Financial Protection Bureau

Paying for College


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.


User testing and workflows

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.

UX design

Collaboration and constraints

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
Paying for College

Visual design and prototyping

Code-first design process

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.

Paying for College
Paying for College

Paying for College
Paying for College


  • Winner of a Best of the Web & Digital Government Achievement Award for 2013
  • Runner-up for the 2013 Core77 Design Award in Research and Strategy
  • Finalist for the 2013 IDEA Award in Design Strategy

I’m always looking to connect with fellow designers and am open to speaking opportunities. Let’s grab a coffee and chat if you’re in Seattle!

Send a DM on Twitter
Two people standing on the outside deck of a Washington State Ferry.