Recrafting a more seamless venture for online shopping

UI/UX Design

View Web Prototype

View App Prototype

Project

UX/UI Design, Prototyping

Tools

Figma

Role

Design, Prototyping

Duration

On & Off for Six Months (2024)

Online shopping has become the norm, and almost all stores have moved online. However, Amazon is lagging in one key area – easy-to-use design.

Intro

📋 Overview

Amazon is a powerhouse in online shopping and profit. But many people hate their online shopping experience. Many users consistently get frustrated because it is overwhelming, cluttered, and hard to follow. It’s as if Amazon is shouting, “If it ain’t broke, don’t fix it.”

In terms of UI, Amazon is years behind its competitors, and many other online stores continue to advance. So, how can we get Amazon’s design mojo back?

😣 Key Problem

Amazon’s current design is simply overwhelming and not engaging. Even though they give me great recommendations, they are either hard to find or heavily repetitive. Furthermore, the app and web experiences are not cohesive with one another. They both feel like different products from different brands.

From the people I asked about their feelings on Amazon’s website, they had a few things to say:

🙂‍↔️

“Yeah, I don’t even look at the reviews anymore, it's so hard to find them. I tend to just trust my gut”

Person 1

“Painfully, I already know what Amazon looks like and it hurts. I just search for what I need and get out. Oh and deals sometimes.”

Person 2

🥲

😒

Person 3

“It’s so blocky. I don’t even pay attention to the homepage anymore, to be honest.”

👀

How do I make Amazon’s experience visually elegant taking into account current trends, while remaining simple and cohesive between both web and app?

My Question

🥅

My Goal

Basically to figure out an answer to my question through trial and error, lol.

🔍 Inital Findings

The first task was to review and compare Amazon’s current shopping experience on the Web and the App by logging differences, inconsistencies, and opportunities for improvement.

In review, I focused my attention on ten pages: Homepage, Search Results, Product Overview, Cart, Checkout, Confirmation, Favorites, Orders, and Account. Below are some of the notes captured for each key screen:

🎨 Design System

The next important step was to create a design system to maintain visual consistency across both platforms. And, also so that I don’t slip up. Because, if I did not make it, this project would have been all over the place and not even on my portfolio for the public to see.

🛒 Amazon 2.0

After evaluating my findings, gathering inspiration, and fleshing out the design system, a new version of Amazon was born. Amazon 2.0 if you will.

View Web Prototype

View App Prototype

🏠 Homepage

The homepage welcomes the user with a new clean and easy-to-understand navigation. It is simplified, surfacing the important key locations of the site using straightforward icons. Users can look up categories, view their favorites, chat with Amazon’s AI assistant Rufus, and check their top deals.

Users can also pick up where they left off, view top deals, and picks that are based on their browsing history.

🕵️‍♂️ Search Results

Once completing a search, the user will be met with the Search Results page. Users can filter and sort their search, favorite items, and view product deals.

They can continue their search by browsing related search options or discovering more.

📑 Product Overview

Selecting a product will take the user to the Product Overview page. Here the user can gain all the details needed regarding a product. The user can browse through pictures and select their desired colors, styles, etc. of the product to get ready to add it to their cart.

The user can also access and read the product reviews in a clean easy-to-navigate view They can also load more if they want to read ahead. Lastly, a Similar Items section allows users to continue their search even further to find their ideal product.

🛒 Cart

Once items have been applied to the cart, users can view the items, remove them, save them for later, add them to their favorites, or add them as a gift. They can also view items they previously saved for later, previous purchases, and a few of their recent favorites.

Once set, users can view their order summary to head to the Checkout page to complete their purchase.

💸 Checkout

On the Checkout page, users are met with a mini preview of their cart. Here, they still have the option to remove or change the quality of an item in their cart.

Like any other checkout, users can select their preferred shipping address, payment method, and delivery option. They can also add a discount code if applicable. Once ready, users can place their order.

✅ Confirmation

After placing an order, the user is met with a Thank You and an overview of their purchase. They will also be notified that a confirmation message will be sent to their email.

At the bottom of the page, the user can either review their order or continue shopping, which will take them back to the Homepage.

❤️ Favorites & Lists

Upon selecting the heart in the top navigation, users are taken to the Favorites page. Here users can review all of their created lists (or create a new one) and view their most recent favorites.

Users can also view related searches based on their favorites to prompt a new search experience. Users can explore similar products based on their favorites as well.

When selecting a list from the Favorites page, users are taken to the List page. Users can view all of the favorite products they added to their list.

Users can search the list, sort, change its layout, invite others, share the list, and more.

👤 Your Account & Your Orders

Users can access their profile by selecting their name from the Avatar icon in the top navigation. Users can make updates to their profile such as changing their picture, name, gender, date of birth, etc.

A side navigation is also displayed for users to access other areas of their account.

When reviewing orders, users can search, sort their list, and use the tabs to narrow down their list. Users can also track progress on their order, view items, buy them again, track packages, and cancel at any time.