Ensuring age restricted products are controlled at checkout 

 

Context

There are some products that Best Buy Canada sells that are intended for mature audiences. Products such as games and movies can be purchased in-store and a store associate can verify the customer’s age in person. We face the challenge of verifying customers’ ages for online purchases.

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?

The approach

Discovery

The customer’s journey through the checkout experience was documented to understand where the customer was encountering the error and to highlight opportunities for the experience to be improved.

Design

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.

Cart modal

  1. 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

  • Point in the buying journey to best remind the customer about the next steps in the process.

Payment page - Credit card messaging

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)

  1. Credit card form: The credit card form remains visible for the customer to enter a valid credit card;

  2. 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.


Payments page - Credit card error

Scenario: The customer presses the “Continue” button without typing a credit card number in the fields, or leaving the fields partially incomplete.

  1. Information message: Message persists.

  2. Credit card form error state: If the credit card fields are left empty or incomplete, they will revert to an error state.

  3. Billing address: The fields for a billing address must be shown (for Authenticated and Guest Checkout).

  4. 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.

  1. Information message: This will not be shown to the customer.

  2. Credit card form: Any data that the customer has previously added in these fields will persist. They will validate the data again.

The solution

This solution went live at the end of July 2020.