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:
-
General/EU Version: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=9066-8698&t=RV6cgPq3e10uFz3M-4
Mobile:
-
General/EU Version: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=8898-1607&t=RV6cgPq3e10uFz3M-4
Acceptance criteria |
||
|---|---|---|
|
01 |
Scenario: Country Dropdown Functionality Given: A user is on the checkout page. When: They interact with the country dropdown. |
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 |
|
|
03 |
Scenario: Phone Field Design 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 |
|
|
04 |
Scenario: Loading Wheel Optimization 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 |
|
|
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 |
|
|
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 |
||
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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. |
|
|
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 |
|
|
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” |
|
|
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 |
|
|
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) |
|
|
16 |
Scenario: Display payment methods in a specific order based on country and order value. |
|
|
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 |
|
|
|
|
|
|
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 |
























Leave a Reply
You must be logged in to post a comment.