top of page

Bass pro Shop's Buy Box

Bass Pro Shops is a prominent American outdoor retailer known for fishing, hunting, camping, boating gear, and apparel. 

Contribution: UX Design, User Research

webimage-A5D34631-0B46-45A9-87449DA6D91722AE.png

Overview

Objective

Provide recommendations for design patterns on our Product Display Pages (PDP), with a specific emphasis on enhancing the mobile user experience. These suggestions should prioritize facilitating seamless purchase decisions for users.

Startegy

Discovery

User & Market Research

Define

Idetify Design Direction 

Ideate

Wireframes & Mockups

Prototype

Prototype & Testing

Outcome

An optimized "buy box" that minimizes cognitive effort in identifying product variations, pricing, fulfillment options, and product specifications, resulting in a 3% increase in 'add to cart'.

Buy Box = Price & Selection, Fullfilment, Specs & Product Information

Standing iphone.png

Discovery

In this phase, I empathize with users (stakeholders), aiming to understand their needs, goals, motivations, pain points, and behaviors.

[Partnered w/ UX Researcher]

Usability Test Plan

20 Interviewees (unmoderated) 

Swatches no Charts (10) and Dropdown with Charts (10), recruited from the UserTesting.com pool. Product - "Spiderwire Stealth Braid Fishing Line"

 

20 - 30-minute exploratory interviews covering the different scenarios

Areas Tested
Ease of seeing the product price
Ease of seeing the color and style options available for the product.
Clarity on information about the products, description, specifications, and organization.
Ease of seeing the product availability online or at my local store.
Ease of seeing the product's reviews and ratings from other customers.
Ease of adding to cart.

 Overview & Information (specs)
  • The first position on mobile pushes product image down; would consider leading with image

  • Text-heavy area with limited “chunking” or sectioning with containers

  • Colors are the only emphasis 

  • Combined Brand and product name may limit quick identification and reading of product name

  • Text size is all similar and without a strong visual hierarchy

Group 65.png
Price & Selection

Because of the location of the price (above the image gallery), it is not visble during the selection process. That means that the user’s selection may change or increase their price without their knowing, potentially leading to a higher price than they expected, and potential cart abandonment.​

Peers clarify prices by apply prices to swatches

Screenshot 2023-05-17 at 3.34 1.png
price.png
image 56.png
Screenshot 2023-05-17 at 3.45 1.png

Price variations are not as visible to users

Price not visible during selection

Availability and Fulfillment
  • Availability may be missed because it’s located below the Add to Cart Button

  • The language used on our fulfillment options is not simple, appealing, and straightforward, using expected terms

  • The current formatting of availability is not consistent with expected peer patterns

  • It’s not always clear what’s NOT available for in-store pickup

Screenshot 2023-05-17 at 4.11 1.png
Screenshot 2023-05-25 at 1.55 1.png

Peers simplistic and at-a glance presentation

Screenshot 2023-05-07 at 10.23 1.png

Availability  located below the Add to Cart Button

Screenshot 2023-05-25 at 12.42 1.png

How might we  better emphasise fulfilment dates?

Define

In this phase, I define the problem based on insights from the empathize phase, synthesizing research findings to understand users' needs and expectations. [Partnered w/ UX Researcher, UX Manager, Digital Experience Mgr]

Overview & Information
  • Reorganize text to be less muddled, providing more visual hierarchy and organization of content

  • Consider an Image-first

  • Consider moving product info below the image gallery

  • Consider breadcrumb display and emphasis

Price & Selection
  • Move or add price to be lower, near selection, and add to cart button

  • Clarify pricing on SKUs by applying price to swatches by group or singly

  • Support other pricing structures (like price per unit and/or monthly payments)

Availability & Fulfilment
  • Resolve fulfillment and  Add to Cart Button place

  • Show Fulfillment Mode cues by default (even if the availability check has not run yet)

  • Include expected timeframe cues when possible

  • Update language to be more user-friendly and common

  • Better emphasize BOPIS and fulfillment modes with additional messaging/content on page

User Stories
  • As a user, I can clearly understand which product variables I am selecting, are selected, or are available for me to select.

  • As a user, I can see the price and price variations of an item while selecting product options.

  • As a user, I can see the product's availability based on the fulfillment options. Shipping, Pickup, Delivery, etc.

  • As a user, I can see technical specs related to a product.

  • As a user, I can add a product to the cart from the “buy box” on all products.

Overview & Information

Product introduction & Specs

Updated beadcrumb display 

Incorporating favorite/list entry

unnamed.png
unnamed (1).png
unnamed (2).png

Neutral background on images to better emphasize product and visually differentiate gallery 

Consider moving product info below image gallery

detail.png
Price & Selection

Swatches & add-to-cart

Make swatch states more obvious (selected, disabled, etc) 

swatch 2.png
detail 5.png

Consider displaying swatches with a horizontal scroll

chart.png
unnamed (4).png

Utilize Sticky Add-to-Cart as part of selection strategy

unnamed (6).png
Availability & Fulfilment

Design to support future 1-hour BOPIS and multimode

Multimode patterns

unnamed (1).png

Better emphasize BOPIS and fulfillment modes

unnamed (12).png
unnamed (14).png

Avoid placing availability below the Add to Cart Button....or utilize sticky add-to-cart as part of the selection strategy

unnamed (9).png

Include expected timeframe cues when possible

Ideate

Understanding the users' wants, needs, and expectations, I proceed to generate potential solutions for the defined problem. I explore diverse ideas and concepts without judgment to foster creativity and innovation.

Prototype & Testing

In this phase, I create interactive models, gather feedback, and iterate on the design to refine the user experience before development.

[Partnered w/ UX Researcher, Digital Experience Mgr]

Futher User Research

Find answers to these questions - 

Which design best displays the price of the currently selected item?

Which design most clearly communicates the selections you’ve made (color, length, and weight)?

Which design most clearly communicates items that are not available?

Group 928.png
Availability.png

Which option best displays fulfillment?
Which option best allows for comparing fulfillment options?

chart test.png
Recommended Design Patterns

A user-friendly interface that displays product variables clearly for easy selection. Transparent price presentation showcases item prices and variations in real-time. Users view availability based on fulfillment options (Shipping, Pickup, Delivery). Easy access to technical specs aids informed decisions. Resulting in a 3% increase in 'add to cart'.

Which option best displays a product's attributes?

Which option best allows for comparing attributes of multiple products?

Which option makes it easy to add one of the items to your cart?

Sitespect A/B Campaign

Screenshot_20240226-185739_Bass Pro Shops.jpg
Test 1.png
2 Floating iPhone.png

other works

bottom of page