Story 28.1 Checkout Redesign

General info

We are redesigning the checkout to improve the user experience, streamline interactions, and enhance the overall design. The changes include improving country dropdown behavior, refining phone number inputs, and updating key UI elements.

User story

As a customer, I want a fast and intuitive checkout process so I can complete my purchase with ease and confidence.

Visual design:

Desktop:

Mobile:

Acceptance criteria

01

Scenario: Country Dropdown Functionality  Given: A user is on the checkout page. 
Then: correct country is pre-selected based in IP (function already existing)

When: They interact with the country dropdown.
Then: The dropdown provides search functionality via keyboard, sorted alphabetically for EN/DE/FR. It supports Autofill.

Bildschirmfoto 2024-11-27 um 11.24.54.png

Country names EN, FR, DE for alphabetical sort:

https://docs.google.com/spreadsheets/d/1YHTJB3gEiwuObMj8utbtRToEqTwhNk0_8PYeY5OzKv0/edit?usp=sharing

02

Scenario: Prefill country based on history or IP (already existing)

Given: A user has past orders or IP location
When: The checkout page loads
Then: The country field pre-populates with the detected or historical country.

03

Scenario: Phone Field Design
Given: A user selects a country in the country dropdown.

When: They proceed to the phone field.  Then: The phone field pre-sets the country code, but the user can edit it.

When: They edit the phone field
Then: Use existing Phone field design with type function from SYB submission function

Bildschirmfoto 2024-11-27 um 11.53.09.png

Bildschirmfoto 2024-11-27 um 11.55.00.png

04

Scenario: Loading Wheel Optimization
Given: A user interacts with form fields

When: No backend data is being loaded (e.g., entering name, address, postcode, selecting payment method)

Then: The loading wheel is removed

05

Scenario: Coupon field

Given: A user checks out on mobile or desktop
Then: The coupon field is repositioned

Bildschirmfoto 2024-12-03 um 12.09.53.png

Bildschirmfoto 2024-12-19 um 15.48.51.png

06

Scenario: Direct Bank transfer text mobile & desktop

Given: User selects “Direct brank transfer”

Then: Display new text AND let admin change it in WP

Text:

After you’ve placed your order, we’ll email instructions for making the payment via bank transfer. Your order will not be shipped until the funds have cleared in our account.

And let admin change this text

Bildschirmfoto 2024-12-16 um 18.29.19.png

Scenario: A/B Test

When: A customer reaches checkout

Then: 50:50 A/B Test the new design (story 07 til 18) vs. the existing checkout. Performance will be tracked via Story 28.4

Scenario: Oder Summary Desktop

Given: A user checks out

When: They view the order summary

Then: Redesign, Bigger Text field in case of long product name, Grade Included, USPs included

AND When: User scrolls down

Then: Order summary floating/sticky. visible in Prototype

Bildschirmaufnahme 2024-12-19 um 15.51.41.mov

Bildschirmfoto 2024-12-19 um 15.50.02.png

07.1

Scenario: Oder Summary Mobile €

Given: A user checks out with € value

When: They view the order summary

Then: Redesign, Bigger Text field in case of long product name, Grade Included

AND When: User scrolls down

Then: “Total” sticky on top of page. Visible in Prototype

Bildschirmfoto 2024-12-16 um 18.02.18.png

Bildschirmaufnahme 2024-12-16 um 18.12.01.mov

7.2

Scenario: Oder Summary US desktop

Given: A user checks out with $US value

When: They view the order summary

Then: Redesigned Order Summary AND More product details are displayed AND user sees $ value AND info text “Import duties & fees included” AND bottom text “returns not possible”

AND When: User scrolls down

Then: floating Order Summary

Bildschirmfoto 2024-12-23 um 13.06.48.png

Bildschirmfoto 2024-12-23 um 13.08.10.png

07.2

Scenario: Oder Summary US mobile

Given: A user checks out with $US value

When: They view the order summary

Then: Redesigned Order Summary AND More product details are displayed AND user sees $ value AND info text “Import duties & fees included” AND bottom text “returns not possible”

AND When: User scrolls down

Then: “Total” sticky on top of page

Bildschirmfoto 2024-12-16 um 18.14.09.png

Bildschirmfoto 2024-12-23 um 13.09.56.png

08

Scenario: USPs on mobile

Given: A user is in the checkout on mobile

When: The user scrolls to the bottom of the page

Then: USPs are displayed

Bildschirmfoto 2024-12-19 um 16.35.26.png

09

Scenario: Top Bar on mobile

Given: A user visits the checkout on mobile

Then: New Reviews.io badge is displayed AND “Secure Payment” Text AND Saclab Logo AND Payment methods displayed. No more display of Navigation bar

Bildschirmfoto 2024-12-19 um 16.36.13.png

10

Scenario: Top Bar on Desktop

Given: A user visits checkout on deskto

Then: New http://Reviews.io badge is displayed AND “Secure Payment” Text AND Saclab Logo (already existing) AND Payment methods (already existing) displayed.

Bildschirmfoto 2024-12-19 um 16.39.43.png

11

Scenario: Bottom text Reposition

Given: A user enters checkout on desktop on mobile

When: A user scrolls down

Then: Text “your personal data…” is repositioned. The Text still differs between the EU/US version

Bildschirmfoto 2024-12-19 um 16.41.39.png

Bildschirmfoto 2024-12-19 um 16.44.30.png

12

Scenario: CTA “Pay Now”

Given: A user is in the checkout on mobile or desktop

Then: Change Cta from “PLACE ORDER” to “PAY NOW”

Bildschirmfoto 2024-12-19 um 16.46.43.png

13

Scenario: Text input fields redesign

When: a user visits the checkout on mobile or desktop

Then: The text input fields are repositionend/redesigned to slim down the page

Bildschirmfoto 2024-12-19 um 16.23.19.png

Bildschirmfoto 2024-12-19 um 16.24.38.png

14

Scenario: Mandatory field “State”/”County”

Given: A user checks out on mobile or desktop

When: Country is selected where field “State” is mandatory (by wooC)

Then: Desktop: Display “State” like displayed here. Mobile: Display “State” like displayed here.

When: Country is selected where field “State” is not mandatory

Then: do not display field “State” at all (on mobile and desktop)

(function already existed)

Bildschirmfoto 2024-12-19 um 16.14.34.png

Bildschirmfoto 2024-12-19 um 16.20.29.png

16

Scenario: Display payment methods in a specific order based on country and order value.
Given: A user reaches the payment step during checkout.
When: The payment methods are displayed.
Then: The payment methods are ordered as follows, based on “Country” selected:
Germany, Austria:  1. Direct Bank Transfer  2. Credit Card  3. PayPal
All other countries AND Order value < €20,000:  (1. Bancontact  2. iDEAL)  3. Credit Card  4. Direct Bank Transfer  5. PayPal
All other countries AND Order value > €20,000:  (1. Bancontact  2. iDEAL)  3. Direct Bank Transfer  4. Credit Card  5. PayPal
And: The first payment method in the list is automatically pre-selected.

16.1

When the user’s language is French and the order value is < 20,000€ (function already existed – no A/B testing here)

then: Direct bank transfer payment method is disabled

17

Scenario: The user wants a different billing address

Given: The user is in the checkout

When: The user wants to input the shipping address

Then: Default address fields are now the SHIPPING address fields. The user can click the checkbox for different billing address.

Bildschirmfoto 2024-12-19 um 17.38.11.png

18

Scenario: Suggestion from hipay: The user is unsure about the term “Credit Card” and wants to pay with her card

Given: User is in checkout

Then: User sees “Card Payment” as Payment Option, instead of “Credit Card”

And Admin sees payment method still as “Credit Card” in WooC Order

Screenshot 2025-01-16 at 12.41.20.png

Comments

Leave a Reply