sb_20180520_desktop_SLOT_HUB_jetset_1-0.png

Shopbop Navigation

UX Lead / Shopbop / 2017

Visit shopbop.com to see it live!

 

Overview

Customer Challenge:  Help me find what I’m looking for, based on how I shop. 
Design solution: Offer thematic shopping opportunities, in addition to traditional categories.
Results: Biggest revenue-producing feature in 2017 (+1M)
 

The Design Process

  1. Generative UX Research - Conducted by UX Researcher

  2. Analytics Analysis - Collaboration with UX Researcher

  3. Stakeholder Interviews - Led by me

  4. Usability & Competitive Research - Led by me

  5. Sketching / Wireframing - Led by me

  6. Visual Design - Created by Visual Designer

  7. Usability Research - Conducted by UX Researcher with HTML prototype created by front-end developer

  8. Design Revisions - Led by me

 

Final product

Screen Shot 2018-05-10 at 11.39.50 AM.png

 

Generative UX Research

A UX Researcher conducted exploratory research to see how customers shopped and to learn more about their needs. Key takeaways:

  • Customers needed a way to shop for occasions to help guide them to the right fashion choice.

  • Some customers wanted to shop by trends.

  • Customers wanted quick ways to find Top Sellers and Editor's Picks to filter out an overwhelming amount of content.

  • Customers were hesitant to use search, fearing they would miss something that they would find by using the navigation.

Video still of a customer shopping

Video still of a customer shopping


Analytics Analysis

Several navigation items, like "Boutiques" were underperforming in the primary navigation. Others, like My Hearts, were performing well for this location. This analytics data helped inform reorganization for some items in the existing navigation. Conducted with the help of a UX Researcher.


Stakeholder Interviews

SEO, International Marketing, Merchandising, and Customer Service teams were consulted with to better understand their team's needs, as well as to gather business and customer insights.


Competitive Research

The top 10 competitors were evaluated, as well as notable examples in eCommerce.
View full report.


Usability Research

Best practices for information architecture and navigation were summarized.
View full report


Sketching

Brainstorms and sketching sessions were held with interdisciplinary teams.

5_IMG_1637 copy.JPG

Wireframing

Flows, navigation explorations, and eventually technical documents were created.

Screen Shot 2018-07-17 at 4.58.34 PM.png

Usability Research

An HTML prototype was created by front-end developer based on the UX designs. A UX Researcher conducted the usability research with existing customers. 

Sample page from the UX Research Report

Sample page from the UX Research Report


UX Revisions + Technical Specs

Revisions made based on the customer research findings. Technical documentation was then provided along with Tech reviews.
View full wireframes

TopNav_v2.13 16.png
 

Visual Design + Implementation!

Visual Designer defined final look and feel

 
n1.png
n2.png
 

nw.png