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:
I led an effort to redesign our global navigation system that aimed to:
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.
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”).
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.
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.
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.
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.
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.
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.
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.
The navigation redesign was highly successful. We achieved several key results.
“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.”
New @RelateIQ UI is fantastic! Those guys don’t stop. — vas natarajan (@vas) February 16, 2015
.@relateiq redesign is so well done.
— Coby Berman (@cobyberman) February 12, 2015
Nice @relateiq UI improvements! #CRM @salesforce — Alex Shirazi (@alexshirazi) March 17, 2015
new design makes @relateiq look even better. — james alonso (@jalonso510) February 12, 2015