Before and After Revamp
Product Design Problems:
During this phase, the objective is to get the right expectation of the project, context of the product, users behavior, and the success metrics.
During this phase, I’m involved in the creation process of a higher fidelity design, prototyping, and testing.
The results from this phase are:
On previous Checkout, the transaction created a moment after the user move to the payment selection page.
This is not fair for the user that has an intent to open a payment page to check the available payment method selection. Also this will resulting in a technical debt that affecting the metrics.
Due to this approach, user experience is being sacrificed. They cannot edit, or change their items after they were visiting the payment page. This will led to increasing customer contact due user complaints.
So what we do is to move the transaction creation process at the end of the flow to mimic the real purchasing journey of our users.
Current product behavior is auto selecting last used payment method by our users. But this is only available on the mobile app.
There is an inconsistency between mobile and desktop experience.This will resulting in more thinking process by users when switching platform, and hard to manage the experience for future improvements.
We want to make them consistent. But, there is a challenge if we do this on desktop:
If we always select user last payment method to use easily, how can we give exposure to other promoted payment method that give user advantage without sacrificing our usability aspect?
What we do were:
1. Courier Selection
This new pattern is locally use for a specific checkout purpose: to enable user select courier preferences by duration easily.
We incorporate a recommendation pattern to support business objective by giving courier selection that has more benefit to the user.
2. Stepper Progression
The purpose is to give user clear navigation on current page, give expectation on what to do next, and how much step they need to take.