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.
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.
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
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.
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.
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.