Enhancing the Amazon Transaction history page | UX Case Study (microflow)
Let me take you through my 2Day Micro-flow design challenge, I select Amazon Pay, the Microflow is the “Transaction”💵 history page.
The reason to select this Microflow project
I select a microflow for my 2-day workshop. Selected microflow to make a 🦸♂️better version of it.
I select the Amazon payment transaction history page for the 2-day workshop.
A small change makes a good impact on the user experience and business. A full project will include many microflows. Improving a microflow is equal to a bigger project.
So I am very 🤗excited to do the microflow of the amazon app.
Figure out the area to enhance the user experience in the Existing design
📌I select the microflow in Amazon.
Select the “Amazon Pay -> Transaction”
In Amazon pay, transactions show all kinds of transactions we have done.
❓Problem
The user uses “Amazon pay” for their transaction. If the user will recheck the 📃transaction page, you get all transaction 📑history in date base in a well-arranged manner, but, the user couldn’t get all details of a particular transaction at the first glance 👀.
If the user wants to know more about the payment made❔ Which type of transaction will be done❔ Only show the amount will use “UPI” or Amazon pay balance. And where did the amount take it from❔ Shows “UPI” or “Amazon pay balance”. At first sight, it is not known what kind of payment is, like mobile recharge bill payment which only shows how much amount.
💡Solution
Nowadays, more people prefer to make cashless transactions. In the introduction to UPI app, more people use payment apps. So people will use multiple UPI apps for their transactions. In my research one user uses multiple UPI apps for the transaction.
In Jacobs laws “Users spend most of their time on other sites”
In other UPI apps as we can easily find the transaction history for which the transaction was made.
Amazon pay also lists all transactions. but, the user has to click on the icon to know more details about the transaction.
➡Add the image for which the transaction is done
Add a transaction image to let the user quickly know what transaction he has made. If the BSNL mobile is recharged, the mobile recharge (BSNL Logo) image will be placed.
The image helps communicate information quicker than text.
➡Replace the repeated text “Paid on Amazon” and mention which transaction was made. Like mobile recharge, and bill payment.
➡ The user clicks the “down arrow” for further detail about the transaction.
It is the same as the existing design without any changes.
💎Benefits to the user and 🎯Business Impact
The new design has user control and freedom, and flexibility and efficiency of use which will help users to always feel that things are in their control,
Reduce the session length in the previous.
Users can click the icon to know more detail about the transaction history, like the current version.
🕵️My Process
The process I used for this UX problem was the design thinking process.
This process has 5 main processes:
1. Empathise
2. Define
3. Ideation
4. Prototype
5. Testing
After Brainstorming I find some ideas and choose an appropriate idea to create a low-fidelity design. This low-fidelity design has led to the main design.
Draw the low-fidelity make prototype. The low-fidelity Prototype was possible with the help of “The Marvel app”.
After completing it I went on to make a High-fidelity prototype in Figma.
After completing the design. Assign a task to the user, it helps to validate the design. The design is fine if the user performs the task quickly. If the user has faced any difficulty, then the design should be redesigned again and checked.
Every user uses UPI. Some people use “Amazon Pay”. So, find the “Amazon Pay” user and check the design. The user who uses Amazon Pay regularly should check out the design.
The task for the user 👨🏽🏭
➡ What is the current transaction in your Amazon pay❔
➡ What is the latest mobile recharge in your Amazon pay❔
Observe the user
👉🏻 Does the user easily complete the task?
⏳Before — The user Should click the “down arrow” to know which transaction is made.
🚄After — The user will know at a glance👀 which transaction he has made.
✅Key Learnings
A problem should be identified and make a solution to the problem, should be found within a short period. To brainstorm to find possible solutions for the problem.
To make the founded solution in a real working model. First Draw the low-fidelity and convert it into a high-fidelity. Check this design with the user. The user is not satisfied and works again. Find a better solution.
A full project will include many microflows. Improving a microflow is equal to a bigger project.
The change in the “microflow” design process is equally valid to the full-fledged app.
🚩Learning from existing design
Every design is a several days designer’s effort. Find how the designers design a user-centric model. How the designer uses the “Heuristic Evaluation”. How to diagnose the problem with “Heuristic Evaluation”.
It helps to improve design thinking and find the proper solution to the problem.
🚩Learning in Usability testing
Find a problem and make a solution to the particular problem. It’s work? Is the right solution so user can easily complete their task.
Checking the solution with real users is very interesting and finds the user behavior to the particular task. If the user isn’t satisfied again, work with the problem and find a solution.
🙏🏽Thank you for your valuable time to read this article! 😃
Comment 💬your feedback
