On the MotoSport site, the navigation across the mobile and desktop sites were full of inconsistencies in both design and function. They were generally cluttered, required deeper than necessary clicks to view product and still used tables for layout (GASP).
The mobile navigation was rather benign. It included the requisite hamburger menu, a large search bar and a prominent red stripe for the shipping offer...
Unfortunately, when using the hamburger menu, often 6 or more taps were required before the customer could actually view products.
Both desktop and mobile search suffer from search silo-ing: the entire site was not searchable with a single query. Instead, only one 'storefront' could be searched at a time.
In addition, the mobile nav was missing the critically important MMY selector which allowed customers to filter the site based on the Make, Model and Year of their ride.
Though we weren't yet in a place to change the logo, with its awkward mark and heavy use of borders, we could start by giving it a little breathing room.
Next, we reduced the color palette to only the signature reds and a gray-scale.
As a multi-device customer, I want to find the gear I need in the same way across all my devices, because I'm visiting the same site, no matter which device I use
The motorcycle icons each represent a different 'storefront'. Although the 'storefront' concept is a cause for findability issues in search, the ride icons are a part of the company's branding and are helpful for a navigation starting point. We gave them more breathing room and turned them into SVG's for clarity on all screen sizes/resolutions.
For the menus under each storefront, the primary concern was parity between the devices, even if the mobile navigation had an extra tap level for display.
The menus were made to be click-based, rather than on hover, for consistency across devices. Additionally, this eliminated the stressful hover-shake that occurs when trying to navigate within a menu and keep the mouse in-bounds on the menu.
Utility menus were also made to be click-based and consistent across devices.
Finally, we added the missing personalization tuner, "Find Parts for your Bike" to the mobile nav:
Through a series of user tests, we refined the touch target sizes for menus, spacing around elements for clarity and width of the menus. The internal CS and Merchandising teams were extremely helpful performing tests because of their familiarity with the site navigation, while their lack of experience using the mobile nav was beneficial in reducing bias.
The new site navigation was a success in several measures:
We did trade one finding tool for another:
...which was a good trade because, when compared to site averages, users of the MMY tool:
Because the goals of the nav redesign were clear, the project went pretty smoothly. Development took about 3 sprints. The biggest blocker was the learning curve associated with browser- and device-specific implementation: flexbox for the menu links on IE, offset touch targets on Android devices, etc..
