Company Overview
BJ's Wholesale Club is a online and in-club retail store offering everything from groceries and paper products to TVs and tires. BJ's also offers member-only savings for club members available both online and at any of its 25 locations across Massachusetts. During the time of this project, they had recently underwent a massive change from having just a brick‑and‑mortar presence, to becoming a full service online shopping experience.
My Role and Responsibilities
UX Researcher, UX Designer
I was responsible for taking point on design for this project. I conducted user research and designed high-fidelity 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 to review progress and suggestions. After releasing this project we continued to monitor metrics to see how successful the updates were.
Platforms
Web/Mobile Ecommerce Site
Tools
Sketch, Invision, Dreamweaver, Github, Trello, Jira, Bitbucket
Collaborators
UX Manager, Product Managers, Customer Service, Back-end Developers, VP of Product
Context and Challenge
Problem Statement
The goal of this project was to improve the cart and checkout user experience for our customers while making the experience more inclusive and accessibility-friendly.
I 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. My designs were updated for ADA compliance as well as to address some exisiting user experience issues. This new design would need to be fully responsive to work well on both mobile and desktop, as such we took a mobile first approach to the layout design.
Users and Audience
BJ's users are the customers and club members who purchase their goods and perishables both online and in store. Their demographic often consists of multi-person households and families. Another branch of our demographic also consisted of elderly folks who were just learning how to adapt to online purchasing. The flexibility of BJ's stock allows these users to be either bargain shoppers or bulk shoppers. While a majority of the items sold are often groceries, BJ's offers a fairly robust list of services such as tires, home improvement, optical, and travel as well.
Scope and Constraints
The primary constraint for this project was a company wide initiative to update our accessibility compliance. BJ's transition from brick and mortar to online shopping meant that many of its users were new to the online shopping experience. This meant that we needed to be very clear and transparent as some users would be making their first online purchases with us. We needed to make sure we provided a very friendly and transparent experience for them.
BJ's elderly users sometimes experienced issues with poor vision or motor skills. This further justified the need to meet ADA Accessibility compliance. We needed to include a way for users to easily scale up and down the font size within our websites and applications. Additionally, we needed to review and improve screen reader capabilities within our applications further assisting with vision impairments.
"The Inaccessibility Cycle" shows how the disabled appear as a minor group as long as we continue to treat them as a minor group. By ignoring solving for their needs, we downplay their prominence in our communities. Seeing this illustration for the first time in a UX accessibility article really opened my eyes to the injustices we as designers were emboldening by not including the disabled in every usability conversation. This is really where my passion for accessibility and inclusivity surged and became a vital part of all of my future design decisions.
Process
User Research
To begin our research we worked closely with the Customer Service department to review their intake of commonly voiced improvement suggestions and current issues. From this we were able to isolate parts of the flow that were causing confusion. After reviewing our own findings with our user focus groups we were able to find solutions that we believed would solve for their needs.
Users also expressed the desire to access all of BJ's unique delivery options at once. Users did not want to have to put in 3 separate orders for "Same Day Delivery via Instacart", delivery via shipping, and "Buy Online, Pick Up In Club", or BOPIC. As such we knew that we needed to create an experience that elegantly allowed our users to do all of this at once while still presenting everything in a very clear way. Since orders would be coming and going to different locations we wanted to make sure that our visitors did not overlook any of this vital information.
Accessible by All
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 on desktop, 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 allowed us to improve both hierarchy and functionality.
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.
Membership Cards - Shopping Cart
T
ires are a big ticket item at BJ's Wholesale Club. All tires come with a free installation and users are reminded that date and time can be selected at checkout. Users can also view where the installation will take place and the cost for the services.
Tire Order - Shopping Cart
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.
Multistore Pick Up - Shopping Cart
C
ustomers can add special instructions to communicate with their Instacart shopper. BJ's partnered with Instacart to accomplish their Same Day Delivery option.
Same Day Delivery
Instacart Instructions - Shopping Cart
A
t 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 way to entice them to buy more. They also have the option to move the items to a wish list from here.
Saved For Later - Shopping Cart
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 on file, a new card, or a PayPal account.
Payment Methods - Shopping Cart
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.
Order Confirmation
T
he top priority is to let the user know that their order went through and that a confirmation email was sent. Now that the customer has completed their purchase, we try to reengage them to keep shopping, or we allow them to directly print out their receipt.
The repeat of the dummy text "Framingham" here is not a real world scenario, but was used to show the visual weight and space that one of our longer named locations occupied.
Delivery Details - Order Confirmation
T
he Delivery Details page shows all the ways by which you selected to receive your goods. Within the same order users can select to have things delivered to them the same day, delivered to them later, and pick up items in club. This gave our users the flexibility they requested of us during our user research phase.
Payment Information & Order Summary - Order Confirmation
P
ayment information shows the payment method and the billing address. The order summary shows the total cost across all of the different delivery methods and services offered.
Membership Purchase - Order Confirmation
I
f a member is purchasing membership cards for the first time, or if they are renewing a club membership, the club cards will show up under a Membership section within the Order Confirmation page.
Tire Orders - Order Confirmation
T
ire orders were becoming wildly popular in club and our update to the purchasing flow allowed us to add our automotive offering to the list of available purchases online. This greatly increased the number of tire orders we saw across the company.
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.
We provide them with easy access to printing as users find having a copy of the receipt useful for multiple pickup locations.
Billing and Shipping Address confirmation is included.
The summary also includes the store locations used 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.
Pick up Person - 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.
Wish List - Order Summary
O
ne of BJ's most commonly purchased objects was large scale appliances. As part of our commitment to our club members, we even offered services to haul away and dispose of old appliances when delivering new ones such as refrigerators, ovens, dishwashers, washers, and dryers.
Haul Away - Order Summary
Usability Testing
Once we had working prototypes of our screen mockups, they were presented to a focus group to get their feedback. Most of the suggestions revolved around adding instructions and additional context when possible, as well as being very clear about split "buy in store, pick up in club" orders. Sometimes items that weren't in stock at one store would still be purchasable at another. This was sometimes confusing to the user so we made sure to reiterate this both before and when they visit their cart, and they're made well aware before confirming the purchase.
BJ's elderly users sometimes experienced issues with poor vision or motor skills. This further justified the need to meet ADA Accessibility compliance. We needed to include a way for users to easily scale up and down the font size within our websites and applications. Additionally, we needed to review and improve screen reader capabilities within our applications further assisting with vision impairments.
Outcomes
As a result of these changes, complaints to the customer service department went down considerably. We had less technical issues reported. Sales went up because we were able to offer more delivery methods. Adding our tire orders to our online sales greatly increased the popularity and success of this service.