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.


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.

Lead Designer
1 Developer
1 Lead Designer
Nov 2018 - Feb 2019


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

The original header is displayed, which has a teal Overpass logo (just the icon, doesn't include the word "Overpass", three navigation tabs: Campaigns, Workforce and Contacts, and the user profile picture. The background colour of the bar is a very light grey.
Underneath, the updated header is displayed. The Overpass logo now includes the word "Overpass" and is in a vibrant blue. Each navigation tab now has a corresponding icon. There is now a new tab for the Marketplace. Next to the user profile picture, it displays the Company Name and the activity status. The background of the header is now white, and the active state is designated by a blue bar and a blue icon (non-active tabs have a grey icon).

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.

The user header has an icon button that allows the user to switch the active company.

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.

The connection strength can vary across these states: Strong, Ok, Weak, Disconnected, and No Calling. Each has a visual icon to represent the state.

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.

The original menu contained the user's status: Active Statuses include Ready, Not Ready, Do Not Disturb. Inactive Statuses include On Break, Off System Work, Training. There were also menu items for Company Settings, My Settings and Log off. The updated menu removes the status selection and only displays two menu items: My Account and Log off.

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.

The dropdown of the status menu now only shows: Ready, On Break, Off System Work and Training.

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.

A screenshot of the Intercom message that reads: 
Feature Release: Header Bar Changes. Your online status is now in its own menu. (screenshot of status menu). If you have access to more than one environment, it's now even easier to switch between them. (screenshot of how to switch between environments). The header is now fully responsive on tablet and mobile. (screenshot of mobile header). 
We've also fixed some bugs and made the system more stable. 
If you have any questions or feedback, feel free to reach out! Reply to this message or send us an email at
Signed, The Overpass Team


  • 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.
Sample responses from the Intercom message. One user responded, "Love it!!!!". Another user responded, "great I had asked about that in the past. Thanks for making it so easy to get our work done."