Global Navigation Redesign
Client:
McGraw Hill
ROLE:
UX Lead
DURATION:
3 Months
Redesign of the navigation interface for an EdTech company's global website.
Background
How can a global education company improve its navigation for users?
McGraw Hill is a global education company with offerings spanning multiple business units and target markets. Its website fields traffic from +8 million users a year. Users rely on the site to find products, locate support resources and make purchase decisions, making the redesign of the nav bar a key project to improve the content structure of the site.
GOAL
Create a clean, accessible navigation interface that intuitively guides users to data-driven, persona-based paths to achieve known website tasks.
Reduce navigation bar's visual competition with the page content without impacting findability of key nav interactions (on some pages, the nav bar had up to 4 layers and a height of as much as 275px)
Improve content structure to align with user engagement trends, jargon and expectations
Ensure that the navigation bar is fully compliant with WCAG 2.0 web accessibiltiy standards
USER STORIES& ANALYTICS
Who will use this and what do they need to do?
User | Intent |
As an educator… | I want to easily navigate to relevant offerings by identifying the learning level and subject matter for the classes that I teach, so that I can purchase items for my K12 class. |
| I want to easily navigate to relevant offerings by identifying the learning level and subject matter for the classes that I teach, so that I can adopt them for my Higher Ed class. |
| I want to an easy way to launch products I’m using to teach my classes, so that I don’t have to hunt for the sign in page. |
As a student… | I want to easily launch products I’m using to learn in my classes, so that I don’t have to hunt for the sign in page. |
| I want an easy way to access my cart, so that I can quickly make a purchase. |
As a general visitor… | I want an easy and always-present way to search the site, so that I can quickly find whatever I’m looking for, regardless of the content type. |
| I want a clear way to sign in when I’m signed out, so that I can access my information and products. |
| I want a clear route to My Account when I’m signed in, so that I can find information related to my needs. |
| I want to know the region that my site experience is tailored to and the ability to change it, so that I can review offers that are available to me based on where I'm located. |
I want to have the right expectations of nav itmes so that I can get to the pages I need to complete the task I came to the site for. |
These stories were supported by:
Engagement trends via analytics tracking
Responses from website surveys
Compiled persona research and sales team insights
COMPETITIVE ANALYSIS & USABILITY TESTING
What other complex websites demonstrate a user-friendly approach to their website's navigation?
We began our effort with an analysis of other websites with digital and physical eCommerce offers for a variety of personas, including those in the education space. This would give us a heuristic-based foundation to the redesign. This step was a collaborative effort with our team's UX Researcher.
Initial Heuristics Comparison
Known Issues in Current Experience
Inefficient use of space (Learning level options take up the most space even though they largely would only need to be interacted with once)
Visual emphasis on general navigation options (dark gray bar) compete with microsite navigation, creating confusion (trends of users interacting with the dark gray bar expecting content to be related to the microsite topic)
Accessibility issues with atomic components used in the navigation (tabbing order, appropriate use of components, etc.)
Vague terminology, e.g. "Discover" and "Connect" (which is also the name of a McGraw Hill product)
RESEARCH
Our research approach was intended to go from macro to micro, confirming usability heuristics We broke up the work into (3) phases:
Usability comparison against competitors
Content restructure card sort & tree testing
Usability of redesigned interface
Research Phase 1: Usability Comparison
The goal of this first phase was to understand what improved usability of site navigation interfaces in general. We asked users
24 Desktop Users
PreK-12 Instructors
HE Instructors
HE Students
Professional Students
24 Mobile Users
PreK-12 Instructors
HE Instructors
HE Students
Professional Students
Content Restructure Card Sort & Tree Test
24 Desktop Users
PreK-12 Instructors
HE Instructors
HE Students
Professional Students
24 Mobile Users
PreK-12 Instructors
HE Instructors
HE Students
Professional Students
DESIGNS
The length of the design process is always variable, depending on the needs of the customer. In most cases, I strive to iterate off of real user feedback, setting up moderated or unmoderated tasks to test partial prototypes for usability and comprehension.
BEFORE/AFTERS
PROTOTYPES
At the prototyping stage, I'm working closely with devs to ensure that expected behavior isn't only shown through the design, but annotated and documented for their reference as they bring the design to life.