Re-Thinking Amazon’s Product Pages on the Web
What is the first thing that comes to your mind when you think of e-commerce? We all can safely guess that for most of you it’s Amazon that flashes though or the image of the richest man in the world.Photo by Morning Brew on UnsplashHi, Today I wish to share with you all my perspective on a very simple yet important aspect of any e-commerce site and take on it from a designer’s perspective on what must be changed/improved.Whenever, we get online to buy products, we head over to the online commerce site, click on the search and enter the thing we want. Then from the list of search results, we choose one item that is favourable to us and here we stop for a moment to go through it. And it’s here where all the magic happens. On the product pages.I’m from India. Amazon India and Flipkart (National e-commerce site) are two of the most famous online stores anyone in this country with 1.3 billion people will look forward to when making a purchase. However, there is a very strict contrast on how both the platforms approch the user. Now before I dig in into my views, I want you to take a look at the following two links in seperate browser tabs.MI Superbass Headphones — Product Page on Amazon IndiaMI Superbass Headphones — Product Page on FlipkartBoth the pages show the same product. But Flipkart clearly stands out in providing a better user experience. Please don’t get confused between experience and interface. I’m not talking about the color, font or layout, but the overall arrangement of information for the user to easily navigate and be attracted towards the product. Persnally to me and many others, we are more likely to buy the product from Flipkart. Here is the quick comparision image:Direct Comparision of Flipkart and Amazon’s Product PagesIf you are new to the field of UX, it might be a bit difficult to notice the experience pain points. Let me help you through. Before we dig deeper, I want to let know exactly why I am doing this anyway. And here is the outline of how we can approach the solution.OutlineWhy is this important?User Research FindingsHow well both the companies understood the userWireframing based on observationsFinal Mockup for a better UXSo, let’s dive in…Why is this important?Product pages by any means are easily the places where user spends the maximum amount of time and effort on an online store. Product Pages are the only part of the website that convert visitors into potential customers. Understanding the importance is thus very crucial in how we approach users on this page. For better inderstanding of how important the product pages are, visit this link where Racheal Jacobs of Big Commerce describes the examples and shows the best practises.Effective Ecommerce Product Page ExamplesUser Research is one of important and essential part of User Experience Design process. We can have poorly built webpages when proper user research is not done. Amazon is an international site. However, when they are focusing on people of India, they need to understand how different are they compared to others and thus how well we can polish the page for them.User Research FindingsI conducted some secondary research on this topic on what are most important things an average Indian looks upto when making an online purchase. For those who are not familiar with the term secondary research, it is the research in which you refer to the study conducted by other people in the same area.Secondary Research is essentially the collation or synthesis of already existing research data. Doing secondary research before any project is essential to gain valuable insights.To know more click here.For this exersice I limited myself to secondary research as it was becoming increasingly difficult to go out and do a primary research during COVID-19. However, I also interviewed some of my friends and family members on the experience they expect when they land on product pages and some other important questions.Here are some of the valuable insights I found from the study:Indian people prefer to see Price, Ratings & Offers immediately on the product page.There needs to be a simple way to check in the first place if the order will be deliverable to their location.The ratings should be clear and easy to see soon when a product is clicked upon.Should have the ability to add a product to favourites.Color selection must be visually easy to click upon and understand.When the page is scrolled down, the product’s image should be fixed on the left.These are small but some of the very valuable conclusions users made and getting them right seperates the good UX from the bad.How well both the companies understood the userA Bad Experience 👎Flipkart has almost all the needs discussed above, addressed. Just even without scrolling down we can clearly see the important aspects of the experience are present clearly in front of the user. However, what Flipkart doesn’t do well is the color choice. From a distance the color selection element looks same for all the colors.On the other hand, Amazon fails to address most of the user needs showing that a significant amount of User Research has not been done by the company in the Indian markets. The most annoying thing the users said about purchasing on Amazon is the checkout process. Although it is not the concern for us now, we still need to understand this. If a product is not deliverable to a person’s location, he/she won’t know that until the final checkout stage of the process on Amazon. The product’s color selction is also poor. However, people say Amazon has a lot of products compared to Flipkart and that’s keeping them glued to it.Both of them has their own ups and downs. But here, we are redesigning the Amazon’s product page.Wireframing based on observationsI took all the aspects into account and started off by making many wireframes with trail and error method. I also wanted the Amazon’s top nav bar to be clutter free and still fit in all the options it provides now.Here is what I came up with:This simple wireframe shows how I planned on keeping things simple and clutter free on the page. The menu button beside profile photo will contact all the controls hidden and still easy to access. The top nav bar has only a few important elements. The bar below the search contains essential Amazon services and product categories.I also wanted to remove the burger menu you see on the original Amazon website that consists of categories. It feels outdated. I though of incorporating it directly into search.You can download the Wireframe UI Kit I used here:Adobe Hand-drawn Wireframes UI Kit.Final Mockup for a better UXAnd here we are in the final stage. There is a lot of process between Wireframes stage and this one. However, since we are only focusing on single page, there is not a lot to describe. The critical part is where we must implement changes that we thought of while still keeping the Amazon’s Style guide.Here is my final product page mockup:Observe how different it is compared to the original site. The Wireframe actually helped a lot for the skeleton of the page.Key Changes that people will love:Simple and Clutter free Navigation and Search fields.Visually appealing product categories on top.The main page focuses on the product.Easy to Bookmark and add the product as gift with simple buttons on top of product image.The quantity of product can be easily increased with “+” button rather than the drop down in original site which is pretty outdated.The product color selection is easy and simple.The line dividing the product images and details gives a clear view.All the details like price, description, specs, return policy are clearly mentioned in a visually attractive manner.To the far right, user can easily check the delivery availability to his location by entering the area PIN Code.Finally, Amazon can atake advantage over other platforms by adding it’s Alexa into the picture which can help users know more about the product, seller and can checkout with voice.And so yeah, that’s it for now on how user research and can help make some of the most important pages in the site very valuable and turn visitors into customers.What are your comments? You too might have some sights you think are poor with UX. Try remaking them by conducting good user research and you will be astonished to see the results.Hope you liked the article 🥰 !!!Re-Thinking Amazon’s Product Pages on the Web was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.