ReAmazon

Another one of my ideas to "learn more about UX by doing" was to redesign a popular page: the Amazon product detail page.

Empathize

User Research

I conducted a survey in order to determine which areas to focus the redesign on. I picked major areas of the standard product detail page and asked for usability ratings. Whichever areas got the lowest ratings would be the ones I would focus on redesigning.

The research focused on a product that was pretty popular and universally appealing: a tablet. I also made sure it was an Amazon Fire tablet, as I expected Amazon to spend the most effort on the pages for their own products.

I posted this survey on my personal Facebook page and got nine responses.

Define

Research Insights

Survey questions

3. Please rate the overall ease of comparing this Fire 7 tablet's specifications to the specifications of other Fire tablets.
6. Please rate the overall ease of adding this tablet to your default Wish List.

Question 3 got two "2" ratings, and Question 6 is the only question to get a "1," so I focused on redesigning these areas: comparing product specs and adding products to a Wish List.

Select additional feedback

1. What is your initial impression upon seeing this page? What feelings does it evoke? Please use 1-3 adjectives.

"Helpful" "The page seems very busy, small font, and full of information." "Easy, simple, smooth" "techy, comprehensive, slightly cumbersome"

Optional: Comments or questions

"Probably all very easy for someone who is used to purchasing on Amazon but if someone has never used Amazon, may be another story for some questions."

"It's clear how to add to wishlist when you are reading reviews. A little less clear when I'm on the main page."

"Super busy pages. Having never shopped on Amazon before some tasks were hard, others seemed very simple."

"Battery would have been much much harder to find without CTRL+F. I also feel like "Add to wish list" should be up alongside "Add to Cart" and "Buy Now""

Ideate

Product Comparison

I was initially unsure as to how I would improve upon the table format Amazon already uses in comparing product specifications. My users didn't like it, but how could it be done better? I went back to the results of my user survey and saw a comment about "too much information" and "overwhelming," and I knew exactly what to do. Instead of providing users all the information they could possibly know, I wanted to design a dynamic filter that asked the user what information they WANTED to know.

I imagined that this component has a default state with nothing checked and no products displaying. The user then checks off which specifications they'd like to compare, clicks the CTA "Help Me Choose", and only then do the product cards load. I initially considered having the product cards regenerate as the user's selections changed, but didn't move forward as I expected there would be an impact to UX with slower internet speeds.

Add to Wishlist

Reimagining the "Add to list" functionality - as built into the checkout sidebar - was also hard at first glance. It's funny how some things become so ingrained that it is hard to imagine them any other way. I did, however, already know I was going to a) placeholder the rest of the page and b) redo the entire checkout sidebar, so I built the placeholder on the first 2/3 of the screen.

Next I took a hard look at the checkout sidebar - what is extraneous and can be removed? What are the main actions a user might want to take? I knew I could remove the add-on suggestions, warranty options, et cetera because those could easily be a step in the checkout flow. They didn't need to be in this sidebar. From there I determined three actions depending on the user's stage of the buyer's journey: buy immediately, add to a cart, or add to a list.

Amazon uses a few different CTA-style colors for their buttons (not really sure why) so I picked one button to highlight and figure that probably the best compromise between user needs and business requirements would be the "Add to Cart" button. I designed it so that this button and it's options would be open by default. However, if you clicked on "Add to List" it would expand its own options and  the "Add to Cart" section would collapse entirely. Then of course, I simplified a lot of the information left in the sidebar.

Iterate

Opportunities

To be expanded.

I thought about posting these wires to my users and ask for feedback for an iteration. One concern I have is that I allowed for anonymity, so I don't exactly know who all of my users are.