Page Comparison

...

List of solutions & designs

...

Potential Solutions

Giving the results of the Competitor landscape and benchmark (link to the Opportuny page in Confluence), we work on 2 different approaches:

• Exploration 1: showing only the accepted cards thumbnails once the user has selected, they want to add a new card:

Image Added

• Exploration 2: showing the accepted payment methods thumbnails before the payment method selection. This way the user can see all the payment methods in a glimpse before deciding:

Image Added

However, the Exploration 2 has been discarded because it brings more cons than pros. Here it is the rationale behind each potential solution and why we discarded the first option:

• Exploration 1:

  • Pros: There is not as much cognitive load because we only inform about the cards that are accepted.

  • Cons: No cons found (as yet).

• Exploration 2:

  • Pros: The user can visually know the accepted payment methods before opening the drop-down.

  • Cons:

    • When we have lots of different types of payments methods, the UI may have a huge cognitive load that risks usability.

    • If the restaurant had activated the “Pay with Card on Delivery” option, we might be showing cards that its terminals could not accept.

...

Solution Description

[Insert here the same solutions page if applicable]The proposed solution is to add all accepted card thumbnails once the user has selected “Add New Card”:

Important: there are 2 different Payment Pages designs for each type of order: Delivery and Pick-up orders. By now, this should not affect the Dev Team but the Core FE.

DoD

• Show new title “Card Details”, followed by the card Thumbnails:

Image Added

• Create a solution that works when there are many payments methods or the title is large:

Image Added

Important for the DoD: we are not going to work this feature for the “Pay with Card on Delivery” option, because we don’t know if all terminals have the same accepted cards or not. And making the card images configurable by restaurant could implied a complex development that can’t be affordable on time and effort.

...