Controlling age-restricted products at checkout
And how I work collaboratively with other designers.
Best Buy Canada, 2020
When you walk into a store and try to buy an R-rated video game, the store associate can usually look you up and down and suss out if they need to see some ID. Not so much online, though. At Best Buy, customers wanting to buy an age-restricted product needed a credit card, but would hit a wall if they tried to use a gift card. I go through how I worked alongside a UI designer, a UX writer, and a product development team, to solve this problem.
The Problem. Best Buy Canada relies on the use of a customer’s valid credit card to ensure that the person purchasing an age-restricted product is over 17 years old. If a customer chooses to pay with a gift card that covers the cost of the order, the customer isn’t shown the fields to enter a credit card (as from a payment perspective, it’s unnecessary).
However, when the customer tries to continue to make the purchase, they are met with an error message, asking them for a valid credit card— a credit card they have no means of entering into the website.
How might we allow customers to pay for age-restricted products with gift cards whilst verifying that they meet the minimum age for the product?
A user flow highlighting the point in Best Buy's checkout that a customer can't verify their age to buy an age-restricted product.
The Solution. The ideal customer journey was mapped out. Screens were designed in critical touch-points along the journey to enhance the experience. Working in a multi-disciplined team consisting of a UI Designer, UX Writer and myself (UX Designer), the screens were annotated to provide high-level requirements for the UI Designer and UX Writer to specialise within their domain.
A user flow demonstrating how the solution enables a customer to proceed through checkout after having used their credit card to verify their age.
Modal: Copy changes to inform the customer that a valid credit card is needed for this purchase, so that their age can be verified.
Opportunity: Update the title, copy of the message, and the copy on the buttons.
Rationale:
Pro-active approach to tell the customer they will need to have a credit card ready during checkout; and
A moment in the buying journey to best remind the customer about the next steps in the process.
A modal appearing on the Cart page asking the customer if they are 17 years or older.
Scenario: A customer adds a gift card as a method of payment. The balance of the gift card can pay for the total cost of the purchase. (This also applies in the case where 2 gift cards are also added— the total balance of the gift cards can pay the total cost of the purchase)
Credit card form: The credit card form remains visible for the customer to enter a valid credit card;
Information message: If the purchase is completely paid for by the balance of the gift card AND the purchase has an age-restricted item, then:
The information message should inform the customer that a valid credit card is needed for this purchase, so that their age can be verified; and
The customer should be informed that their credit card will not be charged.
A wireframe of the Payment page with the position of an alert near the credit card information informing a customer that their card will be used to verify their age.
Scenario: The customer presses the “Continue” button without typing a credit card number in the fields, or leaving the fields partially incomplete.
Information message: Message persists.
Credit card form error state: If the credit card fields are left empty or incomplete, they will revert to an error state.
Billing address: The fields for a billing address must be shown (for Authenticated and Guest Checkout).
Continue button: If the credit card fields are left blank when the Continue button is pressed:
The customer will remain on this page;
The global error for age verification will appear; and
The credit card fields will go into error state.
Scenario: The customer adds a gift card with a balance capable of paying for the entire order. The information message appears. The customer then removes the gift card.
Information message: This will not be shown to the customer.
Credit card form: Any data that the customer has previously added in these fields will persist. They will validate the data again.
A wireframe of the Payment page with the position of an alert near the credit card information informing a customer that their card will be used to verify their age, and their card won’t be charged.
The Outcome. When working with other designers and writers, I’m always aware of how I collaborate with them. To me, that means keeping them involved from discovery, design, testing and implementation. It also means being sure not to overstep into their domains. My design artefacts lay out the customer journey, the opportunities for change, and the intent of each touchpoint. I leave room for the UI designer to take the lead in finding the best way to present this within our design patterns; as I do for the UX writer to lead in finding the best way to convey this intent through written word.
This experience went live at the end of June 2020.
◼️
A modal overlayed on top of the Cart, asking the customer if they are 17 years or older, a necessary question for the customer to purchase an age-restricted video game.
The Payment page within Best Buy’s Checkout, that shows a gift card covering the cost of the order, with a message requiring the customer to still enter a credit card so that their age can be verified.