Colledge Scorecard Redesign

Colledge Scorecard Redesign Challenge

TYPE: Web redesign and information visualization
INVOLVEMENT: InnoCentive Challenge
DURATION: Aug,2013 - Sep,2014
MY ROLE: Web design, data visualization, video

Colledge Scorecard Design Demo


Improving Clarity of College Information Using the "College Scorecard".

This Challenge is to create a mock-up of the user experience for the College Scorecard that allows a user to easily obtain comparable information about colleges and universities that enhances the college choice process and is relevant to a diverse set of students. With more than 4,000 colleges and universities available in the United States, choosing a college is a daunting task. With the customized and streamlined user experience on our redesigned College Scorecard, users are empowered to find colleges and universities that fit them better for their future.

Design Structure

Design process


Search by school type.
Search by major.
Search result page.
Search by distance.

User Case

User case1.
User case1.
User case1.


1. Mainpage

Search Bar: Users can search for colleges, majors, address, zip codes, etc.

Filter labels: The group of labels are shown under the search bar all the time. The content under each label will expend when that label is clicked.

Log in / Sign up: Users can log in or sign up to have more functions, such as to add colleges to favorite folder, to save searching result, to add friends and so on.

Guide: Users can use the guide function to read tips, to be familiar with the school application process and so on.

Major Profile: Users can check the major details when setting major filters, and they can also see three of the most searched majors on the mainpage.


2. Filters

Location filter
Application filter
Cost and financial aid filter
Colledge type filter
User type filter
Major filter

3. Search result page

Filter labels and tags: The filter labels are the same as users see in the landing page. The variables are shown under labels as tags. When users click labels, a pop-up window slides out, showing the filter options. Tags can be added or changed when users add or change variables. Tags can be easily deleted by clicking the "x" symbol on the right.

College Name Card: This card shows the most basic information of the college - College name, logo, and location. Users can click the heart on the lower right of the card to add the college to favorite folder.

College infographic Card: This card shows some critical information and data of the college in the form of infographic. Users can choose the type of information they want to see in the infographic card - general, academic and financial information.

Search result page

(1)The general infographic card shows the ranking, student population, campus setting, and graducation rate.

(2)The applicational infographic card shows the acceptance rate, applicants total number, admitted number and average SAT score.

(3)The financial infographic card shows the in-state and out-of-state tuition fee, the percentage of receiving financial aid, and the average amount of aid. Users can customize what data is shown on the card.

Favorite folder: After users log in, the favorite folder will show besides the account information. When users click it, a new page opens and shows the list of colleges with a layout similar to the search result.

Favorite folder

Recommended for you: At top of the search result panel, there is a list of colleges and universities that are recommended for the users, based on their personal interests, academic competence, affordabilities, etc. The recommended colleges and universities may beyond the filters users have selected, but they are better choices, and the algorithm decides that users could make it.

Recommended for you

Sort by: Users can sort the search results by clicking the title label, or using the dropdown menu on the right corner above the search result list. Users can sort by institution name, ranking, student population, and any title that is used in the infographic.

Sort by

Colledge detail page

Float section labels: In college detail page, the college information is divided in 7 sections: Overview, Programs / Majors, Location, Costs & Aid, Students, Admissions, and athletics. When scrolling down, the section labels will float on the top of the screen.

College basic info card: On the top of other sections, this card contains information about college name, logo, location, website, tuition, acceptance rate, college type, size, setting and ranking. On the bottom of the card, there is a graphic showing the application timeline.

Sections: Users can check the full content of the section by clicking "see more" on the bottom and expand the section.

"Similar College": Based on the basic information of the current college / university, the website will generate a list of universities that are similar to it. The colleges listed here may not be included in the search result.

"College You May like": Based on both the current college basic information and the search result, the website will generate a list of colleges that are similar to it and within the search result.

Colledge detail page