Improving ease of content discoverability by streamlining content navigation for educators

The Open Learning Platform is McGraw Hill's digital ecosystem for delivering K-12 teacher curriculum content. While educators consistently praised the quality of the instructional materials, our research uncovered a critical usability issue. The fact every teacher struggled to efficiently locate and navigate the content they needed at various, and unique, moments within the platform. This project focused on improving content discoverability and streamlining the navigational experience to better support real, in-classroom workflows and successfully reduce any friction they are feeling during daily instructional periods.

The Challenge

Create a frictionless experience for content discovery so teachers can seamlessly navigate their classroom whether virtual or in-person

My Role

Utilize initial UX discovery explorations, iterate and ideate further, and improve usability to enhance the platform navigational experience

Team

School UX
OL Agile Dev Team
School K12 Product

Content structure complexities

The educational content is delivered by a multi-source system that supports all K-12 digital products within McGraw Hill's ecosystem. Structurally, the content hierarchy follows a generalized model of grandparent → parent → child → grandchild, where each level may contain multiple pieces of content—or serve as an “empty container” purely for organizational purposes. In practice, this means a teacher might click into a chapter and not encounter any actionable content until drilling down into a specific lesson. Once there, they may face multiple layers of collapsible content accordions, each requiring additional interaction. This structure led us to deeply consider the teacher's experience at every step—and to ask what they truly need in each individual moment to support instruction effectively.

What this means in reality

Each product serves as a grandparent-level structure that can contain multiple top-level sections—like units or chapters—with content tied directly to them, while also nesting second-level sections, such as lessons and individual instructional components, each equally capable of housing their own content

Russian Nesting Dolls

A similar way to think about it, each layer can contain meaningful content or simply act as a wrapper, requiring educators to progressively unpack each level to reach the instructional materials they need

Previous navigational structure

Previously, teachers had no way to preview content or even view an outline without clicking into each individual piece of instruction. The navigation required multiple clicks—first to expose the menu, then to expand a section, and finally to reach the actual content—making exploration slow and frustrating. We explored concepts like “jump to” links, but placing those links far from where the content actually lived felt disconnected and unintuitive. It raised a fundamental question: why was the content being hidden from the very people who needed it most?

first click opens the navigation

Step 1

Within the product, to access the tree hierarchy of the course, teachers had to first click "Browse This Course" to expose the content structure

second click exposes the parent folders

Step 2

Teacher can select a direct hyperlink to content, or the arrow to view what is within that specific folder

third click to expose the child level

Step 3

Once inside the parent folder the teacher can now see what is contained within that specific grouping

Findings & Solutioning

The current navigation system, while functional, presents a layered experience that requires multiple steps to access any real content. Teachers begin by selecting "Browse This Course" to view high-level chapters or units. However, interaction requires a combination of clicks. One to launch the Table of Contents (TOC) modal, one on the text to enter a unit, and another on a side arrow to preview nested lessons—introducing a somewhat hidden and non-scannable structure. This tiered interaction flow may not be immediately intuitive, especially for educators aiming to quickly locate specific materials. The lack of persistent visibility into sub-level content adds friction, contributing to a less efficient browsing experience. These insights directly informed our improvements to move toward a navigation pattern that prioritizes at-a-glance scannability and reduces the number of steps needed to reach lesson-level content.

These findings directly informed our shift toward a more transparent, user-centered navigation model. We introduced the Course Navigation Panel, a persistent left-side interface that clearly surfaces the full content hierarchy starting from the teacher's current location—whether within a unit, chapter, or lesson. This design supports quick scanning, expanding, and collapsing of sections without requiring deep navigation or guesswork. To further support planning and flexibility, we added a full-page Table of Contents overlay, enabling educators to view and jump to any part of the product—regardless of their current place in the flow. By combining contextual navigation with a scalable overview, we empowered teachers to find exactly what they need, when they need it eliminating unnecessary friction and better supporting the pace of live instruction.

Screen image of a button showing ubiquitous access to the table of contents

Evergreen access to Content

Regardless of the teacher's location, the TOC is readily available via the "Browse This Course" action button present on all content pages

Screen image showing full-screen overlay of the table of content

Full-page Table of Contents

Product content discoverability has been optimized for teachers, enabling quick, intuitive navigation both within and beyond the current lesson flow by removing any distractions not directly related to browsing experience

Screen image showing the course navigation panel

Course Navigation Panel

Informed directly from research and usability testing, the solution was to move toward a left-side, multi-level Course Navigation Panel that prioritizes at-a-glance scannability and reduces the number of steps needed to reach instructional content

Screen image showing the course navigation panel

All content is surfaced and actionable

All containers within a grandchild level, which may or may not have multiple pieces of content, are now exposed for the teacher to view and act upon

Streamlined Navigation, Measurable Impact

The redesigned navigation system significantly streamlined the instructional experience for teachers. By replacing the previous multi-step, dropdown-based interface with a persistent left-side Course Navigation Panel, content is now presented in a clear, scannable hierarchy. Teachers no longer need to click through multiple layers to preview or access lesson materials—units and lessons are visible at a glance, enabling faster decision-making and smoother transitions during class.

This improved structure led to measurable impacts like reduced time-on-task in reference to finding pertinent content for the moment, a significant decrease in navigation-related platform tickets, and very positive teacher, amd administrator, feedback citing less friction, easier planning, and quicker access to sudden content needs.

By minimizing cognitive load and surfacing content more intuitively, the new navigation empowers educators to find what they need, when they need it; supporting more effective, confident, and responsive instruction.

Featured Work
Systems

Create a good baseline foundation for backend focused engineers to quickly, and efficiently spin up custom applications for internal business partners.

Platforms

Terafina, Inc. streamlines onboarding and sales experiences for banks and credit unions across multiple channels.

Applications

A novel application for managing, utilizing, storing, and sharing Personally identifiable Information when you need it most and at your fingertips.

Applications

Being a homeowner is a job in and of itself. Rümi is here to make home ownership a little bit easier.

Collections

A collection of various editorial package identities that take complex ideas and distill them into simplicity through the use of easily understandable visuals.

Imaging USA is the first major photographic convention & expo of the year and is put on by Professional Photographers of America. A campaign to grow membership and expo attendance.

This piece that compares the two iconic comic book franchises and their cinematic universes to determine who does it best.

Various data visualizations for CNET magazine, editorial and online implementations.