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 such as the dated CMS, lack of JavaScript capabilities and an un-responsive interface.
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?
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.
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 instances 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.
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
- It takes a lot of communication and patience to successfully launch a project of this size.
- Sometimes taking over certain aspects of a project a cross-functional partner doesn't understand will pay off in the end!
- Stop, collaborate, and listen.
- https://www.potterybarn.com/shop/shop-by-room/bedrooms/?cm_type=gnav
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?
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.
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.
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
- Less is more.
- Prototypes will sell your design quickly.
- Users enjoy exploring, so let them explore and see their options.
- https://www.potterybarn.com/shop/dinnerware-entertaining/all-glassware/?cm_type=gnav
PROBLEM
Promotions are becoming too prominent and creating a discourse through our hierarchy in messaging.
- As homepage entries trend downward, we need new ways to market and maximize effectiveness of promotions.
- 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.
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 an increase in drop-off rates.
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.
WIREFRAMES
After the success with Ideas Just for You, we decided to sketch up some more integrated designs.
Creating a tab that didn't touch the content on the page was the first idea that came to mind, so I sketched up several different experiences that caused the least amount of distraction.
DIGITAL MOCKUPS
After several concepts were presented, the idea to make this interaction less obtrusive was approved and I began mocking up some desktop and mobile comps.
HI-FIDELITY PROTOTYPE
After iterating on many possible scenarios, I decided to make a prototype in Proto.io that had a very simple expand button that followed users as they scrolled and popped out when clicked to reveal any promotions happening at that time.
TEST 1
After fighting for my original design, it sadly got turned down and I was asked to create a much simpler version that mimicked the functionality of Ideas Just for You.
- Test will run across the desktop site except for the cart, and checkout pages.
- 50% of total traffic will be entered in the test and split equally between both versions:
- No tab of which 25% of total traffic will see
- Featured Savings of which 25% of total traffic will see
TEST 2
Test 1 ended up dropping from a 4.9% conversion rate to a 0.9%. Due to the decrease, we re-styled the tab to be a little larger with the 'x' button much further from the expand button.
- Test will run across the desktop site except for the cart, and checkout pages.
- 100% of total traffic will be entered in the test to see if the styling change would increase interaction.
LEARNINGS
- Styling can drastically change interaction.
- Don't have conflicting UI.
- Don't fall in love with your idea.
- https://www.potterybarn.com/?cm_type=gnav
PROBLEM
Currently, the subtotal of the Shopping Cart page is not easily seen/used, especially when the user has several items in the cart. The placement is at the bottom of the page, below the cart of items.
HYPOTHESIS
If we relocate the Rich Relevance module to the bottom of the page, and move the subtotal to the river then that will drive a higher checkout rate.
The sub-total will be above the fold and cause less confusion with customers. One pitfall is less engagement with the Rich Relevance module which lead to a decline in revenue per visitor and average order value after testing.
PROTOTYPES
After removing the fluff around the interface, we designed two mockups with different scenarios for a Shopping Cart Summary that is more valuable and visible for users. Both designs will utilize a sticky feature and follow users as they scroll and review their carts.
