OBJECTIVES

Part 1 of Project:

Pearson’s DCE team sit’s at the center of all of it’s 3 main geographical divisions (US, Canada, & UK), they lead and oversee the strategic direction and core design of Pearson’s website, however trying to fill the unique needs of each of these geographies caused the Pearson website core experiences to become fractured. Our initial task was to conduct a current state audit of the core user experiences for Pearson’s main user group (educators). These core experiences include the user successfully accessing the help and support page, “Find your Rep” page and the instructor resource center. After this audit, we were tasked with developing UX recommendations & solutions to these broken experiences, that were trapping the user in a “educator frustration loop.” We needed to pitch these solutions and recommendations to the key stakeholders in order to achieve further funding and buy in for Pearson’s DCE team.

Part 2 of Project:

Not only did Pearson’s DCE team lose control over the core experiences of their website, they also lost control of webpage design and development, this allowed the 3 main geographies to have full reign over the development of new webpages on the Pearson site, which led to a plethora of webpages that were not consistent across the 3 geographies and were not following UX best practices, creating confusing and frustrating user experiences that began to greatly impact sales and consumer retention. The webpages that were most impacted by this misalignment was all family pages and product pages across Pearson’s legacy website. Pearson had just recently launched a completely new look and feel and new website, giving them an opportunity to fix this misalignment when migrating all of the old legacy pages over to the new website.

ROLE

UX/UI and visual design lead, overseeing a UX/UI designer.

  • Worked closely with Pearson’s key client stakeholders as well as Pearson’s various design teams, authoring teams, accessibility and development teams.

 
 

Part 1: User Experience RECOMMENDATIONS for core experiences

SOlution

Our team conducted a detailed current state audit of all of the 3 key experiences (help & support, “Find your Rep,” and the instructor resource center), define the “educator frustration loop,” to serve as a jumping off point for a in depth week long workshop to ensure we had full alignment and a clear path forward. As a fast follow to workshop week, we gathered our recommended (and Pearson-prioritized) solutions for these 3 experiences on Pearson.com. 

 

Gain an understanding

Our first set of deliverables was associated with 3 days of in-person working sessions to ensure we had full alignment on a plan and path forward. We leveraged our strong understanding of the IBM enterprise design thinking workshop framework to develop a customized EDT workshop to discover the key pain points of Pearsons educator, student and support rep personas.

 
 

Fixing a Broken Framework

As a fast follow to our workshop week, we gathered our recommended (and prioritized) solutions for the 3 core user experiences on Pearson.com.

 

We wrapped part 1 of the Educator Phase 2 work by holding a virtual alignment and readout session with the US, Canada & UK stakeholder teams to align all teams on these crucial solutions and the strategy behind implementing these solutions.

 

Part 2: product & family page Template Development

SOlution

Our team conducted a component and content audit and analysis of all current product and family pages on the legacy Pearson site in order to analyze key component usage that could potentially impact migration. Once this analysis was conducted we needed to leverage this information to develop net new templates (leveraging the brand guidelines) for both the family pages and product pages of the site so the authoring and development teams had a Northstar to look toward when migrating legacy pages and developing new webpages on the new Pearson site.

The development process for each template covered four main territories. Auditing & analysis, pressure testing, content modeling & component mapping & optimization.

 

1: Auditing & Analysis

Each template design process (for both product & family pages) began by reviewing a representative cross section of both product and family pages from the initial Pearson legacy page audit to analyze component usage across each, while also tracking against common content types to create an outline for the design and content work needed for each template.

 

Component Audit, Analysis and Initial Requirements List

Product & Family Page Component Audit

 

Content Analysis & Outline

After the component audit, analysis & requirements list had been conducted our team then conducted work on analyzing all product and family page content. Our team noted every type of content on each of these webpages and the frequency at which they saw these content types. After this process, a content outline was developed as a northstar for our team to follow when developing new webpages.

Product Page Content Analysis

Product & Family Page Common Component Themes (U.S)

 

Product & Family Page Initial Requirements List Based off of Component Audit & Analysis

 

Product Page Content Outline

 

2: Pressure Testing

Using a set of 3 legacy URLs representing a cross section of components and page types across geos (U.S, Canada, U.K) , we began the process of pressure testing our designs to ensure we were aware of, and preparing for, a variety of component and content needs.

From here, a 1:1 version of the template was designed to “lift & shift” legacy content into a new product or family page, leveraging Pearson’s new design system & AEM. Detailed guidance and annotations were incorporated to guide the Pearson authoring team through the process.

U.S Legacy Pearson page (left), lift and shift design (right)

CA Legacy Pearson page (left), lift and shift design (right)

U.K Legacy Pearson page (left), lift and shift design (right)

 

3: Content Modeling & Component Mapping

After analyzing the common legacy page content, we determined a new, ideal narrative flow for each template to guide page authors and provide users a better experience.
All legacy components were mapped against what's available in AEM, identifying gaps and informing customization recommendations.

Content Model

 

Component Mapping

Component mapping of a legacy component (magic box) seen frequently across Pearson’s legacy sites. The solution was to develop a new hero component for Pearson’s product & family pages.

Component mapping of a legacy component (vertical in page navigation) seen frequently across Pearson’s legacy sites. The solution was to develop a brand new secondary horizontal sticky navigation that could assist the user in navigating larger product and family pages while fitting within their new design system and played nicely with their primary navigation.

 

4: Optimization

With the content modeling and component mapping complete, an optimized/ideal state template was designed for both product and family.
Each optimized template design represents a north star for the migration process, and a guide for any net new pages created from this point forward.

Legacy page U.S (left) with lift & shift (second from left) & optimized versions (third left & right)

Legacy page U.K (left) with lift & shift (second from left) & optimized versions (third left & right)

Legacy page Canada (left) with lift & shift (second from left) & optimized versions (third left & right)

 

Family page & product page templates for net new page builds were also developed as a North Star for Pearson’s design, authoring and development team and to align all 3 geos to UX/UI best practices in webpage development. Creating these templates in conjunction with a detailed build guide is to ensure Pearson’s 3 geos do not run wild when creating webpages and to limit “Frankenstein” webpage builds.

 

Build Guide

To assist page authors utilizing the product and family templates, we created two detailed and comprehensive build guides that capture all the information
and requirements needed to migrate existing legacy pages or create new pages for Pearson.com. We worked closely with Pearson’s design, authoring and accessibility teams to develop this build guide.

Each Build Guide Consists of The Following:

  • UX/UI Design & Style Guidelines

  • Content Model & Outline

  • Component Breakdown & Customizations

  • Component Mapping for Outliers & Edge Cases

  • Migration examples

  • Lift & Shift 

  • Optimized

Sample of a customization page from the Pearson build guide I lead our team in developing.

Sample of a migration page from the Pearson build guide which educates the authoring team on how to best migrate the legacy webpage into the new Pearson' webpages we designed.