Image Comparison of the Biggest Online Stores Then and Now

article head

Times change, and trends with it. The history of e-commerce is no exception, since its launch in 1991. Understanding the conventions and what have changed over the years brings us insight and better understanding of today. So let us compare some of today’s biggest factors in e-commerce: how their webpages looked when they launched and how they look today.

I’ll be looking at the page design and the page structure of Amazon, Ebay, Zara, Microsoft, Apple and Best buy. Then I’ll draw some conclusions.

Amazon.com

Amazon 1998 2012 comparison
Amazon 1998 / 2012 comparison. Welcome white space! Source (1998): Hongkiat

Design

  • Amazon.com, as well as many others, understood the need for white space online. Less is more, as the expression goes.
  • The company also kept orange as their trademark and detail color. Important things as the Sign in text, the number of items in the cart and some headlines are written in this orange.
  • Logotype: Amazon.com simply became Amazon, and the orange frowny face underline has turned into a happy smile.

Landing page structure

  • They skipped showing the menu twice (top and left).
  • Amazon.com still make use of the right menu for customer recommendations.
  • They kept the sections Your account and Shopping cart in the up right corner. They did push it more to the right though.
  • They moved their logotype, to place it in the conventional upper-left corner.

Ebay

Ebay 1999 2012 comparison
Ebay 1999 / 2012 comparison. Less playful – but more social interactions. Source (1999): techno-net

Design

  • Ebay has made a big change in it’s approach since the launch, skipping the playfulness for a straight-forward look.
  • Same goes for the logo – it’s a lot less messy.
  • They skipped every last one of the serifs (text styles with edges).

Landing page structure

  • The structure is greatly improved in my opinion. Partly because the  compressed menu with fewer titles.
  • It seems to have been a trend in the 90′s to make long lists instead of clear pages – this they’ve changed.
  • The webpage of Ebay is also more interactive for users today, with the possibility to create a personal feed of products.

Zara

Zara 2003 2012 comparison
Zara 2003 / 2012 comparison. Unfortunately, the lower block image of 2003 isn’t saved in the way-back machine I used to collect this blast from the past. Source (2003): Wayback Machine

Zara’s landing page lets you choose language/country. When that is done, you land on the page the images above show.

Design

  • Zara made a brave design choice of colour in the early 00′s: yellowish, light green. They’re still brave though, putting menu text directly over images (sometimes very unreadable, not seen in image above).
  • In 2003, Zara actually had a music track playing in the background on their online platform. I would definitely argue this is part of the design, and I’m happy they have removed it. At the bottom right you see a volume symbol. (Background music especially trending when people starting making own webpages – remember all those horrible midi songs in the 90′s?)

Page structure

  • The menu Zara uses now is more browsable when it comes to searching for clothes – which is what they sell, after all.
  • They also moved the menu to the left, which is more conventional.
  • Today, additional info is hidden under a fold out menu, which makes the page design cleaner.

Microsoft

Microsoft 1997 2012 comparison
Microsoft 1997 2012 comparison. Fewer menus – more squares. Source (1997): Lea Yerou

Design

  • Menus, menus everywhere! Long lists of text have been cleaned up on the old Microsoft landing page. It makes Microsoft seem a lot less technical, and more welcoming to more users with that.
  • In 2012, Microsoft made a new start with a new design – featuring more squares and a more unison design.

Landing page structure

  • All the menus have been simplified – top menu for overview…
  • … and left hand menu Discover (under the product promoting image,) where you find their flagship products: Windows, Office and Windows phone.
  • They put the logo in it’s proper up-left corner. (Also, it’s prettier than ever, right?)

Apple

Apple 1998 2012 comparison
Apple 1998 2012 comparison, and the design is almost equal! Source (1998): 1stwebdesigner

I let this image be different in layout, to show how similar they’ve kept their design.

Design

  • Their old logo, the colourful Apple, is put in the downright corner (next to the menu) in the old design. Now it is found to the top left instead.
  • The logo is modernised, featuring a steel look that makes it more relatable with Apple’s overall design.
  • You can see Apple’s idea of a clean, white design persist over the years. This makes Apple different from most others pages.

Landing page structure

  • The menu of Apple has been placed at the top instead of the bottom (for obvious, user friendly reasons).
  • Under their big promotion ad, they have smaller images of products – just as in their old design.

Best buy

Best buy 2000 2012 comparison
Best buy 2000 2012 comparison. Source: Jordan Odom

Design

  • The logotype is basically the same, mainly the angle of the price tag has changed.
  • The yellow colour has always had a key importance. Today it helps you find the shopping cart and the Shop now button.
  • Blue is introduced in Best buy’s colour palette.
  • A lot more (much appreciated) white space is introduced.

Landing page structure

  • Best buy has changed from having a left hand menu to using a top menu.
  • They added the shopping cart to the top right, as well as some easy-to-spot log in options.
  • They still make a big deal of recommending products.

Looking at all the webpages, what trends can we spot?

Design

  • There’s space for white space: don’t make long lists of text.
  • Make a design that looks simple. You don’t want to seem too technical.
  • Use sans-serifs, Internet users prefer text without edges.
  • Text links don’t have to be written in blue.
  • Make a design – a trademark – that lasts. Easier said than done, but not impossible – look at Apple.

Page structure

  • Make simple menus, without having too many titles. Submenus can be an option.
  • Put your menus to the left or in the top of the page. Specially avoid bottom menus.
  • Follow conventions to please users: a clickable logo up left for example, that takes you back to the main page.
  • If you have a shopping cart on the site, place it in the up right corner…
  • … together with log in/sign up information.

What changes and trends can you find over the years?