Navigation Updates

How I Improved the discoverability and find-ability of content on the O’Reilly learning platform

Users of the O’Reilly learning platform were overwhelmed by choice. How content is organized and presented on the platform hinders their ability to understand what features and content are available and relevant to them. This problem was a cause for a negative experience due to time spent seeking knowledge rather than consuming it.

I worked in collaboration with another designer and discovered this problem by analyzing findings and reviewing research insights. When analyzing customer feedback and observing users in usability studies I saw many of our learners getting frequently lost in their path to content. I also held interviews with the customer support team where their feedback and comments outlined that the current navigation structure was not supporting our user’s needs.

The following diagram illustrates the learning platform's then Information architecture

We decided to reorganize and consolidate the content into an information system that enabled users to find what they need faster and more effectively complete their tasks across the platform efficiently, we specifically sought to:

  • Develop a navigation system that enables users to find content and discover key features effectively and intuitively
  • Improve how users navigate the platform to find content.

Bench-marking the current Structure

We supplemented the research by conducting a mixture of card sorting and tree-testing studies to uncover our target users (mid-career software engineers that learn using online learning platforms) mental models and to identify where the current structure was failing to meet their needs.

Tree-Testing bench-marking report (Non-admins)

Card-Sorting report (Third-party Panel)

We derived the following observations and insights:

  • Administrative functions are typically separated from content
  • The path users took to find content was generally influenced by their motivations for search. (e.g Users looking to experiment with a new cloud technology would take a modality first approach)
  • While content was organized into categories by format (e.g books for reading, videos for watching, interactive for hands-on coding,) most users took a topic-first approach when looking for content.
  • Ambiguous and obscure category labels like “katas” and “scenarios” made it difficult to determine the kind of content they held which negatively affected find-ability.
The following diagram represents the navigation structure we proposed to improve the find-ability and discoverability of content based on our research findings.

Defining Requirements

We defined the following list of requirements to meet as part of the navigation redesign which incorporates findings and insights from previous studies and our own research on users content seeking patterns:

  • Simplify navigation without making it harder to find content
  • Improve the clarity of labels describing topics, formats (ex: learning paths, playlist, scenarios), and actions (reconsider metaphorical labels for concrete no nonsense labels)
  • Expose topics as a top level item next to search labeled “Browse.” Depending on the agreed upon labels, search and browse should be contextually found together.
  • Consolidate varied content formats (modes of learning) under browse or as a single item instead of several separate tabs.

From a vertical side-nav to a horizontal top bar

We decided to replace the current navigation layout pattern to a horizontal top bar which emphasizes the primary learning options that drive significant value for users. The new pattern de-cluttered the interface and supported exploratory browsing while minimizing distractions.

Why a horizontal top navigation and not a vertical side nav?

A horizontal menu uses less space and works well when there are few navigation items and as a result, helps keep the interface focused on content:

  • It allows us to maximize the amount of page width available for content
  • Due to the inherent limits imposed by this pattern, we’re required to suggest fewer top level items which support multiple information seeking behaviors as a result
One of the biggest internal problems relates to how teams are incentivized to drive for usage and visibility over user-centered outcomes. 

Using a horizontal top nav with the inherent limitations it imposes (the number of links you can have), makes it difficult for teams to erect links to drive for the discovery of their feature area of focus thereby keeping them from breaking the platform’s ux integrity.

The process and its outcome

While the engineering team had concerns on whether our current implementation stack would support the new changes, the overall direction was well received by the main stakeholders; This includes: executives, the product management team, Marketing, our customer support team and even Sales:

Click-through Prototype

The desire to improve the platform’s information architecture predates myself and the team members I worked with. We learned that stakeholders had previously been opposed to any major changes to the platform.

In our case, because we had established trust and strong connections that championed user experience, with the help of a well synchronized and balanced team, we were able to push-along despite historical resistance with most of our IA recommendations making it into the final prototype and into the first phases of implementation.


Researching and designing in collaboration

We relied on the Executive team to foster cross-functional stakeholder communication at the leadership level; Our Product Design Director (James Touhey), VP (Julie Baron) and Sr. VP of Product (Adam Witwer) helped us manage stakeholder expectations from across Marketing, Editorial, and Customer Support.

They helped drive consensus when Product Marketing had hesitations over removing modality-first landing pages because they depended on those to send to customers.

All activities involved with redesigning the primary navigation was a collaborative effort between myself and another Designer (Shirley Jin.) We took turns defining research plans and designing the studies. Shirley and I shared responsibilities in executing the research as well as reporting and documenting our work for stakeholder review.

The O'Reilly learning platform's primary navigation was redesigned and restructured to focus on user needs, their goals and outcomes helping them intuitively make sense of how content is organized overall.