Story 28.2 Purchase Flow: Speed and UI Improvements

General info

We aim to enhance the speed and responsiveness of interactions such as adding items to the cart, marking favorites, and completing key actions like “Place Order” and search.

User story

As a customer, I want faster and more responsive interactions while browsing and checking out so that I feel confident about my purchase.

Visual design:

Desktop:

Mobile

Acceptance criteria

01

Scenario: Notification bubbles update instantly for “add to cart”

When: A user clicks “Buy Now” or removes item via “X” from cart

Then: The notification bubble updates immediately, the item disappears immedeately from cart.

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: Notification bubbles update instantly for “favorite”

Given: A user clicks “Favourite”/Unfavourite or “Star”-Icon

When: The action is registered

Then: The star-icon fills in/clears instantly OR the CTA “Favourite” changes to “Unfavourite”
And The notification bubble updates immediately.

(even if server response is not there yet? Risk involved? Other websites are doing it)

AR: saclab.com/bags favourite icon click: 2-3s loading time. https://app.box.com/s/u7xyfpdxp1j80pzzuulug8ugt85zo433

Bildschirmaufnahme 2024-12-17 um 17.52.05.mov

03

Scenario: Increase Hitbox of “x” in cart to prevent misclicks

Given: Cart is open

When: User wants to remove an item

Then: Hitbox of 10x10px” is increased to 24x24px

Bildschirmfoto 2024-12-17 um 14.39.44.png

04

Scenario: Reduce animation time for cart fade-in

Given: A user clicks on cart
When: The cart opens
Then: The fade-in/-out animation is 60% faster.

Bildschirmaufnahme 2024-12-17 um 14.41.39.mov

05

Scenario: Reduce redirect time after “Place Order

Given: A user clicks “Place Order”
When: The payment is processed
Then: The redirect time is reduced from 20s-30s to 5s.

Screen Recording 2025-05-06 at 17.12.51.mov

06

Scenario: Optimize “Reserve this bag” loading

Given: A user clicks “Reserve this bag”
When: The request is sent
Then: The loading time is reduced until the user gets feedback and popup “the bag has been reserved” and cartopen w product added to cart.

Currently: 10s.
Goal: 2s

Bildschirmaufnahme 2024-12-17 um 14.43.24.mov

07

Scenario: Search bar results appear faster

Given: A user types in the search bar
When: Results are loaded
Then: The loading time is reduced by 50%.
AR: 4-5s
ER: 2s

Bildschirmaufnahme 2025-07-14 um 09.21.18.mov

08

Scenario: Filter interaction improved

When: A user applies or removes a filter
Then: The loading time is reduced.
AR: 6s.
ER: 2s

Bildschirmaufnahme 2024-12-17 um 14.47.58.movScreenRecording_07-14-2025 09-23-22_1.MP4

09

Scenario: Redesign “My Account” PopUp if not logged in and Product in Cart

Given: A Product is in Cart and User is not logged in

When: User clicks on “Checkout” in Cart PopUp

Then: “My account” Side-menu opens with redesigned “Guest Checkout”

Bildschirmfoto 2024-12-17 um 18.29.11.png

Comments

Leave a Reply