Note: Design best viewed in Chrome, Firefox, Safari, IE8+

In the 90′s, it was common for America to ignore the rest of the world when it came to online shopping. Websites were often built with no overseas shipping options or very restrictive country and state drop downs. Nowadays major American chains are still treating overseas customers like 2nd class citizens.

Take one look at overseas shipping costs on any store and then go compare them with a quote from DHL. They are ludicrous. For a country like Australia which is currently at dollar parity with the United States, it’s hard to believe that we still get the short end of the stick every time.

All I can say is, in America’s current economic climate, turning away keen Australian customers is a pretty epic fail!

Wake up Amazon. If you don’t act soon you might be the next Yahoo. There… I said it.

Update: I emailed Jeff Bezos (Amazon CEO) for kicks, and received an email from an ‘Executive Customer Relations team’ member. It was better than the canned response I received from my normal complaint. The email is at the end of the article.

Update: I’ve added a list of all the designs I could find that Amazon has had throughout the last 15 years of it’s existence at the end of the article.

My thoughts on Amazon

I buy everything online. Electronics, clothes, presents, all of it. I usually start with eBay, and if I come out empty handed I’ll try and find an independent ecommerce website. This year, when I went to buy an Amazon kindle for my mother, I ran into some usability problems I thought the Amazon ecommerce giant wouldn’t have.

When I explained the situation at work my coworkers made a few good points. Most importantly, that Amazon really pioneered a lot of the current ‘ecommerce standards’. Their ‘related products’ is said to be one of the most powerful around, the way they sell new and used products from multiple online stores is quite remarkable, and the user collaboration in reviews and product content all adds up to some pretty impressive features, despite recent attention on SlashDot.org that Amazon has Tonnes of Fake Reviews.

The main reason I’ve avoided Amazon until now is because I find the website very unappealing, cluttered, the liquid layout on my 22 inch widescreen makes it look ghetto old and the huge amounts of information on every page make it cumbersome to navigate. I checked around to see if other people felt the same way and found this, Amazon relying on brand credibility instead of good usability. The article compares Amazon UK to The Book Depository UK. It shows some graphs comparing usability performance (source unknown) between the two on different sections of their websites, and then explains exactly which parts are lacking. I tend to agree with most of the points in the article, especially the “Shopping Basket” and “Checkout Web Forms”.

Thoughts on the current Amazon Website Design

I own two 22 inch monitors that sit side by side. Widescreens if not already, will soon be the majority of screen displays. It’s important that large websites with lots of content take this into consideration. Ironically, liquid layouts don’t help to make better use of this space in all cases. Google recently center aligned their website and gave it a maximum width of 1181px with the Google Instant addition.

Liquid layouts can work, but from what I’ve seen unless you use some sort of ‘fluid column’ system that automatically adjusts to your screen’s width (like Css Grid), things start looking messy. To be honest, Whirlpool is the only liquid layout I have seen that I like.

Update: 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. Source.

The ideal character length of a paragraph is around 40 – 50 characters. Below you can see what the amazon.com home screen looks like for me, followed by what it would look like with a max width of 1200px (the width I use on fluid designs), and center aligned.

Before:

After:

My Proposed Redesign

I wanted to move away from the liquid layout… at first I was going to do a 1200px max-width fluid layout, but then decided to take it to the next level and work on a 960px fixed width column workspace to show how the content area could be used. After all, there’s a whole new host of 960 sized displays on the market in the form of tablets and high resolution smart phones like the iphone 4. The main problem I ran into with this was the left hand menu. You’ll notice on product pages of Amazon.com the left hand menu is displayed when you hover over “Shop All Departments”. I personally am not a fan of structure changes between different areas of a website. The more seamless you make the experience, the easier you’ll make your website to navigate (to an extent). I decided to keep the functionality more or less the same as the current website.

With the rest of the web design you can see all I’ve done is hidden unnecessary or extra information, positioned elements to be a little more eye-catching, and improved the styling with a clean and modern look and feel fit for 2010. The fragmentation between the Amazon USA and ‘outside USA’ product pages should really be combined for a more user friendly experience. Who knows, Amazon may notice this post and take something positive away from it.

I chose to redesign the Kindle Product page for a couple of reasons:

  1. IT’S MASSIVE! I did a quick copy and paste into Microsoft Word and it was a staggering 62 pages long with 11,834 words. =|
  2. It was the first product I ever brought off Amazon, and I was left feeling somewhat frustrated it wasn’t more straight forward.
  3. I chose the ‘ship outside of USA’ page as I’m a Brisbane Web Designer in Australia.

I decided to specifically re-do the shipping, extras, buy, and the reviews sections. The rest of the content on the page could be cleaned up pretty easily with some tabs and image galleries.

Shipping

In the screenshot below you can see the steps you have to go through to eventually add the Kindle to your cart. This process isn’t awful I know, but I really think it can be cleaned up and streamlined a lot.

Reviews

For reasons unknown to me, Amazon have opted to include two separate sections for reviews, one at the top and one near the bottom of the page. These two sections have very similar and sometimes identical content, although the version at the bottom has logos. Reviews from major websites are obviously very important to showcase, but this section needed some TLC. Personally, when I see product reviews I only care about reading the ones from organisations I know of (which for me in this case was Engadget). I decided to combine this into 1 list, and then make them into a click-able slideshow.

Buying a Kindle, Computer Says No!

1. The first thing I did was try to access Amazon.com.au, which error’d out (hmm). So I went to Amazon.com, did a Ctrl+F for Kindle, and clicked the $139 version (the $189 verison funnily enough includes FREE 3G Wireless, but it’s $50 more?). Then I was presented with this page:

2. I clicked the Add to Cart button. I think I’ll make a quick note that the add to cart buttons use some sort of javascript code instead of being a href, so you cannot open your item added to a cart in a new tab. This goes against some usability guidelines where you should not replace the normal browser functionality of a link (like javascript links) where possible. The next page brought me to an “Added to Cart Screen”. From here I could edit my cart, proceed to checkout, and most importantly I had the option of adding many more recommended Amazon items, as seen below (funnily enough this screen has a max width):

3. So I proceeded to checkout. You’re then brought to a ‘sign in or make an account’ page (seen below). Personally I like being able to purchase an item without making an account on a website, or use something like Facebook login, but obviously websites generally want you to create a username and password so they can start sending you newsletters and so you can more easily purchase items in the future. I opted to create a new account, which brought me to a new screen where I had to add my name, re-enter my email address, and confirm a password.

4. Then you’re brought to the ‘enter shipping address’ page. Notice this page is not a fixed width anymore and the paragraphs are massive.

Enter your address & shipping details

5. So I entered in my details, picked Australia as my country, and was brought the a new page where I was told the Kindle doesn’t ship to my location. Awesome. The “Important Message” tells me I can buy the Kindle from the non-US kindle page. Now there are obvious reasons why this is not ideal. Having two pages for the same product, but one of those pages lets you ship outside of America? Surely they could combine the two into 1 page and save the hassle?

How many hurdles must I jump as a customer to buy something?As a web developer I am constantly encouraged by clients and marketers to reduce the barriers to entry for any online service or product purchase. If I didnt want the Kindle so badly, I probably would have given up by now. An online store should not rely purely on the fact that people want their products to sell them. Traditional commerce has taught us that buying environments are often more important than products. The best buying environments convert large amounts of upsells and impulse buys because they have been engineered to encourage purchasing and buyer comfort.

Your items can't be shipped to your location

6. On the non-US kindle page I was presented with an empty cart. Had I been looking for lots of items for Christmas this would have royally annoyed me, but lucky all I had to do was pick my country as Australia, and then add to cart. I then needed to sign in again before I could pay.

If you want a Kindle in America, go to http://www.amazon.com/dp/B002Y27P3M/ref=btech_kindle_wifi. If you want a Kindle in Australia, go to http://www.amazon.com/dp/B003DZ1Y8Q?country=AU

Conclusion

I guess to sum up on the usability aspect I have to say I’m disappointed with the process Amazon currently have in place. I can’t imagine what less capable people would do in this situation when presented with “we do not ship to your location”, I’m sure some would give up. The US and non-US verions of amazon should be combined into one body, or at the very least you should be given the option to ‘buy internationally’ on the US website.

Obviously this isn’t the worst experience I’ve had with an online shop, but considering the budget Amazon would spend on their website, I think they could not only do a lot better, but be the best.

Update: Menu Usability

Martin LeBlanc pointed out the menu I modeled off Amazon is not ideal for usability. You can see his image (left) as to why. Funnily enough when I was coming up with idea’s I actually put together the menu below (this image was scaled to fit inside this blog and obviously the text would be larger).

Here is a menu I really like: http://www.elon.edu/home/. Using something like this on Amazon would require some new categorization, but it would be a nice touch.

Update: Emailing Jeff Bezos

Dear Mr. Kindermann,


I’m Deborah Hankins of Amazon.com’s Executive Customer Relations team. Jeff Bezos received your email and asked me to respond on his behalf.


Thanks for sharing your thoughts on international shipping. We really value your input, and are always happy to hear our customers’ thoughts on how we can improve the services we offer. To ensure your idea’s reviewed, I’ve shared your suggestions with our transportation team for their consideration when planning future improvements.


Mr. Kindermann, thanks again for taking the time to provide this feedback to us.


Regards,


Deborah Hankins
Executive Customer Relations
Amazon.com
http://www.amazon.com

Update: Previous Amazon Designs

Amazon website in 1995

Amazon website in 1995

Amazon website in 1999

Amazon website 1999

Amazon website in 2000

Amazon website in 2000

Amazon website in 2001

Amazon website in 2001

Amazon website in 2002

Amazon website in 2002

Amazon website in 2004

Amazon website in 2004

Amazon website in 2007

Amazon website in 2007

Old Amazon website in 2008

Amazon website in 2008


  • http://www.mikearney.com Mike

    I like everything but the color scheme. It’s too close to Walmart!

    • http://kintek.com.au maurice

      Haha thanks for pointing that out Mike. I swear I have never seem the wallmart website before!

  • http://1mcreative.com Antoine Butler

    I appreciate the detail and reason behind the decisions made, though I’ll say at first glance (I saw the design before the write up) I had trouble identifying what the page was for. And couldn’t identify where I was on the site.

    What I mean is that i wasn’t sure I was on a product page, or some general landing page that happened to be promoting the Kindle device. The entire right side of the proposed design read to me like an aside or unrelated advertisement.

    Hopefully constructive criticism aside, overall it is much more readable and pleasant on the eyes that the current Amazon site. Also has the Amazon site always had a fluid width? That’s horrible. Your “add to cart” process is also well thought out. Well done.

    • http://kintek.com.au maurice

      Thanks Antoine. The design certainly isn’t perfect, but I appreciate your points and I’ll take them into account if people are interesting in seeing a redesign-redesign haha.

      As far as I know the amazon website has always had a fluid width. Their current Amazon design was implemented back in September of 2007.

      • http://1mcreative.com Antoine Butler

        Interesting, guess I keep my browser window from going full screen more often than I thought.

  • Sara R

    This was a really great, insightful read. I tend to forget about the international ship option, since I’m located in the US, and almost everything ships here free or cheaply. It was interesting to read about your obvious frustrations, and see where I too agreed with the flaws your corrected.

    Your redesign is smart, and I can only help that Amazon will take away something from the discussion. Thanks for sharing!

    • http://kintek.com.au maurice

      Hi Sarah, thanks so much. I hope other US website owners feel the same way as you!

  • http://erenemre.com Eren Emre

    Yet another “Oh I know better” redesign. Sorry but things don’t work like that.

    Why?

    First of all this product is not yours. You’re just a user who had some problems. You don’t know anything about what problems users are having on Amazon.com. You don’t know anything about Amazon’s A/B, usability and other tests. You don’t know anything about the legal requirements that Amazon has to follow. You have no data except your own experience.

    As far as I can see, your problems occur not because of the visual design but the user experience. So why do you redesign the whole web site just because you had problems with AU shipping?

    OK, there are some little stuff that I agree with you like why the texts on Amazon’s site are forever long? Also, I’m not saying that Amazon is the most usable site ever. Of course they have some problems but solving these problems does not require a complete redesign.

    Here are 3 big issues with your redesign:

    - It’s “too” beautiful. People shouldn’t notice your design, they should be able finish what they want to do and leave.
    - You removed lots of details that should have been on the page. That’s cheating. Not specifically for this product, but where are the technical details, product details, description and most importantly customer reviews? Come on, do you really think anyone will notice “7,342 Customer Reviews” in 11px font?
    - Let’s I have a small screen and I’m one of those users (http://cybernetnews.com/wp-content/uploads/2006/12/Firefox200/Fullscreen.jpg), how do you want me to see the Add to Cart button and buy the product? Really?

    This list can go forever because your design is wrong.

    So, to fix your “shipping” problem, here is what Amazon could have done:

    Instead of having two separate pages for Kindle, they could have just one. Yes, just like you said. But most probably they couldn’t do this for a reason (maybe legal stuff, maybe there are too many different variables that affect this shipment).

    Or maybe when you add the Kindle to your cart, it could have said “Hey bro, I see you’re in Australia. If you want this Kindle to be shipped to AU, then I have to take you x page bla bla” and it takes you there with a Kindle in your cart.

    Etc. There are many ways to solve this problem but adding a “1- Shipping Information” step to the page is not one of them.

    So, my advice is, design is not a child’s toy.

    • http://kintek.com.au maurice

      Thanks Eren, you seem very passionate about disliking what I’ve done and I’m not entirely sure why. I think it’s perfectly reasonable to demonstrate some short comings with well documented explanations. I don’t expect much to come out of the post, only to try show the big boys how I feel about their website.

      So why do you redesign the whole web site just because you had problems with AU shipping?

      Just to clarify I’m not sure if all international shipping options are as fragmented as the AU version, but if they are it’s not acceptiable.

      You removed lots of details that should have been on the page. That’s cheating. Not specifically for this product, but where are the technical details, product details, description and most importantly customer reviews? Come on, do you really think anyone will notice “7,342 Customer Reviews” in 11px font?

      As explained in the post I wanted to redesign the whole page, but it’s just much too long. If you go to the amazon Kindle page you’ll notice their current ’8000 reviews’ is at about 11px, so Amazon seem to think people will notice them and I did too. It’s not the text you want them to notice, but the stars.

      I agree with you that Amazon probably have 2 kindle pages for a reason, but who really knows… it could just be politics.

  • http://www.viktorix.com Viktor Nagornyy

    Saw this around Twitter and thought I leave my two cents.
    I like the the design, but its not an for an average lazy surfer.

    Your design requires waaaaay too many clicks to access information. Sure it’s nicely condensed, but people are lazy. Even me.

    I like current Amazon product page for the simple fact that I don’t have to click anything to read couple of reviews.

    In your design I need to click to see reviews, I need to click to see customer reviews, and cross-selling is non-existent.

    My biggest problem with it is having product image on the right side. Most of people in the world read from left to right, so having a pretty image on the left will help us get through the text on the right. Your design makes me want to read first, then see image… boooooring. I want to see what it looks, because most likely I already read the title and everything in the search results.

    Good try, but not feasible for converting visits to sales.

    • http://kintek.com.au maurice

      Thanks Viktor. I certainly agree that this would need many more weeks of work. I spent a grand total of about 3 – 4 hours putting this together (not including the blog post about it). It’s just meant to be a prototype demonstrating what can be done with the amount of text on Amazon.com. There are so many directions I could have gone with it, but I just choose one and stuck with it.

  • http://ryanscherf.net Ryan Scherf

    I really like what you’ve done by compressing unnecessary elements and presenting them in a more thought out way, however I think you missed the mark on a few design aspects (which may or may not have been the purpose of your post).

    I think one of the biggest shortfalls with Amazon’s site is white space (or lack thereof). There is no separation of content (whether with blank space or horizontal lines). I’m not sure you clearly addressed this problem (nor did you fix it in your redesign). The second biggest issue I see is the lack of consistency in their typography. I counted 5 different fonts & styles in use just on the first viewable portion of the page. Consistency would go a long way (not only with comparisons between multiple pages), but also the legibility of the site in general.

    And a last nit-picky item on your design, you should really reduce the size of the header. Everybody knows who Amazon is, so no need to devote 160 pixels to a huge logo/header.

    Overall, your case study has some decent ideas in terms of interaction design and information architecture. Nice job.

    • http://kintek.com.au maurice

      Hey Ryan, I totally agree with you about whitespace. This is one aspect I wanted to address more firmly, but it really requires far more time working on content and placement than I wanted to spend.

      I also agree I could have nailed down the fonts a bit better, from memory it’s a hybrid of Myrid Pro / Arial / and Georgia. Personally I would like to just use Georgia for headings and arial for the rest.

      I think I might reduce the size of the header now, it’s a very good point and currently takes up lot’s of valuable retail.

  • A Reader from the UK

    I’ve never had this problem with Amazon. Mind you, I’d never put two wide-screen monitors next to each other for fear of wearing out my neck rotation muscles.

    Oh well, each to their own opinion.

    BTW, where is Australia?

    BTW 2, the plural of
    “Kindle”
    is
    “Kindles”
    not
    “Kindle’s”
    … we each have out strengths and weaknesses. :-)

    (Funny thing, someone about to do some work for me was talking about the web site he’s recently had designed. His big complaint was that the web designer had ‘adjusted’ his text all over the place and lost meaning and removed important jargon in the process…)

    • http://kintek.com.au maurice

      Thanks UK reader. As a web developer I find it impossible to get any work done these days without 2 monitors. My monitors at work are 23inch haha!

      Thanks for the spelling correction, english wasn’t my best subject in school =)

  • Pingback: Propuesta de rediseño web de Amazon | sortega

  • Peter Daish

    You also have an idiosyncratic spelling of the word ‘sourced’. I may be old fashioned, but for me the quality of the written English is an important factor when I am assessing the worth of someone’s work. Quite apart from anything else, it provides a strong indicator of whether the proposer really cares about quality.

    • http://kintek.com.au maurice

      ..uhh thanks for the tip?

  • Evomedia

    There is nothing wrong with analyzing a website, even if its just for your own development, you make a few assumptions however and maybe miss some important points,

    What I’d say is that Amazon like many mega brands are a tricky proposition, I know I work as a web designer for another big brand…

    Its easy as a frustrated web designer to say this is better, but without understanding the full restrictions a site like amazon has, your free to make a nice clean design by removing bits, changing colour schemes etc…

    In the real world a redesign like this just isn’t as simple, firstly, sites like amazon are designed based on many factors… current brand guidelines, cross browser compatibility, the need to work with and without things like .js and jquery, restrictions of the templates, and the often headaches with the e-commerce system itself.

    Thats just to start, Amazon like Play or any number of other big ecommerce sites also are based on user data, thats come from endless A/B tests via things like optimost, eye tracking, user feedback, load times and implementing external services like anaylitics, google peerius, gomez, akamai etc.

    All that data tells Amazon how their site is performing, so any new design tends to not be about creating a clean design but about understanding the data… its about conversion rates and useability for a site site amazon… its easy to say this is better. But without a true test its more about personal design preference that actual useability.

    As such all designs are run via AB tests, if you clear your cookies on a site like PLAY you’ll often find that some elements on the page or even the whole layout may change, that’s because new designs are being tested and compared constantly, bottom line is what design elements sell best are the ones that are adopted. Its an evolution not a revolution…

    As a side note…
    Amazon doesn’t really have a full liquid layout, its fixed at a minimum 980px width with 3 columns, left, center and right. With the right and left columns align to the edges, A true liquid layout would resize the central column boxes to fill the space. A small point but worth mentioning… Also amazon is based on templates, so a one page design although nice to look at is more a discussion point than a serious design, once you’ve tried to implemenet a design across a 100 products, landing pages and reseller and info pages can you start to really understand any flaws in a design.

    So I fully agree that hiding content is a no no, there are thousands of resellers selling through amazon, so most pages are not actually selling amazon products as such, as a reseller you are required by law to provide the information, if would be almost impossible to selectively switch on and off information for the whole product range and some of it is a legal requirement.

    Not really a rant just a voice of experience in big ecommerce site design.

    • http://kintek.com.au maurice

      I totally agree, am I’m sure Amazon have done their homework in terms of A/B testing and analytical reporting. Good point about the fluid layout too, I’ll update the article. Honestly, I would be happy with amazon adding these 2 lines of code:

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

      You have to remember this mockup was thrown together in a couple of hours and I never had any intention of adopting this design into any live website. I also realize this is a single product template, and amazon could have tens or hundreds of them (I’m curious as to how many).

      I like your note about hiding content as well because originally I didn’t use the accordion. I thought there could be a legal reasons involved with content, but in the 11th hour I decided to just do whatever I wanted =). Thanks for your thoughts!

  • Simon

    The sheer amount of information you’ve removed is ridiculous, you pretty much ignored or hid all the product information, user feedback, Customers recommendations, technical information, related products and social network links… in fact the only thing you’ve concentrated on is a simplified shipping box, which I take it came from your shipping frustration.

    • http://kintek.com.au maurice

      We’ll you clearly didn’t read the whole article. I decided against redesigning the entire page because it’s just too time consuming. It would have taken another week to get the whole Kindle page into a format I was happy with.

      All I wanted to demonstrate was turning the 5 step nonsense shipping procedure into something more easily understood, and obviously show how the massive amounts of content in the reviews can be made nicer with some TLC.

  • http://www.cpierce.org Chris Pierce

    I’d tighten up the top header design and not gap so much, thus giving you more viewable content right off the bad. On my macbook pro I can only see What is this and not the message below… when a few pixels taken from between the Amazon logo on the top and bottom you’d probably be able to get 50 more pixels of viewable content.

    Its much better than the current.

    • http://kintek.com.au maurice

      Awesome thank’s Chris. Hard to tell on my monitors. I’ll tighten it up later on :)

  • http://www.paddyvisions.com/insta-website.html Aditya Menon

    Whoah you just did a lot of free good work for amazon!

    But hey, great points. I’ve tried to buy stuff from India, it’s a nightmare. You are never told what ships and what doesn’t till the very last DiSsApPoInTiNg moment. (That’s when you go crazy with your capitalization).

    I have now stopped visiting Amazon. I only buy from eBay India Seamless shipping, as well all those sites that have signed up with “51″, a global shipping and rates provider for eCommerce sites. GAP.com is a great example. I’m just waiting for more sites to pick this up…

    • http://kintek.com.au maurice

      Thanks so much Aditya! I’m really glad someone else has had the same problems internationally! Personally I have also stopped buying from Amazon and only use eBay now.

      About 5 days ago I tried to buy some books from Amazon again (big mistake). The items I wanted were artificially capped at 3 per customer, but there were no indications other than the quantity drop down to let me know (and there were more than 3 in stock!). I proceeded anyway and updated my cart to 6 on the next page, then when I got to checkout it said something like “Important! Sorry you can only buy 3 a the moment”.

      I then CTRL + W, went to ebay and found it for hard the price, 1/4 of the shipping cost, and I could buy as many as I wanted. Awesome.

  • http://www.mike-greene.com Michael Greene

    While your concept of a hybrid US and non-US site is the ideal solution, the issues you’ve described with the international usability can easily be addressed without a full site redesign and said hybrid model. In fact, I’d argue that a large portion of your complaints are user preference. Things like the placement of the shipping box; I’ve used the Amazon UK site dozens of times and personally have never had an issue with it. The site may have quirks, but I think you’ve made it seem a lot worse than it really is, or maybe they’re AU specific.

    While Amazon’s look is dated and could do with a refresh, I think what you created is a rather cheesy pseudo Walmart look. I also don’t see anywhere (at least on the US site, UK site, or any of the Amazon packaging) where the logo contains a house where the “z” should be. I’d argue that between the logo and the color scheme, you’re unnecessarily messing with core Amazon brand elements that do not need a drastic rebranding effort as you’ve described.

    • http://kintek.com.au maurice

      Hi Michael. Firstly, you have to remember the redesign is a bit of fun. I have no intention of anyone adopting that into the real website, it was just thrown together in a couple of hours.

      Secondly, you said you’ve never had a problem with shipping in Amazon.co.uk? Well, that’s because Amazon.co.uk is a dedicated UK website, whereas Amazon.com is a hybrid website for America AND Australia AND International buyers, but really it’s designed with America in mind. This is what I’m talking about, they are shafting international buyers with a less than optimal experience for everyone else. Personally I don’t think I’ll ever use Amazon again unless they do something about it.

  • http://www.iconfinder.com Martin LeBlanc

    I agree on the max width part, but there are so many things they are doing right. I don’t think Amazon should be a target for bad usability.

    Btw you copied one of the worst things on Amazon – the large drop down menu. The problem with the menu is this:

    http://d.pr/pZJ8

    If a submenu folds out and you want to click the last link, then you can’t move your mouse directly to that link (the red arrow). Instead it opens the submenu below. You have to move the mouse along the green arrow instead.

    • http://kintek.com.au maurice

      Thanks Martin, funnily enough I actually designed a “mega-mega menu” for this design, but decided against it in the end (I might dig it up at work and post a photo of it, it was ludicrously big). I too don’t find the menu all that usable, and I especially see it being a problem for older or less capable people on a mouse. It would have been nice to have a horizontal menu that categorized the main menu, but this would have required lot’s of rethinking, like ‘Soft goods’ etc, and I didn’t want to waste time on that knowing people would have probably taken it badly.

      Checkout this menu, it’s pretty awesome! http://www.elon.edu/home/

      I admit I just redesigned the things I felt passionately about. Thanks for the thought, good point on the image!

    • http://kintek.com.au maurice

      Update, I updated the post to include your menu observation.

  • http://www.iamproduct.com Michal Acler

    Hello Maurice,
    I really like your effort in your proposed redesign but there’s a lot of ui/ux bloopers. At the top of them is bad information architecture and information prioritization – putting buy button below product description, shipping information and other stuff is simply something you can’t do. And you don’t have to do usability tests to know that it couldn’t work for your business really well.

    Michal

    • http://kintek.com.au maurice

      Thanks Michal, my design certainly isn’t the perfect solution, and you’ve made a good point that the buy or add to cart button should be further up.

      I actually just thought of something… Why not have the entire “shipping” section on the next page, and only include the “Add to Cart” and “1 Click Buy” on the product page. This would clear up a LOT of confusion for everyone. This would require some incredible redesigning on the cart screens because they are pretty awful as well.

      • http://www.brianfryer.com/ Brian Fryer

        That would be a good idea — all shipping on next page.

        Super awesome design.

        One thing that I feel is important, though, is for the “Buy” button(s) to be at the top of the right column (rather than under the content) — visitor’s eyes are trained to look there almost immediately.

        Thanks for the write-up! I *love* seeing things like this <3

        • http://kintek.com.au Maurice

          Thanks Brian,

          I’ve had a think about the shipping section and putting it all on the next page and thought it might not work so well. Unfortunately there are probably numerous items in Amazon which would require more cart options on the landing page.

          Smashing Magazine just tweeted a really awesome example of a design using media queries to change at 1200px, 990px, 760px, 480px and 320px. I don’t think Amazon would considering something like that, but if they did i’d be very impressed. :)

          Design (try resizing it!):
          http://stunningcss3.com/code/bakery/index.html

          Source (designers article about it):
          http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/

  • http://awebsitedesigner.com.au Dan

    Hi Maurice, this was a great post, I’ve put a comment on our website design blog about it. Hopefully someone at Amazon sees it!

    Brisbane web designer re-designs Amazon.

  • http://www.standoutblogger.com Thomas Sinfield

    I admire your redesign and personally I really like the design (minus the header – which I think takes up too much space), but as people have said the reason Amazon have their website the way it is – is because it works.

    That being said, as an Australian purchaser I refuse to buy off their website anymore after spending about an hour trying to work out how much postage was going to be on an Australian Kindle only to get so confused by clicking on the the US kindle and never actually finding out how to work out what the postage was.

    An Australian specific Amazon would be the best option for Australians but obviously we do not buy enough to make it worth while at the moment!

    Nice work on the design though :)

    • http://kintek.com.au maurice

      Thanks Tom!

      The two international people who’ve commented so far both hated their experience, I’m glad other people share my pain. =)

      Also, Amazon.com.au would be totally awesome, I don’t know why they don’t do it. Imaging how many old books there are lying around that people could get rid of? Ahh well, thats what we get for living on an island haha.

      • Jim Housden

        Well you just got to love the “Oh I know better comment” on a ““Oh I know better” redesign.”

        Funny how someone commented “You don’t know anything about what problems users are having on Amazon.com” When you and your colleagues are all users of Amazon.com.

        I am UK based and use Amazon.co.uk for pretty much everything, however i still hate the fact i have no clear “Login” option. It annoys me every time i use the site!

        Anyway, thanks for the interesting read.

        Jim

        • http://kintek.com.au maurice

          Haha I do enjoy the irony =)

  • Craig

    Quote: This goes against some usability guidelines where you should not replace the normal browser functionality of a link

    The links on your portfolio page do not use href! :)

    I think this post is fantastic. The redesign is a lot cleaner and I’m sometimes frustrated by the Amazon checkout procedure.

    Great work Maurice

    • http://kintek.com.au maurice

      Haha, knew someone would point that out, been meaning to change that =P

      Thanks

    • Sean

      The links on your portfolio page do not use href!

      - Yep, there’s a reason for that: SEO. Backlinks are preferable to reciprocal links. You might see this a bit on other portfolio pages, where there is no direct link, because there is already an inbound link from the site in question. Sure, it’s not a major concern, but every little bit helps.

  • Ayan Raha

    Current amazon site is not the good one we know, but it giving the business. So I think it’s not necessary to change the overall “Brand”. In the new design overall design looks more arranged but still not the best one… lot more scopes which might be done. Here are some comments what I personally think.

    1) I think 170px height of the header area is unnecessary, it could be done within 100px easily!

    2) Even using too much blue in the header seems more attention gathering (Distracting?) compare to body area.

    3) The tweak in the logo “Z” is good, but overall Black/orange previous combination was better, rather than reverse on blue.

    4) Again using the same dark blue, in navigation, drop down … hmmm.. somehow we missing the white spaces.

    5) The orange color used in the previous site was better I think. you use more yellowish orange.

    6) Many details in the body area are missing, so its lack of functionality.

    7) Where the “Banner Ads (good or bad looking) ” will be placed?

    8) In the footer area the text anti-aliasing not seems correct.

    9) However overall no reflection of carry forwarding the previous “Amazon BRAND” in the new design.

    Anyways, it’s just my view.
    Nice trying, interesting one! :)

    Best.
    Ayan

    • http://kintek.com.au maurice

      Hey Ayan,

      I realize a drastic branding change like this would never be adopted. Because I had full control over the design, and wanted people to notice it, I wanted to do something drastically different. If I had used the same colors as on the current design people wouldn’t have cared nor would they have bothered to check it out, my first draft redesign went down this road and it wasn’t very fun or interesting.

      My inspiration for the color scheme came when I did a Google search for “anazon logo”, and found a version on black. Whether it draws too much attention is neither here nor there in my opinion as plenty of websites use color and I don’t feel it’s a big issue, but I certainly agree it could be compressed to about 100px.

      Banner adds would appear exactly in the same spot under the sub menu. I was going to design this in but they’re fairly ugly.

      The footer was a print screen from the old website with some color changes because I didn’t think it needed much work.

      Anyway, thanks for the feedback!

  • Rebekka

    Re: Amazon Australia – probably not.

    1. There are all those pesky rules that don’t allow parallel importing of books, which would make getting a decent range at a competitive price practically impossible

    2. GST.

    I like buying books from overseas because they’re cheaper. Much cheaper. Particularly with the high Aussie dollar.

    Suggest bookdepository.co.uk and betterworldbooks.com – the first has free shipping and the second low fixed-price shipping.

    • http://kintek.com.au maurice

      Hi Rebekka,

      Those are two really interesting points I wasn’t aware of. Have you heard recently that big boys Myer and Harvey Norman are starting up online Chinese stores to evade GST? They’re fed up with the massive amount of business they’re missing out on online. Basically its a big F U to the government for not policing online tax.

      Here’s a bit more info on it:
      http://www.smartcompany.com.au/information-technology/20101206-myer-and-harvey-norman-to-investigate-setting-up-chinese-websites-to-sell-gst-free.html

      Another thing that really urks me about amazon is their shipping pricing. When I wanted to buy some books online the other day (my second amazon experience), they ended up being literally 9 times more expensive on Amazon compared to eBay, and they would have arrived weeks later. For some unknown reason Amazon also tried to limit me to 3 books, giving me a helpful notice like “you can only buy 3 of these books currently”, even though there was 10 in stock.

      Anyway thanks for sharing the links, I haven’t herd of Better World Books but the website looks very nice! I’m going to update the post with my latest round of Amazon’s disasters, and I”ll post the links up for people to use.

  • joshka

    Tl;Dr for the most part, but something I’d change is your use of 960 into 900. Most LCD screens sold these days ate 1080p (1920×1080), windows 7, as well as various browsers make it easy to view a website in half the screen width. 960 is painful in this regard. 900px has all the benefits of factors that 960 has.

    • http://kintek.com.au Maurice

      That’s certainly something to consider.

      I really don’t think Amazon should adopt a fixed width layout. I think a fluid width with a max-width of 1200 and min-width of about 800 or 900 would be pretty awesome. That would cater to everyone from small netbooks to my 22inchers.

  • http://myego.cz Radek Hulán

    Your redesign might look good, but I would NOT buy Kindle 3 from your page (while I bought three from the original one). Why? You give too little information (basically none) about the product. Original page is surely long, but it gives me all info I need by very simple action – scrolling.

    • http://kintek.com.au Maurice

      Hi Radek,

      Thanks for the comments. As I said in the article I wanted to redesign the WHOLE page, but it because obvious once I had done what you’ve seen doing the rest would take me many more days.

  • Tim

    Just want to talk a bit about the max width thing- I have two widescreen monitors, and apart from Photoshop I don’t think I ever full screen anything. Especially not Internet.

    If the ideal width is so, then why make the window bigger? I think to an extent using all the width you have on a website is good because the user an decide how big they want it.

    Furthermore, the actual program does not benefit from Being maximised, I use chrome and the only thing that would happen if I maximised it is that the omnibar would be huge and stretched out, like the web page I’m viewing.

    Tl;dr- why maximise your browser window?

    • http://kintek.com.au Maurice

      Hey Tim,

      I think it’s strange you don’t normally full screen your web browser, but each to their own :) . Personally I use autohotkey so I can quickly tile 4 apps per monitor, two vertically per monitor (particularly good when working i find), but more normally 1 app per monitor.

      I think to an extent using all the width you have on a website is good because the user an decide how big they want it.

      Using space is important but if your website becomes unreadable when maximized, I feel there is a problem. Widescreen technology was driven by the movie industry because our eyes move faster left to right than up and down, and this causes less eye strain. This doesn’t mean you should make your website widescreen. What was the last widescreen book you read :P .

      I also use Chrome, and probably the main reason keep 1 app per monitor is so I can stay focused on what I’m doing. Anyway, thanks for your thoughts!

  • Mark

    In my opinion the single-column style mobile version of Amazon’s website is MUCH better than the main version and much more usable.

    Agree with you about their godawful usability. I have no idea how they get away with it.

    I tried using the ‘wishlist’ functionality for presents over Christmas and I think unless you ‘add to basket’ off the wishlist it doesn’t remove the item. Most people will click through and then order from a product screen having compared items; not sure how you’d fix that one. Not helpful unless you like more than one of the same item from different people :(

    • http://kintek.com.au Maurice

      Hey Mark,

      Thanks for pointing that out I have not looked at their mobile website before. I’m surprised at the small amount of information they show on the Kindle page in the mobile version. I’m also surprised at how visually unstimulated their mobile version is (well.. somewhat surprised :P ).

      Amazon Window Shop is actually pretty nice to use (even if it’s flash), and it’s probably one of the only situations I approve of a full liquid layout. Stock photography websites do this a lot and when you’re literally only showing thumbnails and a title it works great. The only problem is you can only buy items by clicking “Buy on Amazon”.

  • http://www.inanedesign.com/ ani

    Thanks for pointing that out I have not looked at their website design before. I’m surprised at the small amount of information they show on the Kindle page in the website design.

  • http://vinfotech.com Social Network Design

    That’s really a fantastic post ! added to my favourite blogs list.. I have been reading your blog last couple of weeks and enjoy every bit. Thanks.

  • Justin Dean

    Incredible! Your design is spot on. Oh how I wish Amazon would listen. Write Bezos back and ask why he didn’t mention the design of the site. :)

    One of your colleagues let me know about this post when they came across a similar post I wrote up this morning.

    But I was too lazy to do mockups. Brilliant job. Thanks for this.

  • condor.xing

    Header is too bright-coloured.
    So, many attractive run to header, I feeling this place has a problem.

  • Kate

    its really cool data to collect and share this. Incredible! nice work

  • http://seanockert.com/resume/ Sean

    Looks like Amazon is rolling out a new design soon: http://mashable.com/2011/09/04/amazon-redesign/ :)

    • http://kintek.com.au Maurice Kindermann

      Pitty it doesn’t address any of the points in this article =P. That is, it’s a horrible website to use if you live anywhere else in the world besides America.

      It’s also still fluid. I think I should make a chrome extension so that it adds:

      body {max-width:1200px !important;}

      to all designs =D.

      It does make sense to release something that doesn’t look totally out dated now that they’re releasing an android tablet very soon.

  • James Lawrence

    The press was abuzz this week with stories about Amazon expanding into the Australian market. They seem to be investigating the best place to set-up their warehouses in Asia / Pacific. What will be interesting in regards to this article is whether the local presence comes with a local version of Amazon online. Or merely whether the physical presence just aids fulfillment. Will there be usability differences between .com and .com.au

We'd love to
hear from you

We've prepared a simple project planner to get started.

Lets get started

Or send us a
message

Phone: (07) 3878 1151

Address: 1/17 Station Rd, Indooroopilly,
Brisbane, 4068, QLD, Australia

  • This field is for validation purposes and should be left unchanged.
css.php