Suppliers and Prices
Related Products
About Us
Compare Web Design Prices

Compare Web Design PricesStart your free quote below

It Only Takes a Minute & You Could Save
As featured in:

Top E-commerce Design Trends 2018

Modern e-commerce homepages are unrecognisable from those of the early internet. E-commerce design trends in 2018 reflect a gradual evolution in homepage design.

Just compare this vintage Amazon homepage from 23 November 2001 with the same page exactly 15 years later:

Drag the slider to the left to reveal Amazon’s modern homepage:

When your customer is just a few keystrokes away from your nearest competitor, first impressions matter. That’s doubly true for webpages that offer customers their first exposure to your brand.

We compared the old-look homepages of nine other top-performing e-commerce sites with their modern versions to uncover changes in e-commerce homepage landing page best practices over the years.

Read on to learn about the e-commerce design trends that should guide your approach to website homepage design in 2018.


What's On This Page?

Head straight to a specific section by clicking the links below.


Kohl’s (9 November 1999-2016)

E-commerce Design Trend: Conversion Rate Optimization

Even by 1999’s standards, Kohl’s old ‘homepage’ design is puzzling. A small picture of a Kohl’s brick-and-mortar store invites users to ‘Enter’ by clicking on it. Only after clicking through did a more traditional homepage appear.

We’d wager that this empty page had a high bounce rate and harmed Kohl’s site wide conversion rate. Not only did it put visitors a click further away from converting, but it didn’t provide any enticement to click through. By contrast, Kohl’s modern homepage includes several conversion touchpoints, including a ‘check out’ feature that follows visitors around the site and remembers the items they add to their bag.

The 1999 page focused on the Kohl’s logo. But today’s big retail brands have a more mature online presence and are more easily recognisable. Instead, the focus has moved from brand recognition to brand loyalty, which is more difficult to command. Kohl’s discounts and reward schemes for November shoppers stand out on its modern page.

Homepage Design Top Tip

Insert prominent hooks to catch the attention of the 55% of web users who spend fewer than 15 seconds on your web page.

Walmart (21 November 2004-2016)

E-commerce Design Trend: Responsive Web Design

Long before webpages were optimized for different screen sizes, best practice was to make fixed width content.

Back in the early 2000s, e-commerce sites were only designed with two screen widths - 800 or 1024 pixels - in mind. Most websites, like Walmart’s, used a fixed-width layout that did the job just fine.

But as you can see in the first picture (left), fixed layouts leave acres of white space on modern 1920x1080px displays. Today, countless devices and display sizes demand a far more flexible approach to web design.

Walmart’s modern homepage deploys modern responsive web design (RWD) and adapts to match each device’s screen size and orientation. This means that the experiences of two people viewing the page on a 9.7 inch iPad display and a 60 inch HDTV screen will be largely similar.

Homepage Design Top Tip

Use responsive homepage design to ensure that UX is consistent across the platforms your customers use.

Apple (16 November 1999-2016)

E-commerce Design Trend: Typography

For a consumer retail brand, Apple changes its homepage remarkably little. The large product image against the contrasting background is as striking now as it was in 1999.

What has changed is the balance between serif and sans serif typefaces on many e-commerce homepages. Each style certainly has its strengths, but for the web, the balance seems to be shifting towards the latter. Some research suggests that mobile users prefer the simpler shapes of sans serif fonts because they are more legible on small screens. Meanwhile, the findings of one New York Times study suggest that Baskerville, a serif typeface, can make statements seem more persuasive.

The typefaces you use on your homepage should set a consistent tone for the rest of your site. Myriad, for example, really complements Apple’s minimalistic aesthetic. Several of the modern websites on this list also rely on sans serif typefaces for the bulk of homepage heavy lifting.

In general, sans serif fonts that create impact and emphasis are an excellent choice for homepage headings. Serif fonts may convey credibility, making them a safer bet for more text-heavy page content. Many successful e-commerce sites use some combination of the two.

Homepage Design Top Tip

Remember that seemingly small details of homepage design can greatly impact the user experience, for better or for worse. Much of the impact of great (and terrible) typography is subconscious, so it’s important to choose fonts that complement, and don’t distract from, your core messages.

eBay (5 November 1999-2016)

E-commerce Design Trend: Site Architecture

We have no idea what a ‘Cobra ESD KU Laser/Radar Detector’ is, but someone was selling one on eBay on 5 November 1999. Nowadays, there are more than 1 billion live eBay listings at any given time, each one with its own unique web page.

Back when eBay was a smaller, more manageable site, the homepage linked to lots of these product listing pages. But in 2018, eBay’s homepage focuses more on shuttling visitors to item category pages instead.

This change reflects the balance that e-commerce sites try to strike between product visibility and user experience. A e-commerce homepage UX is one that helps customers find what they are looking for quickly and easily. On eBay, sellers are also users, and the visibility of listings greatly shapes their experience. So, eBay’s homepage has to connect users with a wide range of products without overwhelming.

eBay’s modern homepage succeeds in this regard. It looks much cleaner than the old one, but it’s still easy to get from the homepage to listings pages in a couple of clicks. Drop down menus and an auto suggest search bar conceal these links until a user is ready to activate them. Compared with their old text-heavy homepage, it really improves their e-commerce user experience.

Homepage Design Top Tip

Build in features to make your homepage feel like an effective but not overwhelming entry point into your website.

Macy’s (4 November 1999-2015)

E-commerce Design Trend: Call To Action Buttons

The worst thing about Macy’s homepage from November 1999 isn’t the inconsistent typography (word spacing, anyone?). Nor is it the fact that the ‘Check out’ button is hidden almost invisibly at the foot of the page. It’s not even the picture of a WordArt baby in a Y2K onesie.

The worst sin that Macy’s old homepage commits is that there are no clear CTAs.

It’s very unclear exactly what is clickable. If I want to get a Macy’s gift card, do I click on the picture of one or the text next to it? Is that a list of Macy’s unique selling points in the header, or links to other pages in the site?

Even if you did think to click on the ‘Shop For Her Sake @macys.com’ anchor text, it’s still not clear where it would take you. We’re already on macys.com, aren’t we? And the red and gold Calvin Klein CTA on the right looks more like a display ad that leads to another website entirely.

Needless to say, homepages like this would fare poorly in today’s e-commerce environment. Fortunately, Macy’s modern homepage does a much better job of funnelling users’ attention between clear touchpoints.

Homepage Design Top Tip

Clear CTA buttons, like the ones below, are a simple yet essential addition to any e-commerce site:

QVC (November 2004-2016)

E-commerce Design Trend: Holiday Promotions

Christmas comes but once a year. So why on earth do online retailers start selling stocking fillers in early November?

QVC is of course not the only e-commerce brand to start early holiday promotions. In fact, savvy online shoppers expect them. By late November 2016, all but one of the online retailers we looked at were running homepage displays for Thanksgiving, Black Friday, Christmas, and even New Year.

Customers who proudly share their Black Friday bargains on Twitter are also first to notice when brands don’t update their offers. E-commerce sites that don’t refresh their homepages risk looking stale and losing sales.

It’s worth noting that sites hosted on robust servers have a distinct advantage when it comes to handling spikes in holiday traffic. In UX terms, most web users will abandon pages that take longer than two seconds to load. Choosing servers that guarantee uniformly fast site speed is therefore incredibly important.

Homepage Design Top Tip

Get a feel for the huge range of website hosting options out there by comparing quick quotes from leading web designers.

Best Buy (11 November 2001-2016)

E-commerce Design Trend: Color Schemes

Choosing the right colors for a website is as important as the content. Like typography, colors can subconsciously influence our perceptions of a company’s image and brand.

Best Buy’s 2001 homepage uses a color mishmash that conveys little sense of a brand identity. Three shades of grey and five shades of orange or red appear in the hamburger menu alone!

The 2016 version opts for a more muted tri-color palette of yellow and two shades of blue. Modern color theory calls this pairing ‘complementary’, with both colors contrasting to maximum effect. This look chimes far better with the brand too, to the extent that if the Best Buy logo were removed, it would still feel like their homepage.

Homepage Design Top Tip

Take advantage of complementary colors to imbue your homepage with your brand identity.

Costco (23 November 2004-2016)

E-commerce Design Trend: Interactive Carousels

If you’ve visited our Focus article hub recently, you’ll already have seen an interactive carousel in action. They’re an effective way to display extra content on the same page without requiring users to scroll.

Costco’s 2004 and 2016 homepages couldn’t be more different. The old one looks unfinished and uninteresting. The new one uses a carousel to rotate an array of bright special offers.

Most carousels use a mix of HTML, CSS3 and/or Javascript, but website builders like GoDaddy let you implement them without coding.

Homepage Design Top Tip

Utlize a homepage carousel to boost your user engagement metrics.

Netflix (7 November 2003-10 November 2016)

E-commerce Design Trend: Super Simple Homepages

Netflix reigns supreme in the world of subscription e-commerce, but it wasn’t always this way. You probably remember that Netflix made most of its money through DVD rentals before video streaming came along. But do you remember what their website homepage looked like, circa November 2003?

We didn’t. It’s pretty forgettable, especially compared to some of the older ones on this list, like Apple’s. Netflix’s modern homepage looks fantastic though, thanks to a stripped back approach to web design.

There’s a below the fold portion that we can’t show in the above screenshot, but the first part of the page lets the images do the talking. This reflects a wider change, not just with web design trends, but with internet users. Thanks to lots of scrolling on mobile websites, users scroll more than ever before, regardless of device. Web designers are taking this into account with homepages that anticipate scrolling behaviour.

This pared back approach can work even for brands that lack the name recognition of a Netflix or an Apple. Lots of clothing brands use image-led homepages like a shop display window for their latest collections.

Homepage Design Top Tip

If you opt for the minimalistic aesthetic, just remember to give users enough of a hook to entice them to scroll to the substance of your site.

Methodology

The US e-commerce sites we examined all rank in the top ten for either monthly traffic or online sales, as measured by Alexa and eMarketers. Using Wayback Machine, we compared their November homepages from different years to reveal notable visual trends. Using homepages from November also meant we could visualize the extent to which the winter holiday period has become increasingly commercialized over the years.