JACKTHREADS NAV REDESIGN

This project came before we launched JackThreads' 2.0. The goal of the project was to create a consistent top-level navigation across all Web platforms (Mobile Web, Tablet, and Desktop). We wanted the user to have a better experience browsing through the site and finding the products they are looking for faster and easier. This project was led by JackThreads' Director of User Experience and carried out by me. I was solely responsible for the visual language and responsive behavior of the project. 

We started with mobile web first. We knew from the beginning that we wanted to do a hamburger menu, and all of the nav items would hide under it. We wanted to have a you-are-here state, where the page the user is on would appear in orange. This way, the user knows exactly where they are on the site. The first time, we introduced black as a key color for the site. We agreed that the contrast between black and orange provided a sophistication and fun aesthetic feel to the site. We borrowed the visual elements we used from Mobile Web to Tablet. We wanted the two-column width of the nav to take up only 40% of the page on Tablet, because we wanted the user to still see some of the content hiding in the overlay when nav is open. 

On Desktop, we decided to go with a four-column-grid design on the nav dropdown. We used imagery to emphasize the main events that JackThreads' Visual Merchandise team wanted to promote each day. We debated how many breakpoints we should have for the nav on Desktop. In the end, we went with two breakpoints: one at 1235px and another at 1580px. 

You can check out my design now on www.jackthreads.com