POTTERY BARN
Storm Sampson
DESIGNER
Made with

POTTERY BARN

Repositioning the luxury furniture brand to have an equally
luxurious e-commerce experience.

Pottery Barn undergoes a digital transformation as the retail market rapidly evolves.

  • Working cross functionally with Analytics, Marketing, and Design we are developing new functionality across our wide range of
    products and categories.
  • As a Designer on the Web team, I develop and test new designs to raise conversion and create a more seamless customer journey.
  • Shop by Room is one of the projects I own and feel very proud of despite technical limitations within the brand.

Designing an intuitive Shop By Room experience

POTTERY BARN

PROBLEM

  • Knowing the competitive landscape and our technical limitations, how can we design an equally inspiring shopping experience?
  • Users are dropping off after their first click into the category page, why is that?
  • How are users getting to this experience?
  • How can we filter categories while keeping user's in the same experience?

USER FLOW 1

The original user of Shop By Room dropped off after being lead to a category page with small thumbnails.

  • How can we get them to the products quicker?
  • Is it confusing to click Shop By Room and then see 9 different room categories?
  • Living Room, Bedroom, and Dining room were barely gaining any traction and they are at the top, how can we design an equally distributed landing experience?

POTTERY BARN
POTTERY BARN

SKETCHES

Sketching out new user flows and approaching the new landing experience as a unified page allowed me to design a system and navigation that represented the brand and our new vision.

  • Sketches allowed me to see various different layouts that could work for this new experience.
  • At first I sketched out several different filtering systems that soon felt overcomplicated.
  • This new ratio for desktop is easily translated to mobile with a two column masonry.

USER FLOW 2

The new User of Shop By Room will be influenced by several external variables including shop by style linking directly to specific room categories.

  • Eliminate the category page completely and design a new sub-navigation that will live above each rooms thumbnail masonry page.
  • Start driving to this experience in several new ways to increase
    traction and interest.
  • Optimize the new design to be mobile friendly and reflect the desktop experience.
  • Showcase newness at the top of each category while going back in time as you scroll down.
POTTERY BARN
POTTERY BARN

DESKTOP
Initially I wanted this new sub-navigation to have a sticky micro-interaction so users are able to jump from category if need be while scrolling.

  • Now when users click on Shop By Room, they are lead to the new landing experience.

  • Users are able to use the sub-navigation to toggle between different categories of rooms and see much larger room previews in this new format.

  • By creating this new sub-navigation, we have been able to apply it in several instance throughout the website to substitute for the lack of a filtering algorithm.

  • We changed the actual room pages to have a 4-column grid to showcase more products at the top.
POTTERY BARN

MOBILE
Creating an experience that was mobile friendly was imperative as 50% of Pottery Barn's traffic is on mobile devices

  • How can we transfer the desktop design to mobile devices as seamlessly as possible?

  • A horizontal scrolling navigation still allows users to view the room thumbnails and quickly go to another category.

  • I was inspired by the horizontal category scroll used on Medium while creating the new navigation.

LEARNINGS

200+
Room Crops
1
Less Click
2.3%
More Conversion

Designing a Responsive Visual Navigation

Old Desktop Experience
Old Desktop Experience

PROBLEM

Potterybarn unfortunately lacks the technology to incorporate a filtering system, so how do we allow users to find products quickly?

  • Understanding the limitations of the current CMS, how can one quickly navigate heavily loaded shop-paths?
  • Users drop off after getting lost in shop-paths.
  • No quick and easy way to navigate massive groups of similar products.

USER FLOW 1

The original user of Potterybarn sifted through products manually and got lost in the endless choices in the mega-menu.

  • How can we get them to the products quicker?
  • How can we design a simple User Flow without a filtering algorithm?
  • How can we seamlessly transfer these designs to mobile?
POTTERY BARN
POTTERY BARN

WIREFRAMES

  • This let me gauge the perfect aspect ratio for desktop and mobile.
  • On Mobile, there would be an overlap area where Users scroll to view more categories.
  • Low-fidelity prototypes allowed us to test and find the perfect microinteraction for a hover state on desktop.

USER FLOW 2

The new Pottery Barn User is more engaged with our website as navigating through hefty shop-paths is made easier with Visual Navigation.

  • Putting large general images above a shop path allows Users to navigate through various categories of the products.
  • Engagement with each shop-path that received a Visual Navigation skyrocketed so we are implementing it across a variety of shop-paths.
  • After the success of the first iteration, I designed a hover state that highlighted the desired category. 
POTTERY BARN
New Desktop Experience
New Desktop Experience

DESKTOP

Bringing the Visual Navigation to the top of each shop-path was a bold yet successful decision. 

  • Now Users can quickly navigate to their desired shop segment without putting too much thought into it.

  • The ease of switching between each category has increased the ability to discover more products and kept Users interacting with the shop-path.

  • The results were so positive we decided to launch a visual navigation on our most trafficked shop-paths.

  • Including a hover state has created even more interaction with this new navigation method. 
POTTERY BARN

MOBILE

The mobile Visual Navigation is currently going through some testing to see if it will be feasible.

  • Users have the option to scroll through the various categories within a shop-path.

  • This feature would be even more valuable for mobile as Users only have the option to view two products in a row at a time on desktop.

  • Horizontally scroll through categories that fall off the screen.

LEARNINGS

1
Small Microinteraction
1k+
Available Products
6
Iterations
4.6%
More Conversion

Featured Savings

POTTERY BARN

PROBLEM

Promotions are becoming too prominent and creating a discourse through our hierarchy in messaging.

  • The visual messaging hierarchy is overwhelming and pushy.
  • Users are missing out on key promotions that are currently available.
  • There isn't enough curated content during the shopping experience that directly benefits the user.
  • There isn't enough control during the shopping experience.
POTTERY BARN

POP-UPS ARE OBTRUSIVE

While shopping, Users prefer to find the best deal without any forceful interruptions.

Competitor e-commerce experiences try to create an overall minimal shopping experience by implementing small interactions along the journey to highlight important promotions. Small disruptions during the shopping experience tend to lead to increasing drop-off rates.

POTTERY BARN

IDEAS JUST FOR YOU 

Ideas Just for You was the first iteration at compiling our content into a more visually pleasing manor allowing users to click in and out of different site experiences.

Without any stylistic approach, we created a tab that stuck to the bottom of the browser window. As Users scrolled, the tab remained and allowed them to click in and get curated links depending on their shopping habits. 

POTTERY BARN

This is your heading

You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.

Dear Storm Sampson,

Best,