Case Study: Redesigning the Amazon cart
Embracing Amazon shopaholics, enriching their shopping journey!
Let’s gooo
SECTION 1
How did I get to do this case study?
Over the past year, I dabbled in the fascinating world of User Experience (UX) before realizing the importance of formal education to enhance my skills. That’s when I made the exciting decision to join Growth School and enrolled in their highly regarded UX Career Accelerator Program.
During the past two weeks, I delved into a wealth of essential UX principles, including the renowned Jakob Nielsen Heuristic Principles. The cohort provided a comprehensive understanding of key concepts such as ‘Design Thinking’ and clarified the distinction between UI and UX. The non-textbook approach employed by Anudeep Sir was truly transformative, allowing me to absorb knowledge rapidly and effectively.
As a fitting conclusion to the intense two-week period, the cohort presented us with a stimulating case study challenge. It proved to be a perfect way to apply and consolidate the knowledge acquired over 2 weeks.
SECTION 2
Final Redesign of Amazon Cart(Mobile)
Below you can find the final UI. This is the final form, which I arrived at after multiple interactions and usability tests.
Kindly Note: I have done this case study only on Amazon App not on Amazon Web.
Notice any difference?
Well, let's see the original screen to understand the differences:
Got it?!
No?
Don’t worry, I’m here to help you understand everything. Let me explain step by step how I chose the Amazon app, found a problem, and understood why it’s important. We’ll discover the interesting aspects and reasons behind this problem together.
Get ready to explore and uncover the beauty and meaning behind it all!!
SECTION 3
How did I select an app?
Well, let us see the 2 important approaches that were taught in the cohort, which help me understand and gave me a start in this case study.
- Leaning from existing Design
Basically, “Learning from existing design” is about understanding how and why a product works. It helps me ask important questions about the product’s usability, like why it does certain things and how it does them. This learning helps me realize that every design and system has a purpose and aims to enhance the user’s experience.
2. Business Impact of UX Design
It’s important to know that every product on a smartphone is part of a business. This means that design decisions and practices should be made in a way that helps the business grow. Without positive impacts on the business, a good design system is like a decoration without a purpose. In this workbook, we learned about important business metrics that are used by companies worldwide. We discovered how each metric is valuable and why it matters for the success of a business.
SECTION 4
How did I evaluate the app screen and what were the problems did I find ?
After learning the concept of Learning from existing design and the Business Impact of UX design, next, we got to learn the concept known as “User Centric Design”.
So, what is User Centric Design?
User-centric design is about making things that people will really like and find easy to use. Designers think about what people want and what might be hard for them. They ask questions and listen to people’s opinions to make sure they create something that makes them happy.
The goal of user-centric design is to make things that people will love using because they are made specifically for them. The designers want to make sure people are happy, that the things are easy to use, and that they work really well.
We specifically learn Nielsen’s Heuristics: 10 Usability Principles; which are explained below:
- Visibility: Make sure important information, such as system status or available options, is clearly visible and not hidden from users. It helps users understand what’s happening and make informed decisions.
- Match between system and the real world: Use familiar language, concepts, and workflows that align with users’ mental models and real-world experiences. This reduces the learning curve and makes the system more intuitive and easier to use.
- User control and freedom: Allow users to undo or redo actions, as well as navigate through the interface easily. This gives users a sense of control, reduces anxiety about making mistakes, and helps them recover from errors or unintended actions.
- Consistency and standards: Use consistent design elements, such as layout, icons, and terminology, throughout the interface. Adhering to established design conventions and standards makes it easier for users to understand and navigate the system.
- Error prevention: Design the interface in a way that minimizes the occurrence of errors or prevents them altogether. Providing clear instructions, using constraints, and validating user input can help prevent mistakes and enhance the user experience.
- Recognition over recall: Aim to make information and actions easily recognizable rather than relying on users to recall them from memory. Use visual cues, labels, and clear navigation to reduce the cognitive load on users and make interactions more straightforward.
- Flexibility and efficiency of use: Accommodate both novice and experienced users by providing shortcuts, customizable options, and efficient workflows. This allows users to work at their own pace and caters to a diverse range of user proficiency levels.
- Aesthetic and minimalist design: Strive for simplicity and visual clarity in the interface, avoiding unnecessary clutter. A clean and visually appealing design enhances usability by focusing attention on the most important elements and reducing distractions.
- Help users recognize, diagnose, and recover from errors: Provide clear and informative error messages that guide users towards understanding and resolving issues. Offer helpful suggestions and solutions to assist users in recovering from errors or unexpected situations.
- Help and documentation: Include user-friendly documentation and help features that are easily accessible when users need assistance. Clear instructions, FAQ sections, and contextual help can empower users to find answers and resolve issues independently.
I recently embarked on a simple investigation to identify if any popular apps I frequently use have areas where they may not fully adhere to Nielsen’s Heuristics principles. To accomplish this, I carefully selected a few apps from my regular usage and critically assessed them against each heuristic principle.
During this analysis, I specifically examined the Amazon app, which I frequently rely on for shopping. Upon closer examination, I discovered a shortfall in the app’s adherence to one of Nielsen’s Heuristics principles.
Above you can see the screen of the Amazon app. The two screens are the buy again screen and the cart section of the app.
So, the Heuristics issue I found on the Amazon app was
“User Control and Freedom”.
Let’s dive deep.
Imagine you’re using the Amazon app and you want to buy two or more specific items. However, when you try to add them to your cart, you realize your cart is already filled with 6 other items from a previous visit. This makes it really hard for you to buy those two specific items that you selected in the first place.
In the screenshot (Figure S4), you can see the screen where you’re trying to add the two items to your cart. But because of the large number of items already in your cart (8 in total), you’re faced with a dilemma. You either have to buy those two items separately, which can be time-consuming, or you have to “save later” all 6 items already in your cart just to purchase the two items you want.
This situation highlights the importance of User Control and Freedom. A well-designed app would consider the user’s needs and make it easy to add and purchase specific items, even if the cart is already filled with other items. Due to the lack of the above heuristic, the user feels anxious and feels like they don't have any control over the app and are afraid to use it confidently.
If the user only buys one item, irrespective of the cart being filled with items or not, then it is of no concern, the case study doesnt apply.
SECTION 5
What ideas did I use to correct the problem ?
Having raised and identified the problem, the next step is to engage in a creative brainstorming session to generate efficient solutions.
Let us elaborate on the ideas broadly:
Idea 1: To add a checkbox against each item in the cart.
The idea is to add small checkboxes next to the items in the cart. When users want to select an item, they can put a tick mark in the checkbox. If they don’t want to select an item for the final checkout, they can remove the tick mark by unticking the checkbox.
Idea 2: Long press the items from the cart to buy the items
In the cart, select the respective items by long pressing the items and see the buy now option hence the user can buy the products without any distress.
Idea 3: Remove all the items from the cart
Here, if the user gets an option to remove all the older items to save later with just one tap, then the new items can be brought with ease.
Now, we reach the critical stage of evaluating and choosing a single idea from the three options available. This process requires careful consideration and thoughtful analysis.
After careful evaluation of various ideas, I have decided to proceed with the first idea, which involves adding a checkbox next to each item in the cart.
SECTION 6
Low fidelity prototyping the product
Low-fidelity UX is about creating simple and rough versions of a design idea. It’s like making a quick sketch or blueprint before creating the final product. This approach helps designers quickly test and refine their ideas without getting caught up in the small details, allowing them to focus on the overall structure and user experience.
Above you can see the framework of the low fidelity. Here, I drew with pen and paper the rough sketch, which further helps me to develop the high-fidelity prototype.
Below is the Low Fidelity prototype developed in an app called Marvel:
If the above link is not working, kindly use this one:
SECTION 7
High fidelity prototype (UI screen)
Here you can see the high-fidelity prototype screen which I have derived from the pen and paper sketches. This screen will eventually resemble the final UI if no other changes are made.
Below you can find the High Fidelity UI
Here is the prototype : (Flow 1)
Here are the Figma file and assets:
What changes I have made
So the change I made is to add checkboxes against each item in the cart. As you can see above, there is a checkbox against each item and items which are selected are highlighted with a tick and vice versa.
How does it benefit the User?
Imagine you have a cart where you put all your items for purchase. Now, we’re going to introduce a handy feature: checkboxes. These checkboxes will appear next to each item in your cart, whether they are older items or new ones you want to add, like items A and B.
With these checkboxes, you have more control over the items in your cart. If you no longer want some of the older items, you can simply uncheck their checkboxes. This will remove them from your final selection. On the other hand, if you want to keep some of the older items in your cart while adding items A and B, you can easily select their checkboxes. This way, you have the flexibility to customize your cart according to your preferences.
By using the checkboxes, managing your cart becomes much more convenient and efficient. You can easily add or remove items with a simple click, ensuring that you have exactly what you want before proceeding to the checkout.
How does it benefit the business?
These changes will drastically improve the business metrics such as conversion rate, where the user is more likely to complete the purchase of items rather than drop off from the cart. Hence conversion rate will improve, which ultimately will aid the business overall.
SECTION 8
Usability Testing of the High Fidelity Prototype UI
After completing both low-fidelity and high-fidelity prototyping, I am now ready to gather valuable feedback from real users and utilize their insights to enhance the product. To accomplish this, I plan to engage with users on the street, presenting them with tasks to complete while interacting with my prototype.
Here, I am conducting my usability testing with 2 users.
As I present the prototype to users and gather their feedback, I am also keen on observing their behaviour and interactions. This observation allows me to gain deeper insights into how users are engaging with the design and provides valuable feedback to shape the final product.
SECTION 9
What I learned from the Usability Testing and how will I use it ?
I received many feedbacks and valuable information, on how to change the design and where the user is facing problems.
Key learnings from Users 1 & 2 :
- Users discovered that it took them a long time to unselect the items they didn’t want. This means that removing unwanted items from the selection was taking too much time for them. To make it better, we need to find a way to make the process of unselecting items faster and easier, so users don’t have to spend as much time on it.
- Some users needed extra time to understand how the design of the prototype worked. This tells us that the current design might have been a bit confusing for them. To improve this, we should simplify the design and make it easier for users to understand.
- Users expressed a desire to be able to unselect all the items they didn’t want at once. They wanted a way to quickly remove multiple items from their selection with just one action. By adding a feature that allows users to unselect all the items they don’t want at the same time, we can provide them with a convenient solution. This will save them time and effort, making it easier for them to manage their selections.
After gathering all the feedback, I redefined and redesigned the UI and made the following changes :
Here is the final prototype after Usability testing: (Flow 2)
and here is the Figma file, where you can see all the interactions and design structure:
Figma File:
So there are 3 pointers, that is,
1. What changes I have made
I made one major change to the previous high-fidelity prototype. One important addition is a button called “deselect and select all” in the cart section. This button allows users to easily remove or choose all the items in their cart at once.
Other than this new button, everything else in the prototype remains unchanged. Users will still see checkboxes next to each item in their cart, giving them the option to individually select or deselect specific items to provide added flexibility and freedom.
2. How does it benefit the User
The “deselect and select all” button simplifies the process of removing unwanted items or choosing all items in the cart. With a single click, users can now deselect all the items they don’t want or select all the items they want to purchase.
Because before the usability test, the user would have to deselect manually if there are multiple older items in the cart which they don't want. And it was time-consuming and not very efficient.
By including this button, users can save time and effort compared to individually deselecting or selecting each item. It provides a convenient way to modify the cart contents quickly, whether users want to remove multiple items or add all items to their purchase.
The “deselect and select all” button adds efficiency and simplicity to the selection process, ultimately streamlining the shopping journey. Also now the user doesn't have to feel anxious and confused while buying items when their cart is filled with older items. They can feel confident in using the app and have a sense of control and freedom in their user experience.
3. How does it benefit the business
The changes made, including the addition of a “deselect and select all” button in the cart section, will greatly improve the business’s conversion rate. This means there will be a higher chance of users purchasing items. The seamless and user-friendly cart experience reduces the likelihood of users abandoning their purchases. By reducing friction and providing a more convenient shopping experience, users will be more inclined to complete their purchases.
Furthermore, the changes ensure that the cart is always visible to users. This constant visibility serves as a reminder and motivates users to proceed with the items in their cart. In contrast, if items are saved for later, they are not consistently visible, and there is a higher chance of users forgetting about them. By always showing the cart, users are more likely to follow through with their purchase, resulting in increased conversion rates and business success.
SECTION 10
Conclusion and key learnings
I recently embarked on an inspiring two-week journey at Growth School, a program that has opened my eyes to a world of design principles and laws. Guided by the remarkable Anudeep Sir, the learning experience transcended the confines of traditional textbooks, embracing a refreshing non-textbook approach that made the concepts come alive.
We learned about different design principles like Jakob’s Law, Fitt’s Law, and the Doherty Threshold. We also learned about UI elements like icons, buttons, and spacing, which help make designs user-friendly. We studied Nielsen’s Heuristics Principles, which changed how I see products and how they work for users. We used special computer tools like Marvel and Figma to create different design prototypes. It was cool to see our ideas come to life on the screen. We even learned how to make things move with animations, which was really fun. Growth School was an amazing experience that made me better at design. I’m grateful for everything I learned and excited for what’s to come. Goodbye for now!
