2

I’m working on an e commerce cart and I am faced with various conditions for products that have a gift card applied.

Condition 1: The price for products which are from the companies private label can be reduced via gift card or fully paid by gift card if the gift card credit is higher as the cart value.

Condition 2: The price for products from the marketplace can‘t get reduced by gift cards.

User actions The following user actions need to be covered by informing the user about the conditions.

  • user applies a gift card, but has private label + marketplace
  • user applies a gift card, but has marketplace products
  • user has a gift card applied, but deletes the private label product and has only marketplace products left

Ideas I scribbled a flow with a prompt alert informing the user with more context about the conditions when the gift card is applied. Also above the input field the conditions are briefly summarized.

My pm brought another notion - refer the user to a more neutral message to the top of the cart. I told him that auto refer is bad ux, but he stated that modals are bad ux. So we are both not aligned.

Do you have ideas how to tackle this?

Improve this question
3
  • I think you need to be a bit clearer with the context and the flow of actions; knowing how the user triggers those actions would be helpful as well, and whether this is on a page, in a sidebar or modal already, is this mobile or desktop, etc. Is the user on the "My Cart" page when this is all taking place?
    – Mattynabib
    Commented May 19, 2023 at 20:10
  • Device: mobile, the actions are triggered on the cart page
    – Helge
    Commented May 22, 2023 at 6:39
  • Important aspect IMHO: Will the gift card code persist or get deleted once not applicable anymore? Probably better to keep, to avoid frustration with having to re-enter. That said, the warning in use cases 2+3 should persist, too. This makes any temporary message like snack bar or toast difficult. On the statement of the PM 'modals are bad UX' – this topic has been discussed on this site before, maybe worthwhile having a look.
    – greenforest
    Commented Jun 27, 2023 at 8:30

1 Answer 1

Reset to default
1

If I'm understanding your scenario correctly there are really two flows:

  1. User applies a gift card > System responds based on what's in the cart

  2. User has a gift card applied and removes an item resulting in only non-gift-card-compatible products

Seems to me your situation might go like this (this is a VERY quick and dirty thought without clear and full context, of course):

User has a cart with mixed items:

enter image description here

They choose to apply a gift card, entering the code and clicking "Apply" - they get confirmation that the card was applied via a snackbar or toast or some ephemeral messaging, and the prices in the cart update to show which have had the card applied (and perhaps the remaining value on the card is displayed somewhere):

enter image description here

If they then remove the private label items, they receive a message that none of the items in the cart can use the gift card - but that they may leave it applied in case they add more private label items during their shopping session.

enter image description here

They might receive a similar message if they apply a gift card with no private label items in the cart. However it goes, they should be assured that if they leave the site or finish shopping with the card applied but no items that use it, the value on the card will remain for future sessions.

Basically they should be able to apply the card whenever during the session and have the site take care of the details as to whether it is used or not, just letting them know how much they've used and where it was applied, IMHO.

Improve this answer
5
  • Hey @mattynabib, thanks for your detailed response. Actually the third use case - when the item is removed is the challenge. My PM stated - lets not use a modal to display the user an alert that the gift card stays applied, but does not affect the prices of the remaining products. But i see advantages for this use case to use a modal: - user stays at the same scroll position - user has more focus on the important message - the modal can be rather neutral instead of firing an error message An auto scroll to the top of the cart to the message would probably confuse users.
    – Helge
    Commented May 21, 2023 at 22:12
  • So basically the questions is - modal dialog or auto scroll to the error message? I proposed a user test but we're almost done with the whole implementation and we figured out this issue kinda late in development. So as a quick decision i'd propose the modal to let the users know that the current applied gift card cannot reduce the prices of the current cart items.
    – Helge
    Commented May 21, 2023 at 22:15
  • Well, I might again propose using something like a Toast (uxmovement.com/forms/…) or a Snackbar instead of a modal or a fixed-position message. That lets you display the message wherever the user is without changing their scroll position, it does not block or disrupt the user's flow, and it can either persist until dismissed or self-dismiss. Very broadly, snackbars are more of a mobile pattern and toasts are more desktop, but there is a LOT of variation in how both are implemented.
    – Mattynabib
    Commented May 22, 2023 at 13:22
  • For the record the green "Gift card applied" in my sketch above was meant to indicate that sort of toast: scroll independent, it would always show up in that upper right location (a common one for toasts), and then auto-dismiss after maybe 4-5 seconds. But the red error banner in the next one could just as easily be delivered in a toast if the scroll pane is likely to be long.
    – Mattynabib
    Commented May 22, 2023 at 13:23
  • And I JUST saw your clarification above that this is mobile - clearly the layout would need to be a bit different from what I proposed, and you might use a snackbar-type of treatment (m2.material.io/components/snackbars) rather than a toast to reflect the mobile environment.
    – Mattynabib
    Commented May 22, 2023 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.