Image
Top
Navigation

RelateIQ Navigation Redesign

A simpler and more focused global navigation designed to make RelateIQ even more intuitive to use.

Problem

RelateIQ’s global navigation was originally designed to fit a broad range of use cases and personas. The navigation frequently caused user confusion and became a poor solution as we began to focus the product on a much more specific target audience (small business sales teams). Problems included:

  • The navigation, originally a left-hand sidebar, provided equal hierarchy to major parts of the application, even though the user’s attention only needed to be on a few key areas.
  • Quantitative and qualitative feedback revealed that the navigation was being used inefficiently and aggravated existing user confusion over primary sections of the product.
  • The left-hand sidebar took up considerable screen real estate, dedicating almost a quarter of the screen toward navigation at the cost of space for the main content area.

Solution

I led an effort to redesign our global navigation system that aimed to:

  • Put a focus on the top area that users need to access in the product: their Lists of deals, opportunities, leads, etc.
  • Reduce prominence of secondary pages and actions, but still provide access to those that are necessary
  • Remove actions and other links that were rarely used, while ensuring that those actions were removed thoughtfully and surfaced elsewhere as needed
  • Reduce overall size and prominence of the navigation bar in order to put more focus on the main content.
  • Provide a scalable solution that is optimized for the majority of our users but still addresses edge case uses.

Team

  • Interaction Designer/Information Architect (me)
  • Product Manager
  • Visual Designer
  • Front-End Developer x2

Process

Evaluated the Data and User Feedback

I worked with our Product Manager to gather usage statistics on how the navigation bar was being used. This data revealed that only a handful of sections in the product were used on a regular basis, and many prominent sections received less than 5% of all clicks on the navigation bar.

Qualitative user feedback gathered over the past year revealed significant confusion around the purpose of prominent sections of the navigation (“lists” vs. “contacts” and “accounts”), which resulted in needing to invest in training users as well as Sales intervention to help guide users toward where they should focus their attention.

Architected a Simpler Experience

I evaluated the existing navigation architecture and identified opportunities where sections could be combined (e.g. “Settings” and “Organization Settings”), removed (e.g. “Starred” and “Recently Accessed” items), and arranged differently to clarify their hierarchy within the system (e.g. “Contacts” and “Accounts”).

Brainstormed and Explored Approaches

I began to explore a variety of ways in which we could rethink the design of the global navigation that would help us achieve our goals and simplify the experience. I researched navigation approaches used by competitors and other complex web products, and also explored more innovative ways of approaching the navigation. Throughout this exploration, it became clear that a top navigation bar would be the most effective approach for our product.

What led to using a top navigation?

A top navigation bar provided us the ability to surface the a few key navigation items prominently and reduce the amount of space needed to display the global navigation. The structure also allowed us to use easily accessible drop-down menus that provide access to secondary views and pages. RelateIQ’s product hierarchy is relatively flat, with only a few key pages that serve as the core of the product. The top navigation bar allowed us to put primary focus on these pages while reducing prominence of secondary pages and actions.

What are the downsides of this approach?

The top navigation bar is not going to be very scalable if the product grows to include a lot of new features that need to be displayed prominently. If this type of growth occurs, we could use a modified drop-down menu system to provide access to new features, though the downside of a multi-level menu system is that it would require 2-3 clicks to access pages instead of one click on an item at the parent level. We acknowledged this trade-off, choosing to optimize for the known primary features that the product will have in the next year.

What approaches were eliminated?
Continuing to use a left or right-hand side navigation bar in any form would not be an effective solution. The navigation didn’t need to support a deep information structure that would benefit from a lot of vertical space. Using a side navigation for only a few key navigation items would be difficult to justify as it wouldn’t use space effectively in the product.

I also explored systems that are more common on mobile applications and that would be a radical departure from the existing system: radial menus, menus that expand/collapse from the screen on click, and various types of icon-only toolbars. These were eliminated after prioritizing the need to make the navigation immediately easy to use and “familiar”, as well as understanding that the navigation had to be ever-present in order for users to quickly navigate between top pages.

I prototyped a wide range of possible design solutions that could represent the new navigation architecture. During this process, I worked with other designers and our Product Manager to evaluate the various approaches against our goals, which led to additional iterations.

Created Customization Experience

Analytics data revealed that the grand majority of users have one to three “Lists” in RelateIQ to track various parts of their sales workflow (e.g. Opportunities, Leads, Customers). This data made it clear we should optimize the navigation to surface up to three Lists. However, other users use more than three Lists, and we needed to provide a mechanism for them to access all of their information.

I designed the navigation so that we surfaced the user’s three most frequently accessed Lists, and put any additional Lists in a drop-down menu. However, we knew that we couldn’t always predict which Lists were most important for each user. So, I designed a customization system that allowed users to define which Lists were surfaced and which would be accessible behind the menu.

This system successfully allowed users to optimize their experience so they could access their top Lists most efficiently, and allowed us to optimize the navigation for the majority of users while still accommodating the needs of all of our users.

Refined and Executed Design

Feedback: Throughout this process I received frequent feedback from our Engineering team, Product Management, and even our Sales and Customer Success teams as we worked to validate that our proposed approach would be effective. This also helped to gain buy-in from the entire team as everyone had an opportunity to provide feedback.

Visual Design: I worked closely with a Visual Designer to polish the navigation’s visual treatment and to align it with our brand. We iterated on how to best draw attention to pages that were selected vs. not selected, and how to use the space as effectively as possible.

Why use links for some pages and icons for others?

Some pages cannot be recognized through an icon alone, such as the specific types of lists a user has to manage their sales workflow (e.g Leads or Opportunities). These pages benefited from text labels to optimize for clarity. Other pages or actions can easily be recognized through icons such as notifications, settings, and help. These sections are also secondary aspects of the product, and were designed to be made less prominent compared to the top sections of the product. We grouped together all of the icons on the right side of the navigation bar to visually indicate that they were to be seen as utilities as opposed to primary sections of the product.

Interaction Specification for Development: I created an Interaction Design Specification that was used to document the micro-interactions within the navigation such as hover states and the expand/collapse behavior of Search. This document, along with a red-lined visual specification our Visual Designer created, helped the development team reference the specifics of the design during implementation.

Development Oversight: I worked with the Development team to answer questions and make tweaks as needed during implementation. I was also highly engaged during the testing process to ensure that the new navigation bar functioned as expected.

Final Design

Results

The navigation redesign was highly successful. We achieved several key results.

Data
  • Effectively focused users on their workflow: 89% of interactions with lists occurred from lists that were surfaced in the users’ navigation, showing surfacing that information helped users focus on their workflow without getting distracted by secondary parts of the product.
  • Increased user retention: Within the first month of use, we saw a 38% increase in retention from new users, showing the redesign increased interest and engagement with the product
User Quotes

“The redesign of RIQ that was pushed up today is great. Things feel so much calmer.”

“Please pass on my thanks to the design team; the new UI is a fantastic improvement to an already great interface, and one of the main reasons I’m using RelateIQ.”