UX Designer
Role
2-3 weeks
Duration
UX Designer (myself)
Desktop Product Manager
Mobile Product Manager
Development Product Manager
Team
Context Overview
The Goal
The Business
Improve the User Experience of the Barnes & Noble Product Listing Page by increasing the visibility of signifiers that indicate product availability. This will in turn increase sales and customer satisfaction.
We will measure this success through increased traffic from Search to the Product Display Page, as well as fewer customer complaints regarding out of stock transparency.
Barnes & Noble Inc. is a Fortune 500 company with the largest amount of retail stores in the United States.
As more and more brick and mortar business are hurting in today’s digital age, Barnes & Noble attempts to shift more of their activity into their e-commerce site.
Additionally, they have installed programs such as Buy Online, Pick Up In-Store (BOPIS) that help drive in-store activity.
The Customers
CUSTOMERS WANT EFFICIENCY
Quickly purchase a product.
Effectively browse to get ideas/compare prices.
The Problem
Why Customers are frustrated
As a Barnes & Noble customer, I want to be able to browse and purchase products on barnesandnoble.com, but often do not end up purchasing and leave feeling frustrated. This is because,
I am under the impression that the book is available online, but when I go to the detailed product display ready to purchase I learn that it is out of stock.
I am not aware of all of the different purchasing options available to me.
WHY THIS PROBLEM EXISTS
The current model only shows two states for users sharing their location, “Pickup Available” or “Pickup Unavailable”
What about all of the other edge cases?
THE STRATEGY
Problems Do not exist in a vacuum
In order to successfully design a solution that adds both value to the customer experience and the business growth, my team and I felt it was important to spell out the hierarchy of all of the problems and “whys” that surround our focus.
A User’s Perspective
Pain Points
The main pain point lies within the fact that the site does eventually give all of the appropriate information to the customer, just too little too late in the process.
As a user, you want to be aware of whether a product is available before you are in the mindset to click to the display thinking “Yes! I am going to buy this”.
That is a big let down and turns customers away.
Depth Vs. Breadth
Breadth
Shifting to a breadth based approach to sharing availability information may help facilitate a more informed shopping experience, and create less margin of error for users assuming a product is available when it is not.
How Much is Too Much?
Although it was definitely important that we add more variation to the card, it was also important to consider the fact that we did not want to overwhelm customers with a cognitive overload of information and/or push the card too far down the page, both counteracting our goals.
Therefore, my team and I came up with a hierarchy of circumstances to decide which information to display.
Rethinking “Out of Stock”
NEW HIERARCHY
BUSINESS CONSIDERATIONS
Although maximizing clarity on the availability of the product was most important, the problem and solution still need to keep in mind the success of the business.
“what impact does stating ‘out of stock’ have on business?”
In order to both maximize clarity on the stock availability, while also promoting company growth, my team and I decided to rethink the approach to out of stock.
Syntax Adjustments
OOS online transitions to displaying other forms of purchase such as Marketplace, In Store, or Nook purchase.
“Backordered Online” was removed as an option for OOS – business owners want to use “Available Online” for this scenario since the user can still order the item and this copy will be more positive.
“Pre-Order Now” for products not yet on the market or that are sold out.
EXAMINING CASES
Examining Sizing
EXAMINING ICONOGRAPHY
Designing with consistency
indicator consistency
Simplifying:
Initially, the only indicators displayed were for BOPIS availability. Since the scope of options is much larger, we moved forward with a “yes"/no” display.
As we went further along in the process, I made a not of adding a circle around, to keep spacing visually consistent.
Visuals:
Additionally, we made the decision to keep the icons colored and the outer circle a more neutral tone, because during holiday season, there will be a lot more out of stock scenarios, as we don’t want to create a visually off-putting experience for the user with an inverted color scheme.
Nook:
One design decision I brought to the table was adding in the Nook icon for the Nook availability option. This is because the wording for the Nook availability says “Available Immediately After Purchase” and I think that can be confusing to users. By adding a Nook logo, it informs the user that this is a different product, as well as promotes Nook.
One concern I have with this method is that it breaks up the current binary “yes/no” pattern, and leads me to wonder if other icons should exist, or should it remain as simple as possible.
Deliverables
A Side-By-Side Comparison
Live Version on-site
Moving Forward
Next Focus
The next focus will be thinking about the next step in the purchase process: the product display page. What availability information will live there, how it will be shaped differently based on where the user is at in the process, and what that means for how it is displayed.
Design Concerns
Moving forward, I think we should have spent more time examining if this method was the best way to express clarity, and take more time deciding how the icons will display the information.
I think that clarity is still most important in this instance, and although the new implemented method definitely increases clarity, there is still room for improvement, as most people (probably) just want to know whether the product is available online or in store or not. I think this method may have a bit too much breadth, and I am interested to see what future research shows.