"Why do you want to redesign the Amazon website? It's working very well." One of our interviewees was uncertain about the necessity of redesigning a well-known giant in the e-commerce world. After a few questions and usability testing, we agreed. It could work much better.

1. PREPARATION AND SCOPE

Type of project: Group project
Role: UX Designer
Tools:
  • Sketch
  • Adobe Illustrator
  • Adobe Photoshop
  • InVision
Tasks:
  • interviews
  • persona
  • user journey map
  • user flow
  • wireframing
  • prototyping
  • user testing

2. RESEARCH

Redesign Goals

Responsive image
Improve "Account Set Up" Flow
Responsive image
Add "Products to Cart" Flow
Responsive image
Show "Error in Payout" Flow

SWOT Analysis

Analysis of Current Amazon Website

1
Navigation bar is very cluttered. There are many categories which many customers do not use at all.
2
The drop down menu is one of the examples of poor information architecture. Only two sections with many links.
I don't like how long Amazon’s account current drop down menu is and would never go through all the content. I'd prefer more sections to organize information on current Amazon website.
1
Filters on the side on current amazon website are “a lot and overwhelming”. User needs to know what is hidden behind each of the filters name.
2
After choosing each filter, the page is refined, but if the results don't match users' expectations s/he is forced to go back and forth.
I don't like how much scrolling is involved on the side filters panel of the current Amazon website. I am not able to refine my search easily and do not know which category I am in on Amazon. The most frustrating part is that I am unsure if all the filters I applied changed my results.

Early Stage Ideas

After inspecting the condition of current Amazon website and creating the SWOT Analysis, my group ran an initial brainstorming session. It helped us better understand what direction we wanted to go, form some early stage ideas and prepare questions for our surveys.
During a brainstorming session we came up with some ideas that could help improve user experience:
  • personalizing account
  • adding more local store feeling to Amazon website
  • supporting local/small businesses
  • building network/community within Amazon to let the users see the reviews posted by people they know or influencers they follow instead of reading random feedback

Surveys

Initial interviews

During our initial interviews (6 people) we were able to find following insights:

  • Clicking "Prime / 1-Day" checkbox doesn’t properly filter products available for the next day
  • The need to remember to click "1-Day Shipping" option at checkout page is frustrating
  • Time-consuming to type the name of specific products in the search bar (lack of img search)
  • Many people were not aware of hidden features within users' account
  • Not intuitive filters / Too many options to select from
  • Items on "Wishlist" don’t have the priority feature
  • Help / Support - almost impossible to find contact information
  • Orders / Subscriptions - they do not appear in chronological order
  • Products sold by small local businesses are not visible
  • Interviewees were concerned about quality of the products
  • Some people don’t trust third-party sellers

Whiteboarding and Brainstorming

After thorough analysis of the current user flow and receiving feedback from the interviewees, we began brainstorming and thinking about potential solutions:

3. INFORMATION SYNTHESIS

Main Goals for Redesign:

Responsive image

Proto Personas

User Persona

We created our persona based on in-depth research and initial interviews with Amazon customers. Our persona reflects the behaviors and motivations of the users we were interviewing.

Empathy Map

The next deliverable which gave us a deep understanding of social behavior of our targeted audience was the empathy map. We observed our interviewees during the initial meeting, listened to their responses, and noticed their reactions. It helped us a lot with creating a map that reflects the needs and frustrations of Amazon's clients.

4. CONCEPTS GENERATION

User Journey Map

Whiteboarding and creating a user journey map helped us with identifying the painful parts of the process and thinking about the opportunities. It was crucial for us to envision the whole process, to see where exactly the problem starts, in which stage of the process, and identify the best way to address the user needs.

Findings and Ideas for Solving the Problem

Responsive image
Calendar Feature
Make sure user is receiving a curated list of products which will be available on a desired day
Responsive image
Quick Filters (icons)
Icons which represent different features of a specific product, work as quick filters, without using text descriptions
Responsive image
Decluttered Interface
Interface free of distractions that could pull the user away from shopping and checking out
Responsive image
Help / Support
Create a designated icon in the nav bar to let users find it easier
Wishlist
Introduce the feature of prioritizing the items on Wishlist to let others know what we want to receive in order of importance/most desirable
Responsive image
Subscriptions & Orders
Place the subscriptions and orders in chronological order - the most recent one at the top of the page
Responsive image
Highlighting features
Make icons (like IMG search) more highlighted, intuitive, easy to find; add label
Responsive image
Small and local businesses
Support small businesses and show their products as an alternative; add tab at product page
Responsive image

5. INTERACTION VISUALIZATION

After creating maps and graphs and thinking through our strategy, it was time to start putting our ideas in the shapes of buttons, icons and other UI elements and create the first wireframes.

Low-Fidelity Paper Wireframes

Wireframes - Version A

Users who we tested Wireframe A with:
  • were confused by Sign Up / Sign In not being in Nav bar
  • liked the layout of the wireframe more than current Amazon website
  • would not want to prioritize importance on the Wishlist page and would probably not use the feature even with iterations
  • foresaw it being difficult using "Image Search" on desktop
  • would like more category suggestions for items that they were not familiar with
  • said that filters helped with categories they were not familiar with
  • would like to know what filters were applied to help refine search
  • would prefer an “Advanced” filter option, if they needed to refine search more
  • pointed that "Add to Cart" button was not clear
  • noticed that "Local/Small Business Seller" button was too large and took hierarchy
  • would only like to see if there is an option to buy a product locally later in the process (ie. before checkout, but not on product page)
  • pointed that having all the information on one page (cart contents, delivery address, payment info, billing address, etc.) would be too busy
  • wanted breadcrumbs
  • highlighted that the "Security" icon was too big and distracting

Wireframes - Version B

Users who we tested Wireframe B with:
  • were more likely to sign up after they invested some time (e.g. on research, etc.)
  • were not interested in the features like Amazon Spark (they took too much space)
  • wanted less clutter on filter side panel
  • liked less clutter on "Search Results" page
  • would like more interactive search bar - getting better suggestions in terms of category
  • wanted to know in which category they were at the moment
  • pointed that search bar needed to be bigger
  • wanted to have more information about the product at product page
  • would never use metrics like 391 out of 420 ppl to help make their mind
  • liked cart and checkout pages - they made sense to them
  • didn’t need an img search on their desktop
Responsive image
Responsive image

Comparison Between Version A and Version B

In the version A users liked
  • the search feature - top icons
  • visual aesthetics of layout - was cleaner
In the version B users preferred
  • sign up process - was very easy
  • functionality ( filtering, checkout process, components)

Insights

I'd like more category suggestions for items that I am not familiar with. It would be great if less scrolling is involved (more condensed and concise information).
I wouldn’t press sign up button. I will probably first find product and then sign up. Users are more likely to sign up after they invested some time e.g. on research etc.

6. IDEATION

Style Guide

High-Fidelity Prototype

Responsive image Responsive image
1
Homepage with clean and decluttered interface. Nav Bar containing only most important categories.
2
Your account tab with drop down menu divided into sections
3
Distinguished 'Lists' tab where user can easily find desired subcategories
4
Huge search bar with adequate categories suggestions
5
Results page where user can select preferable date of delivery and use quick filters
6
Results page with easy to modify view of the results
7
Product page with an accordion - product description
8
Product page where reviews filters are utilized
9
Product page with uncovered product description accordion
10
Cart page with minimalistic design, and 'return to shopping' cta
11
Screens with two call to action buttons and summary of the order
12
Short & sweet screen with 'create an account' form
13
Checkout page 1/3 with shipping details
14
Checkout page 2/3 showing payment method
15
Checkout page 2/3 with useful checkbox
16
Checkout page 2/3 showing error message
17
Checkout page 3/3 with 'place order' cta and confirmation
High-fidelity prototype was created after couple of iterations. We utilized users feedback and changed the parts in the previous versions of our wireframes, which weren’t intuitive / effective enough. In the final version of the prototype we wanted to make sure that users are not taking any unnecessary steps towards checking out and placing the order.

7. TESTING

Usability Testing

After utilizing all of the findings from A/B testing and creating screens for high-fidelity prototypes, we tested them to make sure that user flows are seamless and users' needs are addressed adequately.
Responsive image
“All of the filters on the prototype seem to be applicable and make sense. It looks pretty streamline. I like it”

8. REFINING AND REPEATING

Conclusions

Amazon Redesign project was a huge learning for me. I learned a lot about conducting interviews and usability testings but also expanded my knowledge in the area of e-commerce industry. One of the most important things I discovered was to be customer-centric in my redesign approach, many times ask "Why" and don't necessarily trust my gut. I've also learned that testing everything helped us a lot with making sure that our redesign had an optimal impact not only on business but also on customer experience.