Navigation

Easy‐to‐find products are easy‐to‐sell products. With the new nested category navigation, Travel Advisors will get an instant overview of each subcategory with zero delay.


In this page
April 8th, 2020

A New Way to Guide Users

The nested category layout allows us to show products organized by category and sub-category on all web pages. This will provide an intuitive and attractive layout that our travel advisors will appreciate. It even works on mobile, where users can tap through menus to drill down to the lower-level products and pages they’re looking for. More importantly, travel advisors can instantly access critical data in Classic Assist.

  • Improve product discoverability.
  • Tech tools are instantly available.
  • Quick access to relevant data tables.
  • Personalized attention for Travel Advisors.
  • Flexibility of promoting products.

Objectives

  • Easy-to-find Products
  • Travel Advisor Personalization
  • Classic Assist Accessibility

Easy-to-find Products

Because of the a large number of products on our website, it has become an information hierarchy puzzle. We have set out to put some order in the virtual storefront of Classic Vacations.

Travel Advisor Personalization

We believe the key to better serve our Travel Advisors is to balance our tech tools with a personalized service approach. With the latest high-tech tools, resources, and platform, we can provide a more personalized, attentive service.

Classic Assist Accessibility

We are in the process of improving Classic Assist by introducing a better way to display data. This is will improve the user experience for Travel Advisors. The new navigation will provide instant access to any data on Classic Assist.

Features

Nested Category Navigation

We have embarked to solve the problem of information overload with the nested category navigation. The great part of this nested category navigation will be the rapid reaction of the dropdown menu. It’s a flawless slide out interaction that will assist Travel Advisors get a glimpse of the vast number of product categories Classic Vacations has to offer.

Hamburger Menu

The hamburger menu compact actionable button, will be  placed on the top left of the website.  It will behave as a facade to accommodate a lengthy list of contents particularly when the user is signed in (Classic Assist). This new design pattern will allow us to steer essential elements on to the single row navigation.

Single Row Navigation

This is the navigation on the main screen which will be visible at all times. The will contain essential elements such Book a Trip, Vacation Rentals, and Classic Assist. In addition, Travel Advisors will be able to personalize the single row navigation. This will deliver on the ‘personalized service approach’.

Search as Part of the Navigation

We believe that our Travel Advisors look at search as navigation. We want the Search box to be prominent at the top of the desktop and mobile viewport. Even with Classic Vacation’s massive catalog of hotels, we don't expect Travel Advisors to navigate through menus to find what they need. Most of the time, Travel Advisors just type in the hotel name and go directly to book it

Prototypes

Guest

This is how the nested category navigation will display when the user is a guest – NOT SIGNED IN. The single row navigation will show ONE MENU LINK only – Booking Wizard.

Guest Version

Signed In

Retains the design of the guest version with additional enhancements. In the nested category navigation, additional menu links are displayed under the title of Classic Assist. Also, the single row navigation displays the Classic Assist menu link.

Signed In Version

Single Row Navigation Mobile View

In the future, we are considering adding more menu links in the single row navigation. This prototype when viewed in the mobile viewports demonstrates how we treated the single row navigation in the mobile viewport,

Single Row Navigation Mobile View

Annotations & Wireframe

So that we stay consistent with the terminology of the design:

Single Row NavigationNested Category NavigationSingle Row Nav Scroll Bar

User Flow

Presentation of the user flow from the NCN (Nested Category Navigation).

Navigation User Flow

Github

HTML, CSS and Javascript files:
Nested Category Navigation