Matt Holloway
TPR.gif

Case Study – The Princeton Review

Case Study: The Princeton Review
Role: Creative Director

Overview

The Princeton Review is a college admission services company, offering test preparation services, tutoring/admissions resources, online courses, and books published by Random House. In 2015, The Princeton Review decided to expand their goals to include middle school students and become the trustworthy standard in online education with matching brand awareness. They expedited this process by acquiring Tutor.com.

I came onboard to facilitate the merger of the two companies and enhance the online services that current users came to expect and introduce The Princeton Review to the market as the 'one-stop-shop' for the user's complete educational journey.

As a company we successfully created a full service educational ecosystem to all users ranging from middle school to post graduate in the US and Canada and 14 other countries. My team worked directly on our new full service online educational classroom,  consumer website and mobile apps. The Princeton Review now successfully offers the best in homework help, tutoring, test prep, admissions and more. 

Contributions:
•  Strategy
•  Design
•  Brand
•  User Research
•  Responsive Web Development
•  iOS and Android Development
•  Quality Assurance
•  Analytics and Optimization


Step 1: Simplify 

The first step we took was to take an audit of our base visuals; color palette, graphic library, photography, and typography . 


Color Palette

The original palette included red, orange, yellow, green, blue, purple, pink, brown with mid-tone variations and shadow/highlight variations. 

With an homage to the Princeton Review's print history and a compliment to the yellow and black logo, we set the base palette to CMYK. Paired with the Deep Blue hue; the entire palette works together making, content easy to absorb with small pops of color to grab the eye for key items like CTA's. 

Colors.gif
 

Custom Icon Set

Having now acquired new users we needed a new look and feel that spoke to our whole user base, from students needing homework help assistance to students prepping for the MCAT®.

With our new color palette we created illustrations that were playful and inviting, but not childish.

A/B tests against the original control resulted in a landslide. 9 out of 10 users preferred the fresh design direction and completed tasks quicker by aid of the new icons.

 
stats.gif
 

Photography

To accompany our new icon library we set out to build our new photography library. Professional photo shoots with original content owned exclusively to a company is obviously the way to go, but we had no budget and needed images quick. Stock was the only option. 

It became imperative to select imagery that expressed a distinctive voice and exemplified creative excellence. Images that represented genuine stories, avoiding the pitfalls of traditional stock. With a subtle reusable photo edit process we could provide a more cohesive look that could be carried out with minimal editing experience by all.

 

Typography

Simplifying the type was the final component to our first step. Both sites initially had 3-4 faces with many sizes and weights. 

We took it down to basics with one singular face, Gotham. Within that, sizes and weight options were kept minimal.

This approach to 'less is more', was key to merging the companies and getting all teams onboard immediately. It also provided a simple clean look to the sites and made cross-platform products look cohesive.

Specimen.gif
Layout.gif

Step 2: Implement New Style 

This is where the rubber meets the road and all the initial groundwork came together.


Heros

Our goal was to create templates that delivered the most important information above the fold. Given our broad spectrum of user types and vast product line, we designed varied hero templates to accommodate. 

 Template with numerical kvp's with a limited time promo (above the fold)

Template with numerical kvp's with a limited time promo (above the fold)

 Template that accents kvp's using new icons within a collapsible panel (above the fold)

Template that accents kvp's using new icons within a collapsible panel (above the fold)

 Template that reinforces the rate card with bulleted kvp's, within a collapsible panel (above the fold)

Template that reinforces the rate card with bulleted kvp's, within a collapsible panel (above the fold)


Rate Cards

The rate cards of The Princeton Review are gateways for our users. They become forks in the road that guide them down their educational path.

That means we took them VERY seriously and designed each one carefully with an enormous amount of A/B testing. We designed many versions catering to study styles, price points, matrix comparisons, kvp's, features, and promo codes.

The ever changing, ever testing rate card model was an essential part to growing the company. We found this reaped the greatest gains for conversions and user loyalty.

 Study style rate card template with side-by-side price comparison

Study style rate card template with side-by-side price comparison

 Pared down rate cards with kvp's 

Pared down rate cards with kvp's 

 Rate cards with a promo feature 

Rate cards with a promo feature 

 Horizontal rate card feature with lifestyle accent

Horizontal rate card feature with lifestyle accent

 Matrix comparison rate card 

Matrix comparison rate card 


List Views

The Princeton Review offers A LOT of classes. It became essential to display these massive lists in the most digestible way for users. Displaying the key information in small chunks and options to see more details. 

TPR_Interface_ListView.gif

Boilerplates

TPR_Interface_Boilerplates.jpg
stat2.png
 

Identity

Interested?
Text: (732) 773-5662
Email: heymattholloway@gmail.com
Insta: mattholloway