Tim Swan

Work —

Global Navigation


As our company grows, it's become increasingly important for the Marketing and Sales teams to work together and help each other where possible. Part of this ongoing collaboration for us was to surface a sales number for prospects in our navigation for easy discoverability.

I took an opportunity to not only address the business goals, but to visually refine our current navigation and bring it into the device-agnostic web of today.

First thing's first

The primary objective was to add a sales number. This wasn't as easy as it sounded as the problem was the lack of space in the current navigation for a phone number, as well as multiple phone numbers or links as our company grew.

I worked with the Director of Product Marketing and the CMO to prioritize which primary links had the brightest future in our website navigation, and we were able to shuffle things around to consolidate ‘Sales’, ‘Support’ and a phone number under the umbrella of ‘Contact Us’.

Having one menu item that could house multiple options could be done in many ways. I experimented with a simple dropdown menu to various slider and drawer approaches that didn't quite feel right. In the end, we landed on a full screen overlay to house our secondary options which could scale in any number of ways as there was freedom to not only add many more numbers and links but completely change layouts if necessary.

Responsive and refined

I wanted to address some inconsistencies and make some refinements to our navigation, and this seemed like a great time to do it as it wouldn't increase the scope of the project too much but would make a difference to our holistic website experience.

In the previous navigation, the logo moved around. In the overlay solution presented above, the logo remained consistent. I wanted to keep that consistency throughout the entire navigation. I altered the baseline of the navigation, keeping the logo, primary links and menu icon visually aligned. This resulted in a consistent logo size regardless of the browser width or device, and meant that even the “in-between” states of browser sizes when space was of the essence, I was able to keep the logo constant but switch it to our logo mark without the words.

Historically, our website wasn't responsive at all but it's gradually been adopted across our site to be standard practice. Because of this gradual adoption, the navigation still hadn't quite caught up — it entered a mobile state too early and only really employed “mobile” and “desktop” versions. Utilizing the space we'd saved by consolidating links, refining the logo sizes and reducing to a mark without words, I had more room to cater for different device sizes other than mobile and desktop only.

Rolling out the navigation

What we also lacked with our navigation were variations of it, to be used in scenarios when a solid dark bar wasn't ideal. I designed different instances of our navigation to suit various uses, such as transparent over a beautiful photograph or a stripped back navigation for isolated landing pages and campaigns.

When our team was small, most of the designers in our team would code their own designs. This worked fine with a small team, but as we've grown it has became unmanageable from a code / consistency perspective. I worked with our developer to turn our navigation into a module by isolating the code, which allows us to roll changes out on a global level if necessary and gives us a website navigation that is always consistent.