President Obama's College Scorecard

What: accessibility/inclusive design, progressive enhancement, HTML/CSS, education, data visualization

The Obama Administration had been trying to rank colleges for years, but coming to consensus on what ‘good’ means had proven too difficult. Instead, the College Scorecard provides data on student outcomes both as an easy-to-use online tool, and as an open-data API for others to make their own tools from.

As Lisa Gelobter put it in her post on, “this work was truly collaborative team effort, with teams from the Departments of Education and of the Treasury, White House Domestic Policy Council, Council of Economic Advisors, and Office of Management and Budget, the General Services Administration’s 18F and the U.S. Digital Service.”

She continues:

“We received direct input from students, families, and their advisers to provide the clearest, most accessible, and reliable national data on college cost, graduation, debt, and post-college earnings. This new College Scorecard can empower Americans to: rate colleges based on what matters most to them, highlight colleges that are serving students of all backgrounds well, and to focus on making a quality, affordable education within reach.”

“For the first time, the public can access the most reliable and comprehensive data on students’ outcomes at specific colleges, including former students’ earnings, graduates’ student debt, and borrowers’ repayment rates. The data is also available for various sub-groups, like first generation and Pell students. Because the data will be published through an API, researchers, policymakers, and members of the public can customize their own analysis of college performance more quickly and easily.”

Read her entire post on what went into creating this site here

Coding the scorecard

For this project, I was one of two front end developers that worked over three months to bring the extensive user research and usability-tested designs to life. My role was primarily HTML/CSS. I made sure front end code was built to modern standards; was documented so that whoever took over the project could continue without problem; and was accessible and progressively-enhanced. Site accessibility was no small feat since the site design included custom versions of almost every form element available to a browser.

College scorecard responsive views, homepage

College scorecard responsive views, results page

One of my favorite parts of working on this project was the live styleguide we created to make sure our styles were modularizing the way we’d hoped, and not becoming too inter-mingled as to make long-term maintenance difficult. The images of the styleguide below also show some of our custom form elements.

College scorecard styleguide

Although responsive design is always important on every project, user testing had shown that our front end tool (the interface at in particular needed to be usability on cellphone-sized screens. It turned out that our primary audience for that tool was much more likely to access the site on a mobile device than on a desktop computer. Conversely, when things got tight close to rollout, we spent less time on perfecting responsive work on the data downloads part of the site, as the users for that section primarily used full desktop computers.

One of the challenges of this project was the need to keep our work hidden behind passwords and logins until the President made the official announcement. This made testing things like meta tags challenging to say the least! Fortunately, since this project was meant to launch tons of newly-open data into the world, after the announcement our entire codebase (in addition to the College Scorecard API and data) was made open on GitHub for others to fork, learn from and improve.

Press sampling

NPR: President Obama’s New ‘College Scorecard’ Is A Torrent Of Data

“This is government working for us. My first thought was, ‘Go Department of Education,’ “ says Sara Goldrick-Rab, who teaches education policy at the University of Wisconsin, Madison. “We had some information college by college before, but we didn’t have most of these outcomes here.”

The White House: Weekly Address: A New College Scorecard

“The President speaks about the launch of a new College Scorecard, meant to help students and parents identify which schools provide the biggest bang for your buck.”

The Atlantic: Obama’s New College Scorecard Flips the Focus of Rankings

“Earlier this September, the president unveiled his much-anticipated “College Scorecard” as part of that pledge. The new tool, however, isn’t exactly a ranking system. Instead, it gives users access to extensive federal data on the student-debt and attendance-cost data for more than 7,000 U.S. higher-ed institutions allowing them to compare institutions; students can use the Scorecard to list and sort schools based on the institutions’ on-time graduation rates, school size, and salary after attending, among other factors.”

The Huffington Post: Roundup of news on the College Scorecard

Feature image Graduating college students
Source U.S. Department of Education