Helping millions of parents get a great education for their child
let's talk
GREATSCHOOL
Services
Design Direction
Strategy
Development
The story
GreatSchools is the leading national nonprofit empowering parents to unlock educational opportunities for their children. GreatSchools provides school information and parenting resources to help millions of American families choose the right school, support learning at home, and guide their children to great futures. We were tasked with a complete re-design of the most trafficed page on the site, which was the school profile page.
40M
Yearly Users
271K
School Profiles
View site
The Challenge
User research indicated that the school profiles had become difficult to navigate over several iterations and new feature additions. We were brought on board to solve several design issues.
Simple navigation
Simplify navigation to showcase the most important data upfront
Increase engagement
Make reviews more prominent to increase engagement with the profiles
Diverse userbase
Redesign the page to account for the needs of a diverse userbase
Visualization
Present vast quantities of data in a meaningful way
The Solution
Digging deeper
We needed to dig deeper into the metrics and research to really understand the core user issues. We applied a holistic approach to examine the site. We audited the site, based on use case, users journeys to create a strategic road map to address those issues.
The Question
How to give users the most important content up front?
How to streamline navigation across the entire page content?
How to encourage users to leave more high quality reviews?
Holistic approach
Plan
We outlined how we believed users would derive value from the design. We then developed a plan to test our theories.
Test
Our user research team conducted structured user tests, observing how real users interacted with several design prototypes.
Analyze
Our cross functional team reviewed the results to fine tune future iterations.
1
The importance of the first glance
GreatSchools aggregates 80 data points to rank schools in a fair and balanced manner. Presenting that much information at one time would overwhelm users. The challenge was to present the easiest, most relevant data to users up front, then provide mechanisms for them to discover more and dig deeper on their own.
2
It's all about data presentation
We tested various combinations of data presentation and discovery models.
3
Progressive disclosure eases data overload
Organized related metrics into groups and presented them as shelves that the user could quickly scan through.

Analyzed usage to understand the most highly used groups of metrics and the datapoints within that group.

Designed progressive disclosure so that the most important datapoints were presented up front, with the option for the user to dig deeper into the secondary or tertiary metrics.

Enhanced the visual treatment to keep the page clean, clear and digestable.

Designed the page ground up to be mobile optimized.
4
Dig deeper without losing context
When users find interesting data points, they naturally want to dig deeper. It is important to present more information to the user within the context of the data they are looking at. We designed Pop-Hovers and Pop-Outs to reduce click paths and let the use focus on data.
5
Higher quality user reviews increase
User reviews play a key role in influencing a parent's perception about a school. School profiles with a large amount of higher quality reviews were proven to have more engagement. Beside auditing the review section, we looked closely at Foresee data to identify ways to enoucarage users to provide higher quality reviews.
Style guide
Typeface
The GreatSchools brand is a visual system that communicates the heart of its identity. Typography is an essential part to express Greatschools personality to the audiences. We use Open Sans and Caecilia as our primary typefaces.

Caecilia is a serif font with a rather ancient root which establish a trustworthy and respectable feeling. This typeface is dedicated to school names and add some accent to the school profile page.

Open Sans is a humanist sans-serif typeface that we use for headers, sub-headers, and body text because of its high readability. The font features natural width and open curves which conveys friendliness and openness.
Colors
The platform closely follows the brand colors which are shades of blue and green. These color schemes fit well with the GreatSchool nurturing brand personality, at the same time, offer good contrast and clarity to the visual elements.
Grid
Grids offer a guide to the placement of information and help generate visual hierarchy. They promote rhythm and consistency in a design and help develop relationships between elements based on rational proportions.In Greatschools, since the information is heavy, grids help create consistency, proportion, rhythm, and harmony across the designs and make it easier for the user to follow.
Sitemap
Here is the overall sitemap of GreatSchools! it is provides information about the flow of platform and the relationships between the
About usOur WorkAI Services
CONTACTLINKEDINDRIBBBLE
Copyright © 2024, Interactive Labs, Inc.