Sarah Fernquest — UX Designer based in Seattle, WA

Guide to Online Schools

Flagship Website Redesign

www.guidetoonlineschools.com

SR Education Group wanted to update its flagship site with improved content, visual design, usability, and responsive functionality, while maintaining or increasing its prominent position in Google’s organic search results.

ForSR Education Group DateOctober 2016
RoleUX Design, Visual & UI Design

Project Context

Guidetoonlineschools.com is a high converting content site that uses government data to rank accredited online college degree programs by metrics such as affordability, academic strength, student services, etc. Almost all site traffic enters via organic search results, so SEO was the primary driver of content requirements and site architecture.

  • Goal: To improve the content and design across our flagship website so that every page is content-rich (but still semantically SEO-focused), visually appealing, user-friendly, responsive, and promotions-worthy.
  • Unique Selling Proposition: To have the most accurate data with over 29,000 manually researched online degrees across over 1,742 chools.
  • Tone: Both users and promotional linking audiences should perceive us as authoritative and trustworthy. People trust us to help them make informed decisions on how to invest in their education.
  • Aesthetic: Modern and clean; more closely aligned with the aesthetic of college websites, as opposed to "fun" or trendy.
  • User Profile: The site's largest converting demographic are 35 to 44 year-olds followed by 55 to 64 year olds, so the redesigned site must appeal to a broad age range. While a slight majority of the site's users are male, females are substantially more likely to convert.

Homepage

With very few users entering on it, the main purpose of this site’s homepage is to demonstrate the site’s value and reputability as an authoritative source of education data. The homepage prior to redesign was cluttered with an overwhelming amount of information, with little visual hierarchy, and an outdated aesthetic. It had very limited responsive functionality.

Homepage before redesign.

With the goal of conveying authority and reputability, I intentionally veered away from the aesthetic of our main competitor sites (below), most of which rely on a prominent degree search tool and paying schools ads on the homepage to channel users into an aggressive conversion funnel.

Most of our competitor sites, above, use the homepage real estate to display a prominent “Find a Degree” tool and callouts for advertising schools.

Instead, I looked to college websites for design inspiration, noting color schemes, global navigation patterns, and messaging that imparted a sense of established legitimacy.

I experimented with several directions and honed in on a relatively subdued color scheme and familiar global navigation aesthetic, with a full-width image of students in the hero space to add a human connection to the clean and contemporary design. I produced a number of iterations following this theme.

Variations of the homepage hero module.

We opted to test and ultimately use the design that most prominently displays the site’s USP and coverage statistics, indicating to users the value of the site and breadth of data it offers. The primary CTA links to the online schools hub, a page that consistently ranks highly for user satisfaction, while the “Find an Online Degree” tool, our primary monetization device, lives less prominently below the hero image, although still above the fold.

Farther down the page are previews of each of the site’s main ranking lists, with criteria including student support services, best value, schools by state, schools by subject, and more.

High fidelity mock of the redesigned homepage hero module. Pared down content strengthens emphasis on the most important items. The redesigned site follows many principles of flat design, with some affordances to increase usability across a wide age range.

Online Schools Hub

As part of the project, I redesigned one of the site’s most highly visited pages, the online schools hub. This page is a directory of all accredited schools offering online college degrees along with average annual tuition and student recommendation rate.

Prominently linked to from the home page, this page houses some of the key features that establish our site as authoritative and trustworthy. As part of the redesign, I gave these features a UX refresh:

•   A filterable comprehensive list of accredited schools offering online degrees.

•   A “Compare Selected” feature tucked beneath the main filter, encouraging users to view data points about their favorite schools side by side while remaining visually distinct from the filtering functionality.

Online schools hub, before (left) and after (right).

Program Pages

The degree program pages (variations below) constitute the bulk of content on the site, each featuring in-depth data and long-form content about a particular subject across all online degree levels. The biggest challenge in designing these pages was balancing sheer volume of content with efficient navigation.

To ensure that users could quickly discover and access features low on the page, I designed a sub-navigation bar – a sort of “what’s on this page” table of contents – from which users can navigate directly to an area of interest. On smaller screens, users see an abbreviated version of this navigation bar, scoped to include anchor links to only the most popular content.

I think the new layout does a wonderful job of improving overall user experience.

- Tony, Partner School Representative

Variations of the subject-specific “program page” layout across different device types.

Thank You Pages

A large portion of site revenue comes from the thank you pages, where users land after submitting a lead. Messaging on these pages confirms that a request for information about a school has been submitted successfully and encourages the user to submit subsequent leads for schools offering similar degrees.

I designed and A/B tested a few gamification modules to see if we could increase conversion on these already lucrative pages. The winning variant yielded a 44% increase in earnings per visitor (EPV) sitewide. Inspired by this outcome, we rolled out a similar change to a sibling site, OnlineU.org, and saw a comparably high revenue EPV increase of 38% sitewide in the following month.

The inclusion of a progress bar on thank you pages led to a 44% increase in EPV.

Project Impact

The launch of the updated design and content had several positive outcomes:

•   We now have a more valuable product to offer our paying partner schools, from whom we received immediate positive responses.

•   The marking outreach team saw increased promotional success in the months following the redesign, with a 30% increase in conversions.

•   Both the site’s overall revenue and earnings per visitor showed a 50% year-over-year growth rate in the opening months of 2017, traditionally the site’s highest-traffic and highest-revenue time of year.