Redesigning Amazon

Categories Web Design
redesigning-amazon-banner

This is a guest post from Maurice Kindermann, a web developer and designer from Kintek.com.au.

I think we can all agree Amazon.com is a pretty uninspiring website, no revelation there. They were once known for pioneering much of what is now referred to as ‘standards’ in ecommerce. These days, the online giant is looking a little worse for wear. Personally, I’ve been avoiding the website for years because of how unappealing I find it, so when I recently went to buy a Kindle I was not surprised to learn of some major fragmentation and usability problems.

View Amazon Redesign
View original Kindle page   |   Original Post

Brief History

Let me back up a bit, back in the 90’s US websites were notorious for providing very limited or no shipping options to international customers. Even today, American websites that do offer international shipping generally have bloated or unreasonable pricing. Take one look at eBay and you’ll see what I mean. I’m a massive eBay user, and if you live outside of America you may have noticed other countries (especially the UK) are offering very cheap or even free shipping. Given America’s current economic climate, I think it’s extremely important that large corporations like Amazon don’t shaft their international buyers by treating them like second class citizens. If they keep doing an average job, someone will come along with an above average solution and Amazon will be the next Yahoo… There, I said it!

Before I started scrutinizing the Amazon website, I did some research and found a couple of interesting articles. Econsultancy wrote Amazon relying on brand creditibilty instead of good usability. It compares some key usability aspects between Amazon.co.uk and The Book Repository UK. SlashDot also recently reported that Amazon has Tonnes of Fake Reviews.

Amazon’s current design

I own two 22″ monitors that sit side by side. Although I’m not the norm, this makes reading any content on Amazon (or any fluid website, WordPress admin panel included!) a painful experience. Widescreen cinema was invented for the film industry because our eyes move left to right faster than they do up and down, and this causes less eye strain. With this sort of logic you might think wider websites would be easier to read. Well, books are vertical for a reason, and it’s been shown that the ideal paragraph length is between 40 and 60 characters (depending on where you look).

With that in mind you can see what Amazon.com looks like on my monitor followed by what it would look like with two lines of code to give it a max width.

The Code:

body{ max-width:1200px; margin:auto;}

Before:

After:

Fragmentation

Nothing is worse. The only discernible difference between the Australian (international) and US version of the Kindle product page is the shipping options and the URL. Technically speaking, there’s no reason why these pages couldn’t be combined to give customers a streamlined buying experience. This was one of the main inspirations behind my redesign and what I tried to illustrate. You’ll see below the steps involved in adding a product to your cart. Personally I think this is unacceptable.

Content is king, right?

Content certainly is king, but it’s important to restrict the amount of content per page. I did a quick test by copying and pasting the entire Kindle product page into Microsoft Word, and you might fall off your chair at the results. 62 pages, 11,832 words. Obviously Amazon want to make sure you know exactly what you’re buying, but it needs a bit more management. This is what I’ve demonstrated in my design with the “Reviews” section. I’ve turned two massive sections on the page into a humble slideshow. Here is the before and after:

Ending thoughts

The current Amazon design was implemented back in September of 2007. A lot has happened in the design industry since then, and it’s about time Amazon picked up its game. I’d love to hear what other people think of the Amazon website, especially regular and international buyers.

If you’re interested in reading the full article which details the process and terrible international usability I documented when buying the Kindle, it can be found here.

Copyright © 2010 Maurice Kindermann

  • My mother shops at Amazon, and she’s 61. She doesn’t trust online banking, shopping at other websites, or Facebook, but she trusts Amazon. A drastic redesign would change that.

    With Amazon and its simple look being the most globally recognized online marketplace and selling 158 items per second globally I doubt the people in charge of the purse strings at Amazon are very excited about doing a drastic redesign and alienating their huge user base.

    http://techcrunch.com/2010/12/27/on-november-29-amazon-sold-158-items-per-second-13-7-million-in-total

    As swell as it would be to have js tabs for information and other visual goodies, just adding them for the sake of design is a mistake- right now anyone can go and find out everything they need about a product on one page (without clicking on tabs in the middle of the page, which would confuse someone like my Mother) so they can make an informed buying decision and they love it.

    Redesigns for the hell of it are always a mistake, more so with a globally recognized, massively successful store where people want to trust and know what to expect

    • Before I answer anything, I just want to say this design was a bit of fun that was fueled by my bad experience. I realize it’s a drastic change and I don’t expect Amazon to adopt it in any way, shape or form.

      @Chance

      I agree that Amazon changing what they do or how they do it could be a major step back, however I disagree that just because Amazon have it, means it’s right. Theres always room for improvement, and since this design was implemented back in 2007 it’s probably time for a face lift. I mean lefts face it, 3 years in the web industry is a lifetime. Facebook and Google tweak their interfaces all the time.

  • bla bla

    hm…

    I agree with most but not the logo.

    Amazon logo is one of the most inspiring logo ever.

    the logo contain A to Z from AmaZon, well literally everything available on amazon, and the arrow itself point from A to Z but with hidden smile.

    • @bla bla

      Well I didn’t actually change the logo, I just made the rollover effect a house to indicate ‘home’. I can’t say I’ve ever thought about the A-Z aspect, but I’ve certainly noticed the smile. Very clever, thanks for your post!

  • Firstly, great article (this one and your original) Maurice, I really appreciate the time and background you put into the articles and the redesign.

    Although I do believe that aesthetically your design is FAR superior to Amazon’s current design, I have to agree with Chance on the fact that lot’s of our parents generations that are starting to trust online stores, finally trust Amazon to do a lot of their shopping. A redesign would only confuse most people.

    Which is why I think a couple smaller periodic changes, could benefit Amazon on a larger scale. Even just implementing the set width and changing up the reviews section a little bit; could make a great improvement!

    • Hi Lee, glad you liked it :)

      I fully agree with your ideas on ‘periodic changes’, drastically changing anything on their website would benefit no one, but slowly molding it for the better would be a great step forward.

      Thanks so much for sharing.

  • i think old design was so super,i don’t much like this design,anyway its great effort!

  • Hey Magento (probably spam) themes,

    Would love to know which parts you didn’t like and why.

  • You have spent a lot of time on this, I give you that. However, have you realized, that your redesign is based only on your subjective experience? Do you really think you can design such enormous site without user research? Where are your low-fi prototypes that support your thinking during the redesign?

    Problems with your design:
    – header (1/4 of viewport, really?)
    – content (I can’t see any product related content on product page! Only blue box to buy the product, do you really think all customers go there to buy it?)
    – video (looks like banner to me)
    – layout (960px? What about responsiveness?)
    – many other…

    • Hey Martin,

      I appreciate your comments but it seems you’ve missed my point. I do not think what I’ve done is correct or should be used, I’m trying to demonstrate that the current amazon design is flawed and I’m giving my own personal idea’s for solving them.

      Unfortunately I’ve only had 2 or 3 international people comment on the subject, but they all said they had the same experience I had, which is unacceptable.

      I agree the header could and should be made smaller
      I don’t understand what you mean by you ‘can’t see any product related content’. Do you mean the content in the slide box?
      Don’t know what you mean about the video, I’ve just taken a print screen to save time
      As explained in the article, I chose 960px to demonstrate how a fixed width could cope with the Kindle product page

      Anyway thats all from me, thanks a lot for your thoughts!

  • Hi, I read about your redesign a while ago when it (originally) came out. I took a look and wrote my thoughts on Forrst – http://forr.st/~B3O – but I’ll sum up my thought here as well, since I’m quite curiuos if you have anything to add.

    In my opinion this Amazon design is worse than the original.

    There are few reasons. First and foremost it’s the width of the site. 960px? Like, really?! Even though the author talks about his huge monitor and how he hates super-wide Amazon, he doesn’t mind this tiny narrow noodle?

    Other thing – Amazon has originally a lot of content and text on the page? You know why? Because there is a space to be used. In the redesign, the content is cut to look like some promo page, just to fit in 960px wide prison.

    The quickly accessible useful information about a product are in extremely small amount and there are far too many text colors in the small area.

    Product image is placed to look like a banner (I almost overlooked it) and Shipping Info + Add Accessories + Buy Now have too much space compared to everything else.

    It’s like the author made the page with his decision already made to buy the Kindle and placed the elements there in a way he can easily buy it.

    Amazon has some difficulties, especially in their international order process (I know that well) but this demo isn’t solving almost any of those.

    • Hey Dalibor,

      Thanks for the comment, funnily enough I read your post on forrst when you posted it.

      I just want to reiterate that I don’t think my creation is the correct design for Amazon, and the main point of my article was to demonstrate the problems I found within it’s functionality rather than it’s design (more or less). The design was made as a little demo of what could be done with the content provided. I didn’t spend an amazing amount of time on it.

      I chose the 960 width to demonstrate what can be done with the content when constrained. Obviously Amazon wouldn’t do that, even though I think the BookDepository looks great at 1030px. Smashing Magazine just tweeted a really awesome example of a design using media queries to change the layout at 1200px, 990px, 760px, 480px and 320px. I also don’t think they should do that, but they need to update their design, even if it’s adding a dam max width (it’s not much to ask!). Maybe I’m just fussy but every time I open a web page and it’s a liquid design, baby Maurice cries. By the way, I liked the noodle reference, made me smile haha :)

      I enjoyed your point on the shipping information made specifically so I could buy a Kindle. It’s a valid point and to be honest, that’s pretty much exactly what happened (unintentionally). With a website like Amazon I can’t imagine how many variables and different types of products and product information there is. If I had a few spare months I might investigate it further, but the purpose of my design was to stir the pot and get someone to notice.

      I posted an update in my original article a few days ago with a response I received after emailing Jeff Bezos (Amazon ceo). It wasn’t from him nor was it all that riveting, but I was still happy to know someone there saw it, and hopefully more people will pass it around internally.

      Anyway, thanks for the brutal feedback, I love good criticism :). Till next time!

  • Well, if you do not think that your proposal is correct, why bother to email it directly to Jeff Bezos?

    ad product related content:

    I can’t see any Kindle specs, parametres, pictures, accessories etc. Also you left out nearly all social objects on the page (I suggest you read Joshua Porter’s Designing for the social web). Social features = reviews, comment reviews, customers who bought this also bought, … These features help to make authentic conversations on the product page!

    ad video

    I know it is only picture, but in reality it is video. In your example it looks like banner, so it is likely users will miss it.

    • Hi Martin,

      You’re still totally missing the point. All I want to do is show them that there are problems with the current Amazon website, not suggest they hire me as their web developer to design their entire site in my vision.

      Unfortunately I didn’t explain it in this post, but in my original article I said designing the entire page was too much work. Basically after I finished with the testimonials I realized I could spent days working on different elements, and I just don’t have the time.

  • First of all, I like your re-design, but I still prefer the old one. Amazon should thank for your effort on your proposal. However, the logo is very annoying and it keeps our eyes busy a little bit because I don’t know what you mean in this logo when the mouse hover.

    I don’t think you change the logo when mouse hover, then make the logo has no meaning and cannot pronounceable is a good idea.

    Anyway, I really like the color and the way you design the search field.

    Great job!

  • Sebastian

    your “review” section is not as easy to read as a lot of text; but it looks good, yes. who cares if it works ;)

    congratulations, you are a great 2.0 designer!

  • Sebastian

    “it’s been shown that the ideal paragraph length is between 40 and 60 characters (depending on where you look)”

    these are your words, and don’t apply to your “review” design wich is really hard to read. but it looks cool.

  • Sebastian

    Amazon doesn’t belong to “design industry”; they don’t care about tabs, javascript, hughe monitors… they just do the best to serve their clients needs. i’m shure it could be improved, but not in this way.

    And your post is not controversial, it’s just… wrong. You should redesign your site (really), and learn more before try with amazon.

    • Hi Sebastian, Thanks for your comments.

      Firstly, I think you should work on your own english before you start giving me tips, but thanks anyway :).

      Amazon doesn’t belong to “design industry”; they don’t care about tabs, javascript, hughe monitors

      I totally disagree, Amazon would care about all their customers. If they don’t care about people with 20inch+ monitors they’re idiots because as they become cheaper, more people will buy them, and in turn more people will find their website a pain in the ass to navigate. Saying they don’t “care about tabs and JavaScript” is very close minded. It doesn’t matter what language they use or what they do with it because usability is all about making their website as easy to navigate as possible with no specific training, and interaction and knowing how much information to show where is part of it.

      “it’s been shown that the ideal paragraph length is between 40 and 60 characters (depending on where you look)”

      these are your words, and don’t apply to your “review” design wich is really hard to read. but it looks cool.

      You said the paragraph length sentence doesn’t apply to the review, well it does, and it’s actually a very important point. Also, it’s not a review it’s a blog post describing the usability problems I found when using Amazon.com for the first time.

      You should redesign your site (really), and learn more before try with amazon.

      There’s no need for personal attacks, constructive criticism only please. I’m also not sure what “learn more before try with amazon” means.

      Thanks :)

  • Sebastian

    1. english is not my native languaje. i’m sorry.

    2. when i say “review” i mean the section you called like that in your redesign (tabs with a TOO wide text).

    3. obviously they care about all that thing you listed here (hughe screens, javascript, etc, etc, etc), but they are not a web design firm, they don’t follow trends and they shuden’t imitate the kind of design shown in cssmania.com

    4. there are no personal attacks; a little sarcastic may be ;) but always talking about design.

    5. “learn more” means exactly that; i like what you do to get noticed, but you should make it better, or try with things you could ACTUALLY IMPROVE. I think it’s too much for you right now.

    6. “using Amazon for the first time”? is that enought information to make decisions about a design? O.O

  • I agree that Amazon could use a much better design.

  • Scott

    Maurice, I think you’re underestimating the value of Amazon’s overstuffed product pages.

    Your beef seems to lie with a bad experience you had in the “choose shipping method” process of an order you placed.
    Your solution to your own frustration was to obliterate the product page and make the “purchase” and “shipping” buttons the focal point of the amazon experience.

    You are approaching the perceived design problem from completely the wrong angle.

    The amazon site is about shopping. It’s about comparing products, and finding what suits you (also it’s about making sure you’re looking at the right thing). This is why there are lengthy product reviews, product descriptions, technical specifications, and as was previously mentioned in the comments: related products. (customers who bought this also bought…)

    Choosing shipping and accessories is an END experience. These are the LAST steps in the shopping process once a customer has finalized their buying decisions. Here you’ve made them the primary focal point in the product page.

    I’m sorry guy, but this is a TERRIBLE design.

    Also, come to think of it… shipping preferences are generally a default in Amazon’s user account profiles anyway. This makes this redesign even sillier.

    • Hi Scott,
      I appreciate what you’re saying, but it’s more than just 1 bad shopping experience and the “choose shipping method”.

      Since this blog post, I’ve tried to purchase more items on Amazon. 4 out of 5 times I’ll get 3 or 4 pages into the ‘choose shipping’, ‘verify your order’, that whole process. I will then get to the final screen, and it tells me “these items cannot ship to your location.

      I was logged in the whole time as an Australian, and it took multiple screens until it notified me that it did not ship to my country. That’s my real beef, although I do think the design sucks and needs work, but the fact that they’re the biggest online shopping website in the world and they still treat international customers as second rate citizens is unacceptable.

      IMO.

  • Hey,

    First of all, great design mockup. :-) I really like some parts (plus the logo-on-hover change, nice idea).

    What bothers me tho is a couple things:

    1. I suppose you did the redesign with yourself as a client. It is a great design if you already know what Kindle is, have done some research etc (and are familiar with gadgets). A gray mr. Smith (no offence all Smiths) would prefer to have more information avalible as he doesn’t really know what the product is. Give users the ability to get most information from your product website, not google.

    2. (connected with 1st point) If you’re upgrading the design it’s a good idea to think about additional functionality (like for example compare to similiar products).

    3. The navigation is IMHO really good. The looks have changed, but it’s more readable now. Plus.

    4. As some commenters noticed with shipping information selection: I think it would be better to just post some standard price information (eg. US: 10usd, Worldwide: 50usd), rather than make the user choose his country everytime he wants a product.

    Anyway, nice redesign. Hope Amazon squeezes some ideas from it. :-) Cheers!
    v

  • Kyle

    The max-width change is a great suggestion, but I have to agree with Scott. As much as the Amazon product page could benefit from some improvements, this proposed redesign introduces many more issues.

  • I totally disagree, Amazon would care about all their customers. If they don’t care about people with 20inch+ monitors they’re idiots because as they become cheaper, more people will buy them, and in turn more people will find their website a pain in the ass to navigate. Saying they don’t “care about tabs and JavaScript” is very close minded. It doesn’t matter what language they use or what they do with it because usability is all about making their website as easy to navigate as possible with no specific training, and interaction and knowing how much information to show where is part of it.

    • This post is nearly 2 years old, and I still feel the same way. Try buying a Kindle in Australia and then tell me how easy Amazon is to use for International customers.

      I would say on at least 60% of products I try to buy, I get to the checkout screen only to be told it doesn’t ship to my country. No info on how to get such a product in my country, no pre-warning it doesn’t even through I was logged in at the time.

      Their latest design changes have all been fairly underwhelming lately too. It’s still full screen and a nightmare to read any text.

  • MC

    WOW,

    Terrible “re-design”.

    Uninspiring you say, I say its pleasant and clean. This design is so cluttered and cramped with way too much information with no concept of white space, which is what amazon current understands very well.

    Also a fixed width site for a amazon is just wrong.