College Scorecard User Testing + Redesign
College Scorecard is a U.S. Department of Education tool for students, parents, and counselors to compare the cost and value of higher education institutions in the United States.
The goal of the redesign was to improve the College Scorecard user experience for high school students and their parents.
VIEW THE LIVE SITE
Background
Project type: Responsive website design, website redesign
Role: Product Design, User Research, Visual Design, Prototyping & Testing
Client: Department of Education
Tools: Figma, Zoom, UserInterviews.com
Duration: September 2024 - Ongoing
Research & Discovery
We conducted 24 one-on-one user interviews with 20 students and 4 parents to assess the usefulness and helpfulness of the College Scorecard website and kicked off a redesign to address the insights.
Key Achievements
Co-led 24 user interview sessions
Managed recruitment, scheduling, and distribution of participation incentives
Redesigned home page and iterated based on client feedback
Old College Scorecard homepage
User Research
Research Questions
Are users able to successfully use all of the features of Scorecard?
Can users successfully interpret Scorecard data?
What are participants’ perceptions of the website overall?
What would make the site more useful or easier to use?
Methodology
We conducted sessions virtually on Zoom and they lasted approximately an hour. To comply with the Paperwork Reduction Act, research was conducted through direct observation. Participants were asked to interact with the website as if they had landed there on their own.
Participant Demographics (User Interviews)
The Good: Users liked the breadth of the data, felt that the connection to the government makes the site feel trustworthy, and think it is a good resource for high school students.
Findings and Recommendations
The Bad: Users had mixed first impressions on the home page. Some liked the simplicity, but others thought it was “bland”, “very 2015-esque,” and “could use a face lift.”
Actionable Insights
INSIGHT 01
The search bar is often overlooked, and users notice the resource links first.
Participants often skipped over the search bar and read the “Alternative Pathways to a Career” links first, sometimes clicking those links as their first action.
How might we keep users on the site, and lead users to the search page?
INSIGHT 02
The Compare process is confusing.
Several participants, both students and parents, missed the Compare function entirely. Some noted that the process to add schools to compare was confusing. A few users also noted that the compare icon does not make its function obvious, and that the checkmark could be mistaken as a verified symbol.
How might we simplify the Compare process and educate users on core functions of the website?
INSIGHT 03
Acceptance rate is very important to students.
Many students listed the Acceptance Rate among their top, if not first, priorities. The statistic is currently hidden toward the bottom of the school profile under a collapsed tab, and can be difficult to find at a glance. Some participants wanted the option to filter by a range of test scores instead of just seeing that test score and below.
How might we align the featured metrics with what users are more interested to find?
INSIGHT 04
Students are confused by the technical definitions in the glossary and tooltips.
The current “glossary” exists as a data repository for developers and data scientists to access the data. Several participants found this glossary and were confused by the long definitions for terms like “Median Earnings”, “Average Annual Cost”, especially the time ranges presented for the data.
How might we make the technical data and definitions more accessible for high school students, their parents, and school counselors that use the College Scorecard?
INSIGHT 05
Some students do not have a specific college in mind.
The key entry point into the site is the search bar, where a student must either search for a specific school or field of study. Several participants, especially younger ones, did not have a specific college in mind to search for, and did not know where else to start.
How might we tailor the website to account for students on different points in their college search journey?
Recommendations
Homepage Design Refresh: Redesign the College Scorecard homepage to emphasize the search bar and include additional information above the external links about how to use the College Scorecard and the scope of its offerings
Emphasize Acceptance Rate: Move the Test Scores & Acceptance tab higher in the list of data sections on the School Profile (i.e., as the second option, behind Costs). Also consider displaying acceptance rate data near the top of the School Profile page.
Compare Schools Workflow: Improve the compare functionality button on school cards in the School Search results page. Make the Add to Compare button in the School Profile more prominent and improve the design of the Compare Tray, so that is more apparent to users.
Plain Language Glossary: Create a plain language glossary and definitions that are more accessible to high school students and parents. Use plain language for key metrics on the consumer website and create plain language tooltips. Rename the current “Glossary” to Data Definitions.
Resource Page for Students: Add a new page to the Resources section intended for students that includes resources for high school students about applying for college, paying for college, alternative career pathways, etc.
Homepage Redesign
The client prioritized redesigning the homepage, so we designed a new page that explains core functions of the website, how to use the compare function, and features of the site.
Key goals:
Keep users on the College Scorecard website instead of clicking out of the site, into the external resource links
The client wanted the search bar to stand out more
Explain the features of the Scorecard site
Key changes:
Added buttons for common searches like Schools Near Me, Most People Get In, and Most People Graduate to get users off the home page and into the search part of the site
Explanation of how to add schools to Compare
Callouts of data that is unique to the College Scorecard
Simplified header to make the search bar stand out more
Students thought the connection to the U.S. government made the site feel more trustworthy, so we called that out.
We explained how to add schools to compare because there was a lot of confusion around the process.
Users were clicking the resources immediately and navigating off the site, so we added several internal site links and moved the resources to the very bottom of the home page.
Additional User Testing
Redesign Launch
After approval from the client, the team opted to conduct additional rounds of user testing with five high school students.
Research Goals
Ensure the search function is prominent
Offer a way into the website without needing to search a specific school name
Modernize the site to be more visually appealing
Add context to provide useful information about the data and functions on the website
Sessions were conducted virtually via Zoom and lasted approximately 30 minutes each.
Outcome
Participants had overall positive reactions to the redesigned College Scorecard homepage and preferred the redesigned option over the existing version of the homepage. Five common themes emerged from the user research sessions:
Participants prefer the redesigned homepage because of the addition of images and explanations of the site’s features
Students did not like the wording of “Most People Get In” on the Search by Buttons
Students were inclined to use the “Schools Near Me” button
Cost and average earnings post-graduation are important to students, more so than graduation rate
Participants immediately read and clicked the links to outside resources on the original homepage, and liked that they were more understated on the redesigned page
The redesigned homepage was launched in January 2025.
Finals updates included updating the text to “Quick Search” and changing the buttons to just be “Near Me” and “All Colleges”
Outcomes Update
Another client priority was updating the Graduation & Retention Outcomes section on School Profiles.
Old Outcomes Chart:
Vertically stacked bar chart did not efficiently utilize space in the container
I developed mockups for three proposed redesign options: a horizontally stacked bar chart, a horizontal bar chart, and a tile option.
On the horizontal stacked bar chart, the client was concerned with showing favoritism toward any of the outcomes with different colors, and preferred an option where all outcomes used the same color palette.
Next Steps
This is an ongoing project. Next priorities:
Plain language glossary
Redesign the Compare function
Redesign the Fields of Study section
Glossary for parents and students
Resources for students