Company Overview
BJ's Wholesale Club recently underwent a massive change from having just a brick‑and‑mortar presence, to becoming a full service online shopping experience. The goal of this project was to improve the user experience for our customers across the platform.
My Role
UX Researcher, UX Designer
I was responsible for creating the Sketch mockups to hand off to the development team. At multiple stages throughout the process I would stop and meet with other stakeholders in the project the review progress and suggestions.
Platforms
Web/Mobile Ecommerce Site
Tools
Sketch, Invision, Dreamweaver, Github, Trello, Jira, Bitbucket
Collaborators
UX Manager, Product Manager, Back-end Developers
Work In Progress
Below is a brief overview summary of this project. As of October 30, 2020 this case study is currently in draft mode and being rewritten. Screenshots have been included with captions to provide context. I would be happy to discuss the designs present as well as the not yet shown mockups from the rest of the shopping cart path.
Context and Challenge
Problem Statement
The goal of this project was to redesign the Shopping Cart Path for BJ's online sales. At the time BJ's was undergoing an update to meet ADA compliance. While I do not have copies of the original designs, my designs were updated for ADA as well as to address some user experience issues. This new format would need to be responsive to work well on both mobile and desktop.
Process
Project Brief
In order to comply with the Americans with Disabilities Act we needed to increase our color contrast between fonts and their backgrounds, increase button and form fields to at least 44px tall, and improve text and button order for screen readers. At this point we had begun working on our design style guide as well so we started to clean up the font choices, sizes, and colors in the redesign. This gave us a chance to improve hierarchy and functionality.
Unfortunately, I do not have access to the original designs before the revisions, but I felt reviewing the user experience of the shopping path was worth exploring the case study.
Shopping Cart
A customer can add or remove items to/from their shopping cart before confirming their purchase. Key features in this part of the UX process were UI elements like radio button counters to adjust quantities of items, product data sets, and multiple text buttons for simplicity and clarity.
A
ny purchase of a new BJ's Membership Card gets top billing as all orders will need to be associated with an account in order to check out. The primary household member also has the option of adding supplemental members.
Shopping Cart 1
T
ires at a big ticket item at Bj's Wholesale Club. All tires come with a free installation whose date and time can be selected at checkout.
Shopping Cart 2
S
hoppers can select multiple different delivery methods to receive their order. New to BJ's repertoire, Buy Online, Pick Up In-Club had become a big hit as well as Same Day Delivery, and the ability to pick up purchases at multiple stores.
Shopping Cart 3
C
ustomers can add special instructions to communicate with their Instacart shopper. BJ's partnered with Instacart to accomplish their Same Day Delivery option.
Shopping Cart 4
Shopping Cart 5
A
the end of customer's selected purchases we also present them with a list of the items that they have saved for later as a may to entice them to buy more. The also have the option to move the items to a wish list from here.
Shopping Cart 6
F
inally, every purchase ends with the order total and asks the user to confirm before checking out. We also make it clear which payment method they are using; giving them the option to use the card we have onb file or a new card or PayPal account.
Shopping Cart 7
Order Confirmation
The order confirmation screen is the view the user sees after they've selected to check out with their cart, and after the payment method has been applied. More images will be added soon.
Order Confirmation 1
N
ow that the customer has completed their purchase, we offer them the option to keep shopping, or to directly print out their receipt.
Order Summary
A customer can print an order summary from the confirmation page, but a copy is also emailed to them. An order summary is filled with vital information such as payment method, delivery address, pick up locations, and item summary. This is often printed by users or opened while enroute to different pick-up locations.
Top priority is to let them know their order went through and that a confirmation email was sent.
Once they've purchased, try to reengage them to keep shopping.
Allow them easy access to printing as users find having a copy of the receipt useful for multiple pickup locations.
Billing and Shipping Address confirmation included.
Store locations with links to directions.
Order Summary 1
Email and payment information to add trust factors.
Order total in cost, taxes, and number of items.
Allow them easy access to printing as users find having a copy of the receipt useful for multiple pickup locations.
Add an optional gift message.
Delivery methods begin with Same Day Delivery.
Order Summary 2
B
usy families on the go love BJ's Buy Online Pick Up In Club option. Due to BJ's complex series of delivery options we allowed the user to select the pick up person for the in-club pick-up, even if that is not the same person who placed the order.
Order Summary 3
W
ith each order we also provided a section at the bottom to show a customer's wish list items. This provided a large potential for additional sales. We also gave the users the option to quick remove any wish list items that they no longer desired.
Order Summary 4
Outcomes
As a result of these changes, complaints to the customer service deaprtment went down considerably. We had less technical issues reported. Sales went up because we were able to offer more delivery methods.