Case Study

Responsive Navigation Design

In November 2018, we were running out of space to add items in our navigation header bar. The problem was exacerbated by the fact that there were two different kinds of items in the navigation- some items were specific to the user, which needed to be accessible no matter where the user was in the application, and some items were context-specific and changed when the user navigated between environments. In order to separate out this functionality, we decided to create two navigation header bars: the user header and the environment header. I took on this project as the lead designer.

Problem

Mixed functionality in the navigation header was confusing to the user and messy to technically maintain. I designed a system-wide solution by separating out the functionality into two navigation headers.

Background

Overpass provides a platform for freelance call centre contractors to create profiles and get hired by small businesses. Each company has what we call their own “environment”, which is the company-specific login to access that company’s contacts and make calls. Contractors can be part of multiple environments, for example if a contractor was hired by two companies at the same time. Once in an environment, the user has a status that tracks their activity for the company. If the contractor is an administrator for an environment, they have access to the company’s settings and the company profile. Users needed a way to quickly see their current environment and access environment-specific controls, while also requiring access to user specific controls, such as their account settings and their Internet connection strength.

Style Improvements

Before separating out the functionality into two header bars, I updated the visual style of the header to match the brand redesign.

User Header

For this update, the user header would stay relatively the same: the logo, navigation items and profile picture would remain, with the addition of a new Internet connection strength indicator and the ability to switch environments via an icon.

Connection Strength Indicator

Since much of a contractor’s work on the system revolves around making VoIP calls, a strong Internet connection is required. Many times that contractors experienced calling errors were the result of a poor Internet connection. We created the connection strength indicator to give the users more insight into the quality of their Internet connection.

User Menu

The user’s status is inherently environment-specific, so we decided to move the status menu to the environment header. As a result, the dropdown menu that is accessed from clicking on the user’s profile picture only contained the My Account link and the Log off function, but is scalable so if we need to add more functionality down the road, the design does not need to change.

Environment Header

Before this update, some of our pages in the system had page titles but others did not. We wanted to improve consistency and navigability by showing page titles for all pages. We added a space for the page title on the left, and included the environment name on the right.

If a user is an admin in the environment, they will have access to the company’s settings page and the company profile page.

The status menu now stands alone and can be easily changed.

Responsive Design

When we first started building the Overpass call center software, mobile and tablet devices were not supported so we didn’t design a responsive navigation menu or responsive pages. With updates to the technology and wider functionality available on Overpass, it became clear that it was time to support responsive devices. I created the first responsive navigation menu for tablet and mobile, that collapsed all of the user header and environment header functionality into one menu. I collaborated with the UI designer to make the mobile menu visually intruiging.

I mocked up animation to demonstrate to the developers how the menu should slide in and out.

Notifying & Educating Existing Users

This update resulted in functionality moving from where users were used to, such as the status menu, to new locations. When we released the features, I wrote an update to our users explaining what changed. They would see this update when they first logged in to the updated system. Educating our users is a core tenet at Overpass, and providing this kind of timely message not only reduced user frustration, but also improved the relationship with our users.

Results

• The responsive menu improved our mobile experience and allowed users to more seamlessly navigate the system on their phones and tablets;
• The code base became more scalable as a result of separating out the features;
• When users had connectivity issues, we were able to help them more effectively by viewing their connection strength; and
• We received a lot of positive feedback from our users.