How CNN, Youtube, Amazon, Etsy and Basecamp Have Evolved Their Design over the Years

The functionality and aesthetic of websites continue to change with every passing year. Different screen sizes, devices and usage habits have forced designers to adapt. Also, what looked good a few years ago probably wouldn’t look good today. Despite all these changes, there are also elements of these websites that have stayed constant. We will examine a selection of websites and how they have evolved from their original sketches to the modern version.

CNN

CNN has changed drastically since its early iterations. It was originally a left-aligned website, but has changed to be centered. It still maintains its identity as a hub for world news, but presents its content much differently. The most obvious change is the position of the navigation menus. In the left-aligned version of the CNN website, the menu occupied the left side of the screen, however in the centered version the menu is at the top.

The featured news section has been cleaned up and does a much better job at highlighting popular stories. Different sections and topics of news are much more easily distinguished than in older versions of the website.

The newer design makes better use of horizontal space but the visual hierarchy is still dictated by an element’s vertical position.

The overall design of the current version of CNN is neater, giving the page a sense of order and logic. This is important because the older versions feel very chaotic. CNN‘s current design is built on a better grid system which aligns the white space and elements in a systematic order. Compared to older designs where elements are sporadic therefore leading to disconnection between different stories and current events. The newer CNN designs feel more like a hub, a place that collects all the latest world news and presents it for readers to easily digest.

c1

c2

c3

c4


Etsy

From its humble beta beginnings in 2006, Etsy has evolved into the largest arts and crafts online marketplace. The design of Etsy has changed a number of times in the last few years, but the core elements of the website still exist. The menu, item list and search are always present in all the different iterations of Etsy . However, they are styled differently and also sometimes slightly changed in how they work.

The Etsy shopping options have been greatly reduced over the years. The main method of filtering items is now done by categories, whereas there use to be options to shop by color, location and “time machine”. The item listings are largely the same.

The current Etsy homepage is more of a storefront. It offers glimpses of different sections of Etsy and recommends items that you might be interested in. Instead of showing the items straight away it entices viewers with posts about community events, favorite picks and special deals. Once we move past the homepage of Etsy we reach the more familiar item listings page that we have grown accustomed to. It is mandatory to select which category you wish to browse from the homepage and then select a subcategory from a mosaic grid.

Though there is an extra layer of action that we must go through.

Etsy‘s new item listings display takes the form of a fluid mosaic grid compared to previous use of a rigid square grid display. This benefits the shopper and the sellers as some items did not display well in a square picture format.

e1

e2

e3
e4

 


Basecamp

Basecamp has stayed mostly the same throughout the years. It still uses a long one-page layout, although the content is different. There are also bigger and more obvious buttons to direct users towards a call-to-action. In early iterations of the Basecamp website, it could sometimes be confusing to navigate the website.

The long list of features and “reasons to use Basecamp” links that were all placed at the bottom of the earlier versions of Basecamp are now integrated into the copywriting as hyperlinks. This is an interesting use of storytelling and unique user experience. As the user scrolls down and reads through the text, they become aware of certain features and details because of the underlined hyperlinks.

It keeps the user intrigued because it feels like a story that continues to unravel as you get closer to the bottom.

The purpose of Basecamp‘s homepage/landing page has always been to sell the product. This has stayed constant throughout Basecamp‘s lifespan and the current website is a long one-page story designed to entice users to buy Basecamp‘s service. Basecamp‘s use of storytelling and hand-drawn visuals appears very endearing and sells the feeling of intimacy to the reader. This has been very constant throughout the different iterations of Basecamp and it still exists today.

b1
b2

b3

b4


YouTube

Everybody’s favorite online video destination has undergone major changes. The older versions of the YouTube website did not offer nearly as much customization and wasn’t as useful for discovering new content. Also the new YouTube interfaces makes more use of the browser space by fitting more content into smaller spaces and utilizing more horizontal navigations.

Over time the interface has been trimmed down to its essentials. Removing elements from the page such as the tags section, “who’s online” and optimizing the layout of the login, menu and search bar to not take up as much space. YouTube understands the main focus for users is to find video content that they enjoy watching. The removal of the extra features actually freed up space that is better used in the modern version, therefore increasing usability and providing a better user experience.

y1

y2

y3

y4


Amazon

Amazon‘s evolution over the years is a bit more subtle. The most obvious change occurred between its early years and late 2007 where Amazon decided to change the main body of the homepage to display shopping items instead of mini-product descriptions and small articles. The shopping navigation has progressively become more complex over the ages, allowing shoppers to browse more specific category of items quicker.

The current Amazon website now employs the use of a mega-menu which enables deeper navigation through its multi-layer menu system.

As with most current webpages, Amazon makes greater use of horizontal space and navigations. There are also more customizable sections of the Amazon which recommend items based on your interests and past items viewed. The design of the Amazon webpage has been optimized and is now able to display bigger pictures without sacrificing the amount of content. Overall the current Amazon provides a more comprehensive shopping experience compared to its older iterations.

Screen Shot 2014-12-29 at 12.52.59 PM

Screen Shot 2014-12-29 at 12.53.04 PM

Screen Shot 2014-12-29 at 12.53.09 PM

Screen Shot 2014-12-29 at 12.53.15 PM

Screen Shot 2014-12-29 at 12.53.20 PM

Screen Shot 2014-12-29 at 12.53.33 PM


From Sketches to Now

The evolution of websites show the change in thinking towards user experience and design. Some concepts such as Etsy‘s shop by color palette selector were taken out to optimize the website and user experience. While CNN‘s use of a more structured design helps to deliver content more effectively. These are examples of evolution of a website in an attempt to provide a better user experience.

Basecamp is an example of how it is sometimes only necessary to make subtle changes instead of huge redesigns. The purpose and execution of Basecamp‘s webpage has been carefully thought out and they haven’t strayed far from its original formula. As the web continues to evolve we will start to see more changes and optimizations. Maybe in a decade’s time the websites we are so impressed by today will be seen as sketches in a much richer online environment.