Project: Homepage Navigation

Platform: Desktop and Mobile Web

The Challenge: The website’s homepage and navigation is being revamped, which opened up the opportunity to better leverage some courtesy navigation to the site. We wanted to give the user quick access to their account information and order tracking, as well as introducing the loyalty program is they are not currently a member. We also wanted to elevate the bag peek experience and intro different states of the bag.

Both the account panel and bag peek were designed with mobile in mind, so that we can keep the same experience on both mobile and desktop. Due to a quick turnaround, our UI designer was able to translate the desktop versions into mobile with ease.

Role: UX Designer

1. My Account

The my account peek is a rollover on the desktop experience. One of the biggest goals as a company is to increase loyalty acquisition, which is highlighted in the new navigation. Once the user is signed up they have quick access to their points and rewards. This is also the place where a user may manage their rewards credit card as well as quickly track and order.

2. Bag Peek

For the bag peek we wanted to elevate the current functionality. To follow best practices we left the subtotal and continue to bag button at the top of the page. Also new states have been added such an empty bag state as well as a returning user with items in their cart will get a quick reminder of their cart.

hp.png

3. Header

On initial explorations of reworking the header I wanted to create a hierarchy of information for the user to easily digest. A big call out we’ve had from customers is the confusion of logging in and accidentally logging out. My thoughts were to bring in some iconography to the navigation to give users clear indication on what they are tapping or hovering on.

My other suggestion was to clean up the sub navigation. Currently we use three levels of navigation that are hover sensitive and not accessibility friendly. We were able to work with merchants to clean up and combine some categories that weren’t used as much to condense the content.