Academia Navigation Redesign

Design a new navigation that is intuitive, easy to use and helps users discover important content while also providing increased visibility to key features and product offerings.

Length

Role

Deliverables

2 Months

Lead Product Designer

Information Architecture, High-Fidelity Designs

Tools

Figma, Periscope

Problem
Problem

The Academia.edu navigation was posing some serious usability problems. The information architecture and hierarchy of content was not thought through and the design incorporated some flawed user experience practices, relying on large hover states, mega menus for small amounts of content and unclear categorization.

 

I spearheaded an extensive redesign effort to rethink our information architecture and design a new navigation experience that streamlined discoverability of content and gave more visibility to our top performing and popular features.

The Academia.edu navigation was posing some serious usability problems. The information architecture and hierarchy of content was not thought through and the design incorporated some flawed user experience practices, relying on large hover states, mega menus for small amounts of content and unclear categorization.

 

I spearheaded an extensive redesign effort to rethink our information architecture and design a new navigation experience that streamlined discoverability of content and gave more visibility to our top performing and popular features.

Skip to the Design or Results

Pain

Points

  • It was difficult for users to orient themselves.

  • Unclear information architecture and content organization.

  • New users were having trouble navigating to important features

  • Long-time users couldn't find features that were important to them

  • No priority was given towards highlighting key product offerings

Approach
  • Research navigation UX/UI best practices.

  • Audit competitors and other popular websites to gain a better understanding of navigation trends.

  • Interview users who had submitted complaints about our old navigation to understand what they were wishing our navigation would accomplish for them.

  • Experiment with various information architectures of our website content to explore various organizational approaches

  • Design a new navigation based on all of our findings.

  • A/B test the new navigation against our old navigation "control" to understand the successes and failures of the new design.

  • Adjust the design based on A/B test findings to make sure we resolve to the best possible solution.

Empty Library

What We Heard

"I want a navigation that makes it easy for me to find the tools that I use everyday like my analytics, messages and reading library."

- User

Design
 
Control - The Original Navigation
research.jpg

The old Navigation relied heavily on mega menus that housed poorly organized content. Features gated behind paywalls were scattered throughout the menus and overarching categories were ambiguous. There was no primary real estate dedicated to core products and the overall layout relied on users to explore in order to discover rather than elevating important pathways to the surface simplifying the user journey.

New Navigation Design

The new navigation was designed based on best practices that we discovered during my research process as well as trends we were seeing other companies in the tech space doing. 

The primary navigation space was divided in to three main spaces: The top navigation, The tools menu and the user profile menu. The top navigation was dedicated to promoting core products and key functionality.

Default Nav - Never Premium.jpg
Frame 1369.png
Default Nav - Never Premium - profile.jpg
Frame 1362.png

The user profile menu was dedicated to housing all content directly related to the core needs of the individual user. It housed they personalized content such as their reading history, messages and notifications as well as dedicated sections for their analytics and networking tools.

Clicking on "Tools" in the top navigation triggered a drawer that appears from the right side and enters the user in to a modal state. The tools menu houses secondary product offerings and a dedicated space to explore premium products locked behind a paywall.

Tools Menu - Courses in Tools.png
Frame 1370.png
 
Results

After some iteration and A/B tests swapping different functionality and content in to the top navigation I arrived on a winning variant. After 21 days of running the experiment the new desktop navigation design was trackin as a 10% cashflow lift and 1000+ upgrade win. After 10 days the mobile navigation was tracking as a 15% cashflow lift and 1100 upgrade win.

 

There was an almost 20% increase in marketing page hits from the new navigation, a 5% increase in search bar interaction and an increase in overall clicks. 

As was the case for many of my design projects with Academia this was not only a clear business win for the company but also a huge design improvement from a usability and experience perspective.