Student debt interactive visualization

Student debt interactive visualization

As student debt continues to rise, students must consider cost when deciding which school to attend. Many colleges offer attractive financial aid packages and grants so that actual out-of-pocket costs can vary widely. This interactive visualization lets students explore cost, demographics, and funding options for urban colleges so they can make informed decisions.


The Design Process


Product Research

  • School debt research

    We performed market research to understand how students currently research school costs, and to understand which factors weigh heavily on college application and acceptance decisions.

  • Gathering Data

    We gathered school grant, financial aid, and cost data from national databases.


  • Sketching & Ideation

    Sketches included 3 designs for peer and expert evaluation. We incorporated the feedback into our final designs before prototyping.

    early screen mockup


  • Prototyping

    Prototyped in HTML using the d3 Javascript library and MySQL.

    • Video overview

    • Overview

      In the overview at top, each vertical bar represents a single school. Bar length indicates tuition costs for an institution. Bars are broken into 3 sections for: grants, financial aid, and out-of-pocket cost.

    • Zoom & Filter

      Select a subset of schools in the overview to see a zoomed-in view in the lower left window. Here they can change the stacked histogram baselines to compare overall tuition, loans and expenses, grants and scholarships.

      Filter schools in 3 ways: search on a particular school using the search box, select criteria in the upper right-hand search window, or click geographic locations on the map.

    • Details on Demand

      Users can click on a particular school in the zoom view to see details about the school’s demographics in the lower right window.


  • Expert Walk-Through

    Last, our final prototype received an expert walk-through with two experts, and we documented the suggestions.

  • Expert and peer critique

    We presented a poster during our first peer evaluation to share our design ideas for critique.