College cost comparison tool

Consumer Financial Protection Bureau

Collage of scale and certificate icons, table of contributions with elements, and total costs breakdown layout element.

Problem

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.

Process

Research: User testing and workflows

UX design: Collaboration and constraints

Visual design and prototyping: Code-first design process

Paying for College is 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, and estimates post-school debt and overall debt burden.

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.

Awards

  • 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

Research

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.

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.

UX design

Collaboration and constraints

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.

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.

College cost comparison tool
College cost comparison tool

Visual design and prototyping

Code-first design process

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.

College cost comparison tool
College cost comparison tool
College cost comparison tool

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.