Thrillist Navigation Redesign
As one of my first assignments at Thrillist, I was tasked with redesigning the global navigation for both desktop and mobile experiences. The new navigation needed to support an ever growing and evolving breadth of content, placement for advertisement, provide access to sub level navigation categories on interior pages, and maximize screen real estate for certain desktop and smaller screen sizes.
For this project, I was the Senior User Experience Designer working primarily with the Technology and Design teams to craft a new navigation experience for Thrillist users and advertisers.
Research & Audit Existing Experience
To kick off the project, I completed an audit of the current navigation experience. This helps me understand the current structure and hierarchy of the content, current functionally that may need to be ported over to the new experience, and pain points in the experience that need to be adjusted. The standard desktop navigation took up a lot of room at the top of the screen. It had two bars of links, content, search, and shopping utilities. There are also a lot of conflicting paths to partner sites, e-commerce, social, and acquisition modules.
This is a capture of the old Thrillist Navigation.
Cities Dropdown
The city dropdown is confusing and combines a lot of closely spaced text with images. While interviewing users, some reported that the images for the top four cities felt like column headers which makes it harder specific city of interest. Often they would ignore the top four city pictures and look in the list of cities.
Screen capture of the previous cities drop down.
Mobile
The mobile navigation had several major pitfalls. It provided only one level of access to content and was only available on top level page content and not articles. This greatly reduced user engagement and exploration. There weren’t active or selected states for any of the items. Tapping the cities item launched a native picker which users needed to scroll through all 44 markets to find a specific locality to view.
The image above shows Thrillist's previous mobile navigation menu.
Analytics
I also worked with our data team to understand how our current users engage with the navigation by traffic source. I learned that the navigation is not a widely used convention for our social users. They mostly recirculate through the experience through related links and modules. Organic search users are twice as likely to engage with the navigation, they are mostly looking for cities. Mobile users are even less likely to engage with the navigation. They prefer to use site search to find specific content.
Desktop Wireframes
This is a streamlined wireframe of the main navigation bar. To simplify the experience, I’ve removed the black branding bar with external links and ad bug. I’ve also removed the global social tools, since they provide little utility in navigating the site. In order to accommodate an ever changing list of content sections, I’ve added a “More Sections” menu item. I worked with tech to ensure that items could regularly rotate out of top level navigation and into the drawer on a seasonal or priority based schedule.
Cities Drop Down
I reorganized the city dropdown to make the content feel a little less overwhelming to our users. Top cities are grouped in the left hand corner of the menu and called out with images. A complete city list is just to the right of the top city call out.
Cities Sub Menu
When a user visits a city page, a sub menu will help them navigation themes within the section.
Mobile Wireframes
For the mobile experience, I decided to openly display the two levels of content to remove an additional tap option between first and second level navigation items. Top level navigation items on on the left side of the mobile screen and represented by icons. Tapping an icon shows the secondary level menu to the right. I’ve also incorporated a search field in the new experience to address our initial findings that mobile users are most likely to search our site.
Tapping on a city expands the navigation item to show all of it's secondary navigation items.
The "sections" of the site don't have sub navigation items, so tapping on them takes the user directly to the landing page.
Design
The main navigation visual design was able to save about 40 pixels of space on the desktop experience. The example below, shows our solution for ad placement within the main navigation bar.
During visual design, we reorganized the menu to include the drop downs in the same area of the navigation.
We also have a scrolled state for the navigation bar, that allows us to maximize space for our users to view all the great content Thrillist has to offer.
This design shows our final design for the very content heavy city navigation dropdown. We’ve kept our top four cities called out in the left hand side of the navigation dropdown. Since users read from left to right, this increases the chances our users will find the city they are interested in finding. This also breaks up the visual field and allows users to scan the list of additional cities to the right.
The individual city navigation sticks to the main navigation and allows users to browse city sub-sections.
Each Thrillist section has a brand color. This shows the active states for the nav when users click into an article in the Technology section of Thrillist.
Mobile Designs
The two screens above show our final mobile navigation designs. During design and development, we decided to add a fun transition to the menu by rolling it out in levels on tap. Otherwise, we remained pretty close to the original wireframes for the design.
The redesigned navigation rolled out early 2016. You can check it out live on Thrillist.com!