Enhancing the User Experience of the Amazon Cart and Payment Section.
Learnings from this Case Study
Where do I even start?! The notes provided, hundreds of exercises and a bunch of videos through the GrowthSchool’s Course have helped me understand how design works and how there is always a possibility to redesign a product to enhance user experience. Also, through my learning, I understood Heuristics, User Testing, Typography, Grids and Layouts, and more.
So, now let's begin the journey of how I came up with the app to redesign.
Why did I choose Amazon to Redesign?
I chose it because I realized that the app does not have a clear visibility of the system status during the payment process. They also have the profile icon located second from the left, which is unusual since every other app adds its profile icon on the rightmost side.
How did I find that there are improvements that could be made on this app?
With the help of the lecture video and the workbook, I was able to gain a different perspective on how I viewed any app. I started looking for flaws and room for improvement with the help of Usability Heuristics which include, Visibility of system status, Recognition Rather than Recall, Error Prevention, Consistency & Standards, Help and Documentation, Aesthetic & Minimalist Design, and Flexibility and Efficiency of Use.
The Final Design for Amazon’s Shopping Experience
- With the help of understanding usability heuristics, I noticed that the position of the profile icon was not in the right place.
As shown above, the profile button was located at an unusual location so I changed it accordingly. This benefits the business because now users can easily go to their profile and make changes to it, therefore increasing user engagement on the app.
2. I added a progress tracker during the payment & checkout period. This heuristic is called “Visibility of system status”.
During user testing, I noticed the user’s interaction with the screens and I was able to notice that the size of the progress trackers was small to click and also did not stand out as a button. So I changed the overall color of the button to green so that users can differentiate between the completed and incompleted processes.
3. The third change I made was the positioning of the main CTA (call-to-action) buttons. Following the Fitts Law I added the main CTA button (Deliver to this address button) to the bottom so that users can easily click the button without reaching out for it on the screen.
This benefits the business because maintaining consistency and standards throughout the screens helps users to navigate through pages easily which therein increases user engagement and user retention.
How did I arrive at this solution?
When I looked through Amazon, I noticed three main issues.
- The profile icon was unusually at a different location.
When I compared the position of Amazon’s profile icons to Netflix, YouTube, and Instagram, I understood that the position of the icon was located in an unusual place.
Jakob’s law states that users spend most of their time on other apps, so our app should be designed in a way that the user’s mental load is reduced. They need not think twice before clicking on a button. The heuristic principle of “Recognition rather than recall” relates to this exact law.
So accordingly, I arranged the profile icon to the rightmost side. Now users especially the ones who are tech-savvy can easily click the button without even thinking too much.
2. During the payment process there are four stages. Those are the Cart Section, Billing Section, Shipping, and Payments.
I noticed that users aren’t informed about how many steps are left while going through them. Providing an update to the users and feedback keeps them in the loop and does not make them anxious to move forward with the process.
3. The third issue I found was an inconsistency of design between the screens. The CTA buttons are not placed close to the users' fingers to click them easily.
The main CTA buttons are located at two different locations.
The screen on the right has the main CTA on the top which also makes it tougher for users to click.
Discovering different ideas to solve the problem
I had gone through different iterations before finalizing these ideas.
In the Cart screen, I had two ideas:-
I) To add the profile button on the rightmost top side. I came up with that because by looking through other apps I noticed that some major apps have kept their profile icon there.
2) To interchange the position of the profile icon with the menu icon. I came up with this because the majority of the apps had arranged it similarly.
I went with the second idea because all the major applications that users use and spend most of their time in such as Instagram, YouTube, and Netflix had their profile icons on the rightmost side of the bottom navigation bar.
The ideas for Billing, Shipping, and Payment screens were finalized with progress trackers. The main iterations were done with how the progress tracker should look like and how easily accessible it is to users.
Creating Low-Fidelity Prototypes
From the insights that I had gained during my ideation stage, I created Low-Fi wireframes on paper, and then using the Marvel App, I linked these wireframes amongst each other to create prototyping.
As you can see below are my low-fi wireframes. To move across screens and see my other paper prototypes you can click on the Billing, Shipping, or Payment buttons.
Creating My High-Fidelity Prototype
I applied the knowledge I gained from Anudeep regarding UI elements, screen replication techniques, and workbooks to establish navigation between screens and implement smart animations, simplifying the animation process.
In the redesigned screens shown above there are three main changes:-
I)The profile button was interchanged because of the inspiration I gained from other apps.
II) Progress trackers are added to every stage of the process so that users can backtrack to a completed process. Providing them feedback helps the business, it increases user engagement.
III) The third change was bringing in the consistency of the CTA button “Deliver to this address” throughout the screens. The position of the button on the billing screen was different from others and it was even placed far from the user's fingertips.
The insights I gained from Usability Testing
I gave the users a few tasks to complete and also observed their behavior and interaction while using the app.
From the tasks shown above to users, I observed a few things from the users:-
User 1
I) The progress buttons are a little small
II) They are clicking the profile button quickly.
III) They are backtracking to previous processes.
IV) The progress buttons feel like it isn't standing out because they can't easily click it.
User 2
I)Can navigate through the cart and billing processes
II)The newly changed CTA’s are easily clickable.
III)They can move back to the previous process easily.
My newly changed High-Fidelity prototypes after Testing
From the Insights I gained through User Testing, I made the necessary changes.
I changed the size of the progress trackers and differentiated the completed processes from the incomplete ones with the green color.
The learnings I had from the user testing were that,
Usability: Recognising how users interact with my interface and carry out their duties. Finding out what obstacles or difficulties they run into along the process.
UX Feedback: Learn about the general level of satisfaction and emotional reaction that users have to my interface. Recognize whether the experience satisfies their requirements and expectations.
Navigation: Assessing how well my menu progress trackers work. I checked to see if users encounter confusion or can use the interface with ease.
Key Learnings
I gained valuable insights into UI/UX design from Anudeep’s workbooks and videos. He covered usability testing, design heuristics, replicating designs, asking common sense questions, typography and so much more.
His teachings helped me understand how to evaluate interfaces effectively, create user-friendly designs, and choose suitable fonts for readability and appeal. Anudeep’s guidance has enhanced my design skills significantly, allowing me to create intuitive interfaces that meet user needs.
Nowadays when I'm using any app, I try to ask common sense questions and evaluate those apps based on the heuristics. At this point, I realized what Anudeep had mentioned, every app whether big or small has room for improvement. Whether it is changing the position of buttons or changing the overall layout of the app, a redesign is a redesign.
I’m grateful for the opportunity to learn from him and confident that these lessons will continue to benefit my design work.