ANDY DUNMIRE
  • Welcome
  • Portfolio
    • Debit Card Servicing
    • Hold Protection
    • Conference App
    • Invoicing Simplified
    • Design Facilitation
    • Homepage Redesign
    • Stanford Engineering
    • Hotel Internet
    • All Case Studies
  • Logos & Branding
  • Contact

Navigation Redesign

Optimize Wayfinding & Engagement

Background

This travel community launched in 2009 as a way to connect with exclusive loyalty program members and share their travel experiences, photos, suggestions, and questions. Growth intensified in 2012 with the introduction of a proprietary Hotel Review system. However, the influx of new users did not translate into as much engagement as anticipated within the broader community. After monitoring data and talking with users, we decided to finally tackle the overlooked navigational issues.

Goals

  • Increase engagement through new contributions and responses in existing forums
  • Increase ability to switch between specific sections
  • Decrease height of website header from 215px down to 140px
  • Increase legibility by switching to fixed-width layout from a fluid template

Original State

The initial navigation looked great, but was disproportionately tall and caused unnecessary scrolling with every page view. While the primary navigation linked to filtered views of site-wide content, each by specific types of content.
Picture

Exploration

User Personas

Bernard, Margaret and Jake are very different personalities, but they all love travel and desire intuitive and easy to use experiences.
Picture

Mapping Sections and Content

I started by drawing our current navigation with the goal of improving my ability to find my way between specific sections. It was immediately clear the majority of our navigation linked to specific types of content, not sections or topics.

So I mapped out all of the existing discussion areas, groups and blogs that users would navigate between. But with limited space, I needed to determine which links to include.
Picture

Initial Concept

In this first concept, I focused on eliminating unnecessary links and nestled all of the site's various sections into a tidy "Directory" link and modal. The idea was to minimize customization against the core platform while shuffling a few other links around.
Picture

Concept Sketches

We figured the submenu could take several formats from a show/hide list, to a long menu with columns or even tabs that reveal different sets of columns. All of which seemed reasonable, but we were reluctant of that level of customization.
Picture
Picture

User Research

With a screenshot of the homepage and a colored wireframe from Adobe Illustrator, we put this concept in front of 26 users to gauge their reaction. We asked them to rate the importance of specific elements, how easily this could help them switch sections, and their overall reaction.
Picture

Link Prioritization

As revealing as these results appear, we knew from previous research that users explicitly wanted to "find specific content" and "navigate between sections". So while bookmarks are seldom used and the last priority of users, in contrast, the search bar shouldn't be the most important navigational element. So we knew there was more to the story and our work was not done.
Picture

Room For Improvement

With a generally positive reaction to the new navigation, we were clearly headed in the right direction. But we knew that we wanted to push further to make it easier to "find specific content". In looking back at our concept, users still had to navigate a dropdown menu to switch between our main forum areas where the vast majority of activity occurs - we needed to totally reshuffle our navigation.
Picture

Back to the Drawing Board

Refined Navigation

We took a hard look at all of the navigational links and began eliminating most of the generic system links. We replaced them with the four main forums and a new "Community" link to encapsulate much of the others.
Picture

Fixed-Width Instead of Fluid-Width

On large monitors, our previous navigation would appear disjointed because they'd appear on opposite sides of the screen. Going forward we would restrict the width to help users easily scan the page from left to right.
Picture

Wireframes of New Navigation

Armed with a core framework and a new list of prioritized links, new wireframes took shape. And this time we decided to use a dropdown menu to reveal the categories for each specific forum. For the first time a user could easily and explicitly locate "Family Vacation" or "Redemption" or "Packing" information from the main navigation.
Picture
Picture

Final Execution

With its launch, we saw immediate improvements to activity and engagement data across both forums and Hotel Reviews.
Picture
Picture

Hi, I'm Andy!

I'm an award-winning designer in Silicon Valley.
COPYRIGHT © 2011 — 2021. ALL RIGHTS RESERVED..
  • Welcome
  • Portfolio
    • Debit Card Servicing
    • Hold Protection
    • Conference App
    • Invoicing Simplified
    • Design Facilitation
    • Homepage Redesign
    • Stanford Engineering
    • Hotel Internet
    • All Case Studies
  • Logos & Branding
  • Contact