Amazon Visual Redesign

Project Intro

Amazon is an immensely popular site and has no shortage of users, but I took to critically analyze what could be improved to support and streamline the average user’s habits and decisions. I present my solutions in a redesign.

The Problem

As a user of Amazon myself, I started out by identifying the problems I often ran into while trying to buy from the e-commerce site. I then observed the obstacles my friends, who all use Amazon at a low to moderate frequency, ran into while using the site. I used this information to consolidate and determine the pain points I would focus on in my redesign.
I decided to focus on the following points:

1) The recommendations on the homepage are not always that relevant.
2) The navigation is cluttered and repetitive.
3) The product information page can get crowded and distracting.

The Process

A main feature of Amazon is its recommendations and advertisement of its own or sponsored products. While it is effective in helping buyers' decisions, it easily gets distracting and makes each page bloated with information. Throughout my redesign, I focused on the balance between a clean, streamlined user flow and presenting purchase opportunities to the user.
I started out by exploring the navigation and identifying the features that users seemed to use and care about the most. I then sketched out different layouts for the homepage, account page, and navigation bar.

The Solution

Below are my final designs. I go into detail about each section I reimagined below.

Home Page

Since the most used feature of Amazon is the search bar, I’ve set it right in the center of the home page.

Aside from the search bar, I decided that the following three features were equally important and deserved a place on the home page.
1) Amazon products. A key part of the Amazon brand is its own products. Users would not discover them if they were advertised any lower on the page.
2) Buy It Again suggested products. Most people noted that they buy the same products repeatedly on Amazon, especially essentials and pantry products. While it “sometimes” shows up on the current home page, I’ve added it relatively high up on the page so that users who arrive to the site with a clear, simple goal in mind can easily accomplish it.
3) Recommendations. I’ve kept one of the most effective features on Amazon while cleaning up the layout and suggesting changing the products that are recommended. (I go into detail below.)

Better Recommendations

Currently, products are recommended by the user browsing history, shopping trends, and seasonal events (ex: back to school supplies). While some seasonal occurrences are applicable to everyone (like Christmas and Halloween), I won’t be needing the wide-ruled composition notebook or the dorm-friendly bedside caddy that popped on my homepage a couple of days ago. I decided to forgo general recommendations in favor of a more personalized shopping experience.
The products that are recommended by browsing history and shopping trends seem to be all be products that serve the same function or may contain the same keywords. While this may work for books (it makes sense to recommend books with similar content), this doesn’t work quite as well for, say, essentials or healthcare products. I noticed that I was recommended 5 other brands of contact solution after ordering a box. I’m unlikely to want more different types of contact solution after successfully buying the brand I wanted.
My proposed solution is contextual recommendations. If an algorithm can be implemented to recognize groups of products in your browsing or shopping trends, products can be recommended based on inferences about your life activities, rather than individual products. For example, if you’ve been browsing through a couple of products associated with starting a garden, a variety of essential beginning garden supplies will be recommended.
In this solution, I also do away with the wording of “browsing history” and “shopping trends”, because the difference is not always clear, and use personalized wording instead, such as “Recommendations for Your New Garden” and “Recommendations for Your Skin.”

Navigation Bar

For the navigation bar, I decided to hide away less important navigation and pull out users navigated to the most under account settings: order history. I kept a Prime navigation to keep Prime benefits in the front of the user’s mind and to have easy access to view Prime options.

Search Page

Filter Bar

The current filter bar, although effective in allowing all filters to be discovered, is laid out in a vertical list without hierarchy and can be very tedious to read through. Some filters are checkboxes and some are buttons that navigate you away from the current page.
In my redesign, I decided to only show the most useful features such as price range and earliest delivery date horizontally at the top of the page, so filters can be made right away for a more accurate search. I hid filters that were more specific to the product.

Product Cards

There is no doubt that cards are a powerful and flexible layout solution. They organize information very neatly and intuitively and can form to the amount of information they hold. I thought they would be perfect for comparing products side by side, which the current vertical layout does not do well.

Product Detail Page

Currently, product detail pages are inundated with information. I wanted to cleanup the page without sacrificing the discoverability of any of the components.

All of the users I spoke to relied heavily on reviews in their purchasing decision. In fact, it was one of the first things they wanted to see about a product. Instead of scrolling past recommended products and a jumble of product specifications, I created a tab view so that users could see reviews with just one click. Users can toggle between details, reviews, and questions for a quick overview of the product.
Specifications and technical details are hidden from users who are taking a quick glance at the product and are viewable through an expandable button for users sticking around. Details are also collapsed to bring recommended products closer to the top of the page, a feature that is currently implemented that is very effective in continuing the user’s browsing journey and increasing the likelihood of purchasing more products.

Account Page

The most glaring thing that stood out about the current account page was the sheer amount of options that they user has to search through, which did not seemed to be organized hierarchically (besides ordering most used options at the top of the long lists). Looking to Airbnb for inspiration, I decided to put option categorizes horizontally at the top of the page and nest their corresponding sub-options vertically in sidebar fashion under each category. This presents the user with much less information to process at once and allows them to navigate step-by-step to the action they want to accomplish.

Designing for Screens

Throughout this redesign, through trial and error, I learned a lot about layout, font size, and contrast when designing for screens. Starting out, I would often get caught up designing in a zoomed view, deprived of context. Some of my initial designs looked like this, where text where would be too small or containers would look huge relative to the whole page:

I learned that making visual design choices for the bigger picture first before diving into the details is super useful and should always be exercised.

Thoughts for the Future

This was a very valuable project to work on. It allowed me to critique an existing product both visually and in terms of user experience. I was urged to formulate really fundamental questions for design such as “Why does this look the way it does?”, “Why are these laid out like this?”, and “What is the purpose of this function?”. These questions will be essential when designing my own projects and will encourage better design practices within myself.