Taylor Lee

Jan 19, 2021

6 min read

The Task Flows and Design Patterns used on the most Popular E-commerce site

As a leading e-commerce website, Amazon has been able to provide unbeatable convenience and price that keeps users engaged. It is unlikely that someone has not shopped at Amazon before, or have at least heard about it and know what it is. It’s quite amazing that what started off as a small, online bookstore has turned into one of the largest, leading competitors in online shopping today.

Like most people, I have been stuck at home over the past few months due to the pandemic, not being able to go to my local stores to shop because we are in lockdown, or too scared to go out and risk getting sick. I have found myself turning to Amazon more than I ever have, as I can find almost anything I need on the site, at an affordable price. Shopping on the site is even more desirable with their Amazon prime subscription, allowing for free, two-day delivery on most items.

Since I have become so familiar with the website, I thought that I would break down the typical task flow that I follow when shopping on the site, and the common patterns that I have noticed. I believe that the careful consideration that Amazon puts in to designing for their users, and giving them experiences that they are familiar with, is what helps make such an easy, enjoyable experience and a loyal customer base.

Task Flow: shopping for a product

I reflected on my own experience when using the Amazon website, and the typical steps that I take when trying to purchase a product. When shopping on Amazon, I often have something in mind that I’m looking for, but I may not be exactly sure about the brand or style that I want. This is why I really value the search bar that is available right at the top of the page, as I know that Amazon has a lot of products that they offer, and this can easily allow me to search what I’m looking for.

When searching, a lot of options usually come up which can sometimes be overwhelming. However, as a buyer, I really value how Amazon tells me which items are most popular, or “Amazon’s choice”. I also read further into the descriptions of the product, and the reviews.

Progress bar during check-out process

After this, I am usually convinced if I want to buy the product or not. Amazon’s checkout process is very seamless, even providing a step by step process and progress bar so that you can see where you are in the checkout process. Since I have an account already, my personal information like the delivery address and billing information are already saved, so I could check out in a matter of a couple of minutes. Talk about efficiency! It is hard to convince myself to go to a store, line up, and deal with crowds of people, when I can easily order what I want with a few clicks on my mouse, and it will arrive at my doorstep in the next few days.

Typical task flow when buying a product on Amazon

As a user trying to complete a task, I appreciate how Amazon provides a straight-forward, easy to use, and familiar process of what I am used to.

Common Design Patterns

As I started to notice common patterns that Amazon uses in their design, I realized that a lot of these are similar to other e-commerce sites that I have used. I was able to reflect on my observations, and why I think these patterns effectively make the experience better.

Search bar

First of all, the placement of the search bar in the navigation bar is very helpful as this is where you would normally look when arriving to a website. The size of it is large, which seems a bit unusual for most search bars, and it is placed right in the middle of the page. I think this is done to emphasize the importance of their search feature, as Amazon has a lot to offer, and as a service they want to be able to help users find what they are looking for.

An example of Amazon’s search suggestions

As the user starts typing in the search bar, suggestions appear below, which reminds me of Google’s search bar. This saves time from having to type in everything, and also helps when you don’t know exactly what you are looking for. For example, if you don’t know the exact name of something but you might know how to describe it, then this search dropdown may help provide you with a name for it.

Below are a few patterns that I’ve noticed to be common on a lot of e-commerce websites, and that I think Amazon did really well in keeping this consistent.

Shopping Cart

Amazon’s shopping cart is placed in the top right corner of the page, where a lot of people are used to looking for it when they are shopping online. It is helpful to use a pattern that users are familiar with, since they will know where to go to access their cart when they are finished shopping.

Additionally, this idea of a shopping cart almost mimics the experience and shopping pattern that someone would have when they are shopping in-store. For example, when shopping in a grocery store, a lot of users would place the items that they are planning to buy in a shopping cart or bag, and this is what they bring with them to the checkout when they are ready to leave.

Product Page

On the product page, I noticed another familiar pattern where the image of the product is usually aligned to the left side of the page, with the product details and “add to cart” option on the right. They also provide reviews which are located further down the page. A lot of this information is what you would typically find on any product page when shopping online, as these are often items that people would use to evaluate their purchase decision.

image on the left, details on the right

Search Results

Like many e-commerce websites, the search results page is organized into cards. This provides a very organized and easy way to view many different options at once.

Search results page

Also, there is usually a filter button located near the top right corner of the search results page, that allows users to change how they view their results. Users can visualize how things are organized, for example, if the user values low prices, then they can organize the content from lowest price to highest, and then they know where to look on the page to find the most affordable item.

Overall, I think that Amazon’s focus on the flow that user’s take to complete a task, as well as their use of common design patterns for e-commerce sites, is what helps make it so appealing to users. From analyzing the site in this reflection, I noticed how much Amazon focuses on their search feature, as one of the main features on their website. The patterns that Amazon uses were not uncommon to what I have seen on other e-commerce websites, but this is okay because over time, design patterns become a part of user expectations.