Navigation By Design

Aaron Shapland

Conversions. Funnels. Flow. There are multitudes of marketing terms and buzzwords that fuel the notion of user experience. Although data can determine the success of a design, the path to achieving this success can often be a difficult journey. Any designer worth his or her weight knows that intuitive design is not easy.

Going hand in hand with intuition is the navigation of a user experience. Navigation is often viewed as a utility and, as such, commonly repeats itself across websites in the same old form and function. I must admit – this is not always a bad thing, as something is to be said for consistency and standards. However, the reliance on navigation standards has hindered innovation in the area.

As a case study, let’s walk through our recent approach to the new navigation designed and released for DR-HO’S.

A Visual Approach

In this scenario, we started with a significant amount of content. There were hundreds of products, dozens of categories, and a resource centre bursting with popular articles. Since we clearly could not list everything in the navigation, even one that is multi-tiered, we decided to prioritize by showcasing the most popular products and categories in the most visual manner we could.

Above: The new DR-HO’S desktop menu (expanded).

Focal Points

We used a strong amount of white space to balance the menu area, placing focus on the CTAs we wanted users to interact with. We certainly could have fit more products by rearranging the menu layout or decreasing thumbnail sizing, but instead we decided to limit our scope to the necessities. By showcasing only the 6 most popular product lines, we avoided users being overwhelmed with content. Similarly, within the “Living Pain Free” tab, we decided to utilize only half of the menu space to list ailments. The other half was dedicated to friendly, natural, human imagery.


Aside from simply limiting content, another method to achieve maximum content with minimal space is to leverage interactivity. By presenting secondary information or content via user action, space can be kept clean and focal points can be maintained. In this case, we wanted product usage photos to replace the product thumbnail photos on hover. This added visual punch would help to both capture informed shoppers and entice newcomers.

Prioritizing Menus

One assumption that should always be challenged is that all links should reside in a “main menu.” Here, we decided that was simply not called for. Our primary navigation was dedicated to shopping (the most-frequented pages on the site), whereas a secondary menu was utilized for links such as Account, Insurance Coverage, Log In, and more.


For websites with a relatively large amount of content, or for nearly all eCommerce websites, a proper search function should be included. It should be noticeable, easy to use, and offer an alternate navigation path for users who are looking for something specific.

Summing It Up

Altogether, the navigation was designed to be easy. Easy for all ages, easy for all ailment-sufferers, and easy for all levels of technical competency. Our approach to the navigation for DR-HO’S does not spell a formula for every website – not even for every eCommerce website.

The point we are trying to emphasize is that every website should have its own navigation tailored to its own content, users and end goals. Be mindful in letting traditional menus hinder the performance or innovation of a user experience, and never do anything because, well, “that’s the way it’s always done.”