nikecheckout.jpg

Nike

While at ESW, I worked with one of the biggest brands in the world - Nike. We were tasked to redesign the current checkout.

Moving Nike to a singe step checkout

Moving Nike to a singe step checkout

One of the main reasons for abandonment during the checkout is too long for complicated checkouts. We were tasked to move Nike from a multi-step to a single-step to improve this. It previously contained 20 components - 15 form fields, 1 drop-down, 3 selectors and 1 checkbox. From our research, the optimum number is 12. I’ll take you through the improvements I made.

Use a single name field

Use a single name field

Users think of their name as a single entity and often write their full name in the 'First Name field.

Some of the feedback received were:

"Oh, it said 'first name. I hadn't noticed it had to be split up"

"Oh, I'd write the full name into one, but we're not allowed to"

"Ahh, how annoying"

Advice: Have a single 'Full Name' field instead of using separate '

Consider hiding "Address line 2" behind a link

Consider hiding "Address line 2" behind a link

Displaying an “Address Line 2” field can be disruptive as it breaks the user’s typing flow, making them question their “Address Line 1” response. We suggested using a typeahead field for the “Address Line 1” field” which would use the Google Places API to find their address quickly. If they instead input their address manually, they have the option to do so also. This saved users time and reassured them that their address was correct.

Divide a form page into sub-sections

Divide a form page into sub-sections

The old Nike layout needed to be clearer as the heading was placed at the bottom of the page, not apparent to the user. Dividing the page into sub-sections will help users to focus on three sections of 4 forms rather than one large section with 12 fields, for example.

Hide 1-option radio buttons

Hide 1-option radio buttons

Radio buttons are used when there is a list of two or more options that are mutually exclusive, and the user must select exactly one choice. They should only be used when there is more than one choice. In certain countries, there may be one delivery option, so in this case, it is better to hide the radio button to prevent confusion and unnecessary space on the checkout.

Measure the UX Metrics

Measure the UX Metrics

By removing these CTAs and making the Checkout a 'Single Page Checkout', we will be removing friction for Nike Consumers, in particular for Nike Members who will be brought directly to the payment panel where they can enter their CVV and click 'Place Order'. We expect these changes to have a positive impact on their consumer experience by removing unnecessary friction and improve our CSR rate for Nike Members as a result. We are targeting a 1% uplift across Nike markets which, based on 2022 numbers, would contribute to approximately 3 million in revenue.

Benefits of Checkout Optimisation

Benefits of Checkout Optimisation

The Baymard Institute of Research consistently found the design and flow of the checkout to frequently be the sole cause for users abandoning their cart during the checkout flow. During our testing with Nike users, this proved to be the case. Users were dropping out due to the length of the checkout and the time it took to complete.

Checkout optimisation speeds up the purchasing process, boosting satisfaction and encouraging repeat business. Additionally, it reduces cart abandonment rates, increasing conversions and revenue. This resonates especially well with Nike Members, improving retention. Addressing address issues cuts down downstream problems, saving costs and time. Moreover, it demonstrates customer commitment, elevating the brand's reputation and competitiveness. In short, Checkout Optimisation aligns with Nike's values, driving satisfaction, efficiency, and growth.

Mexico - Delivery - Confirmation - OXXO.jpg