Business problems to be solved

The checkout doesn’t show the savings (from a customer's point of view) as it should be

For some use cases when the user is qualified to receive a free delivery fee, we saw a strange UI

Here the expected/desired behavior is to show what the user is saving (FREE $0.00 doesn't make sense)

How can we improve the “Delivery Order Fees” modal to be something that will bring more value to the user?

Places where we have the Delivery fee information

PS: click on the images inside the table to open (I don’t want to flood the document). Besides that I forced the other fees and the discount value just to show how they will be on the screen… please, disregard the values.

Page	Evidence
Delivery order confirmation page - Regular fee
Delivery order confirmation page - Fee with discount I force in code to show all the information that we can have here (including the Tax). Please, disregard the 0.00 value
Recent orders page (receipt) - Regular fee
Recent orders page (receipt) - Fee with discount

Hypothesis

The hypothesis is that the cart should provide a clear understanding of the savings when you are paying less (1.99) or the free delivery and any other relevant information avoiding duplicate or not valuable content.

Design Analysis

How is the design that we have today (by brand)

PS: I tried to check on FHS but wasn’t able to reach the delivery option. On FHS CH in production for example they only have a pick-up option and don’t have delivery.

Design proposals

Schroer, Gabriel (Deactivated) feel free to add here the Figma link and organize this part of the doc to your needs.

Technical discovery analysis

The values come from the price order query (deliveryFee and deliveryFeeDiscount). More details here: /wiki/spaces/CPT/pages/3623190582

We can’t change or manipulate the values directly. This will not be recommended

I found two feature flags used in delivery fee code (not directly related to what we have on the “Your Cart” section):

Flag that controls if the progress bar will be shown (used in “Delivery Details” block): enableFreeDeliveryCheckoutProgressBar: https://app.launchdarkly.com/intl-guest-app/dev-plk-es/features/enableFreeDeliveryCheckoutProgressBar/targeting
Flag that controls the threshold limit for the progress bar: discounted-delivery-threshold-cents https://app.launchdarkly.com/intl-guest-app/dev-plk-es/features/discounted-delivery-threshold-cents/targeting
- We can change the threshold limit/value and we can add variations on Launch Darkly

Regarding the problem n.3, we have the “Delivery Order Fees” modal. The objective of this modal is to show all fees needed. We’ll not have any problem to customize this (if aligned with INTL)

Delivery fee cents (deliveryFeeCents)
Geographical fee cents (geographicalFeeCents)
Service fee cents (serviceFeeCents)
Small fee cents (smallCartFeeCents)

From a front-end perspective, we’re able to manipulate all the visuals without problem from what I saw.

Inconsistencies and finds

Testing in QA I noted that when the user reaches the minimum threshold value and the delivery fee is free the back-end part returns zero as value for the delivery fee reference. I’ll talk with INTL guys to understand this.

Improving delivery fee UX