| TYPE: | Web redesign and information visualization |
| INVOLVEMENT: | InnoCentive Challenge |
| DURATION: | Aug,2013 - Sep,2014 |
| COLLABORATORS: | Luxi Chen |
| MY ROLE: | Web design, data visualization, video |
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.
Wireframes
User Case
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
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.
(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.
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.
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.
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.