product/ux designer • ux design mentor
Homepage.png

Case Study: Degreed.com Redesign

home-hero@2x copy.jpg

Degreed.com Redesign

Case Study

Project Overview

For several years, the Degreed.com marketing site had not been fully redesigned. Various pages throughout the site had been updated, such as when Degreed Skill Certification was announced, but overall the entire site was a hodge-podge of visual styles, disparate elements and dead-end user flows. In late 2017, the decision was made to start investigating a redesign and rearchitecture of the site. Given my experience with information architecture, consumer web design and user research, I was chosen to lead this redesign effort, collaborating with not only product management, engineering and other product designers, but also the product marketing and brand teams.

jump to:

Information Architecture/Site Map     Sketching     User Testing: Visual Explorations     Creating the Main Pages     Additional Pages

 

Information Architecture/Site Map

Hierarchical Site Map of Degreed.com as of August 2017

Existing site evaluation

When beginning the project, my first priority was determining which pages from the existing site would be kept, which could be migrated or combined into new pages, and which should be retired. To do this, I first created a site map diagram of the existing site to catalogue all existing pages as well as illustrate the lack of user flow within the site.

site map proposals

From there, I was able to determine some of the biggest user flow issues, such as dead ends and unlinked pages, within the site architecture, and propose several solutions for improvement.

Site Map Option A - Split Audience

Site Map Option B - Consumer Focused

Site Map Option C - Enterprise-Focused

Site Map Option D - Product Offering Focused

Final Proposed Site Map for Degreed.com Redesign

Final proposal

These solutions were then brought to stakeholders, including C-level management, for discussion and evaluation against Degreed's desired market positioning to determine the final proposal.

In the end, a "Split Audience" site map, wherein the user is asked upfront to choose their desired experience, was determined to be the most in line with Degreed's philosophy of supporting individual learners as well as enterprise SaaS customers, as well as not selling solely on feature lists, but on user experience and helping users to reach their goals.

Tools: Omnigraffle

 

Sketching (via iPad)

Once the information architecture/site map was determined, I began sketching potential layouts for the Degreed.com homepage, as well as explorations for navigation paradigms. Ideally, I wanted the navigation to closely mirror the patterns already existing in the Degreed platform, so I stayed very close to those visually while exploring ways to seamlessly incorporate calls to action (such as Log In and Sign Up) within the header.

Tools: Paper by FiftyThree

Homepage + Navigation Exploratory Sketches

Navigation Exploration

 

Three Candidates for Visual Design

User Testing: Visual Explorations

At this stage, the VP of Product Design suggested that I start creating a visual language and design system for the new site. Speaking with other designers on the team, though, highlighted that there were many different opinions as to what the visual language should look like. Being more of a back-end UX designer, I felt less opinionated about the visual direction of the site personally, and favored using user research to help determine the look and feel. As such, I asked three designers -- a Product Designer, the VP of Product Design and the VP of Brand -- to each create a version of a Degreed.com homepage in the style of their choosing. 

I then took each of the three visual design treatments and used UserTesting.com to compare them in a remote, unmoderated user test. I asked a total of 15 users (split between A vs B, B vs C and A vs C, with the order in which each was shown to a user randomized to eliminate recency bias) to give their first impressions of the visual styling, then evaluate which of the two designs they were shown was more "Bold" and which was more "Trustworthy."

In the end, each of the three visual styles had its own merit -- B was most "Bold" while A was most "Trustworthy;" C was most easily understood and users liked the amount of white space. And so I iterated on a combination of the three to create a cohesive design language.

Tools: Sketch, UserTesting.com, Invision

 

Creating the Main Pages

Once the visual design language was established, I began working on laying out the first three pages we intended to release: the homepage, For You (consumers) and For Business (enterprise buyers). Throughout the process of designing these pages, I worked closely with the VP of Product Marketing to iterate on messaging and copy, and with the VP of Product Design to ensure quality. The Brand Marketing team was ultimately responsible for photography assets for the pages, while I was in charge of editing them to make them web friendly (responsive, compressed and retina-ready).

Tools: Sketch, Invision

Homepage

For You

For Business

 

Additional Pages

Once the three main pages had been released, it was then time to focus on updating the rest of the site to match the new look and feel. Over the course of the next few months (Degreed practices 1-month long sprints), the remainder of these pages were released, with the final page (404/500 Error Page) releasing in July 2018.

Tools: Sketch, Invision

About Page

Contact Us Page

Careers Page

404/500 Error Page