How to Design the First Page of an eCommerce Site to Boost Sales

With smaller websites that serve a less direct salesy purpose, the formula for increasing conversions is usually quite simple: your goal is to inform, appeal to the visitors’ needs, and gain a lead or client. Because they have fewer layers of navigation to get through, and typically only one call-to-action to consider, it’s easy to design a clear path that takes the visitor from their point of entry to conversion.

But with ecommerce sites, this can get complicated. Inventory can be quite extensive and the target audience varied… which means that getting visitors to conversion isn’t as easy.

Your best bet is to systematically design ecommerce sites so that you tackle each part of the user journey separately.

For instance, you know how to design ecommerce product pages in order to increase conversions. You also know which payment gateways are best for handling ecommerce transactions quickly and securely.

Today, I want to move away from the latter half of the customer journey and focus solely on the first part of their visit. In the following post, I’ll talk about the five ways to design the first page of an ecommerce site to increase sales.

5 Ways to Design the First Page of an eCommerce Site for Increased Sales

If you think about it, ecommerce sites don’t typically follow the same patterns as traditional business websites. They don’t rely on large hero images and abundant white space to frame their brand messages. Ecommerce sites focus on selling an inventory of products or services, so the design has to rely less on engaging words and more on engaging visuals.

Below, I’ve broken out 5 tips to more effectively design the first page of an ecommerce site and, consequently, increase sales.

1. Show the Value Proposition (Don’t Tell)

Typically, a value proposition is a brief statement that goes atop the hero image on the home page. Usually, a descriptive headline, a sentence or two, and a strong CTA button are all that’s needed to communicate to visitors “This is what we do and what you’re going to get from us”.

This snippet from a QuickSprout infographic shows the elements you’ll usually find in a well-composed value proposition:

Design the First Page of Your eCommerce Site QuickSprout Value Proposition
A snippet from QuickSprout’s infographic on value propositions.

When it comes to ecommerce websites, however, less is more. Let’s use this example from IT’S Watch:

Design the First Page of Your eCommerce Site IT'S WATCH Value Proposition
Very few words are needed to explain IT’S Watch’s value proposition.

The home page header is a rotating banner that includes various shots of its watch line. The internal product pages do the same thing, minus the overlaid text (which is a sign of consistent web design) :

Design the First Page of Your eCommerce Site IT'S WATCH Internal Header
Another example of IT’S Watch’s wordless value proposition.

On the home page header, the only text that appears is “Orologi” (watches) and “Cinturini” (bands). Users hover over the one they want and are given a choice for “Women,” “Men,” or season (since they design watches to go with the time of year).

Clearly, there’s no need for IT’S WATCH to intrude on the sharp visuals of this product line with an explanation of their watches and wristbands. The images speak for themselves. For ecommerce sites whose value proposition is clear, use this as inspiration in communicating your message to visitors with few or even no words at all.

2. Add Shortcuts to the Header

With many websites, it makes sense that you’d want to design a header and navigation that’s simple and to the point, as WPMU DEV does:

Design the First Page of an eCommerce Site - WPMU DEV Navigation
WPMU DEV has a very simple navigation bar.

In so doing, visitors get a quick sense for what kind of information they’ll find on the site before scrolling down to learn more from the value proposition and other home page sections.

With ecommerce, I look at that top bar the same way I look at my own browser’s bookmarks bar. There are certain things I aim to do every time I step inside of Chrome. To save myself time in digging them up, I have all my commonly used pages saved on my bookmarks bar, each is well-labeled, and I have them logically organized.

Design the First Page of an eCommerce Site - Chrome Bookmarks
A bookmarks bar–like ecommerce navigation–is meant to streamline our actions.

They also serve as a great reminder to check in on my business or other writing work since the visual reminder is constantly there.

The ecommerce header bar needs to accomplish the same thing for visitors. Your goal with this site is to enable them to take swift action, not learn about your company and fill out a contact form for more information. This means that all those actions you want them to take need to be easily accessible in that bar.

Take Nordstrom’s website, for example:

Design the First Page of Your eCommerce Site Nordstrom Header Bar
Nordstrom’s navigational header includes all the shortcuts its customers need.

Of course, there’s the well-organized navigation bar front and center. There’s nothing overly simplified here. If someone wants to find women’s handbags, kids’ blankets, makeup, men’s shoes, or clearance items, there’s really no guesswork involved. As the Baymard Institute’s research shows:

“[O]ur large-scale usability testing on Homepage & Category navigation shows that not displaying product categories directly in the main site navigation causes multiple and severe navigational issues for users.”

There are also these additional elements found in Nordstrom’s header:

  • Search bar
  • Sign-in portal
  • Shopping cart

Each of these elements are ever-present on the site, beckoning visitors to take a shortcut and get right down to business. If you’re hoping to increase sales on an ecommerce site, give your visitors a quick way to get to that part of the journey.

3. Give Your Images a Lot of Love

To start, you should only use custom photography and videography on ecommerce websites. Customers don’t have the luxury of seeing your goods in person, so the more visuals, angles, variations, and contexts you can give them, the better.

And, as always, ensure that images are fully optimized before publishing to your site. This should include making each image retina-ready.

Custom photography and compressed image files are only just the start though. Ecommerce images must make a huge impact on visitors right away.

To do this, it’s going to take a little experimentation. What works for one website won’t always work for another, so that means being open to playing with things like color, quantity, variation, text placement, etc. A lot of this comes down to the content within your images, but it does also depend on what kind of store you’re building. Let’s look at a few examples.

Gather is a website that offers a simple organizational solution for users. This means that the “shopping” process revolves more around the customization of one’s own organizational solution rather than perusing a number of products. As such, the website isn’t cluttered with a bunch of products for sale.

Design the First Page of Your eCommerce Site Gather Images
Gather uses strong, singular images to show off the versatility of its product.

It uses full-width images like the one above to show off various models customers could build for themselves using the Gather System.

Then, let’s take the example of Lanbelle, a purveyor of skincare solutions.

Design the First Page of Your eCommerce Site Lanbelle Images
Lanbelle’s home page product images ooze sophistication.

Because the brand’s image is synonymous with providing customers with top results, images need to give off a sense of cleanliness, sophistication, and indulgence. As such, each image is perfectly shot and well-framed.

And, of course, we should look at a massive marketplace like Amazon. These days, Amazon is such a hodgepodge of products that customers really can’t have any great expectations for the display of images on the home page or in search results.

Design the First Page of Your eCommerce Site Amazon Images
Amazon is just too large of a marketplace to be able to effectively consolidate all these products in an organized fashion.

That said, Amazon does do a relatively good job of showing off only high-quality visuals. Organizationally, though, it’s a bit of a mess. Because it’s such a well-known and trusted brand, it can get away with this sort of image overload.

For your own purposes, I’d strongly advise not designing ecommerce stores with this sort of haphazard and overwhelming layout of products and ads. Images should convey the message you want your brand to send to customers; not just be a vehicle to increase the potential amount of products bought from the store.

4. Use Color to Convey Urgency and Scarcity

Color is a very powerful tool for web designers. When designing a website, you use color psychology to ensure that you’re appealing to your audience while conveying the right style and message to them about your brand.

With ecommerce sites that have a main focus on selling a product, color can be an unwanted distraction. That is, unless you use color to call attention to messages that will greatly benefit your customers.

For example, we have Leesa:

Design the First Page of Your eCommerce Site Leesa Timer
A great example of a countdown timer from Leesa.

This pop-up offer, in and of itself, is pretty eye-catching. However, take note of the ticking timer in the top part of it in red. With the bright usage of color and the movement of the timer letting customers know that this deal is available for a limited time, Leesa effectively uses these elements to convey urgency.

Amazon is a brand that often uses both urgency and scarcity to compel users to hurry up and make a purchase.

Right now, Amazon’s “Prime Day” is being heavily advertised. It’s a day-and-a-half when Amazon offers a bunch of super-attractive deals to Prime customers only. So, not only are they hoping to increase the number of sales made during that time frame, but they’re likely hoping to get a bunch more Prime customers in the lead-up to it as well.

It’s promotional banners like these that will net them those customers and sales this month:

Design the First Page of Your eCommerce Site Amazon Urgency
Amazon’s sales days and on-site promotions are highly effective in capturing more sales.

As you can see, it doesn’t take much for Amazon to pull this off. Just a simple banner with an image of a product in high-demand and a price so severely slashed that customers won’t be able to help themselves from returning to Amazon to shop that day.

5. Motivate with Pop-ups

Shopify reports that ecommerce websites that publish coupon codes tend to generate more sales. Specifically:

  • Coupon codes increase the likelihood of a sale by 8%.
  • Of all sales that took place on Shopify websites in a year’s time, 17% of them used a coupon code.

(Yes, I realize these are Shopify-specific statistics, but I believe them to be relevant regardless of ecommerce CMS.)

What’s great about this is that it’s really easy to implement coupon codes on websites using pop-ups and sticky bars. My preferred plugin for this? Hustle.

Design the First Page of Your eCommerce Site Hustle Plugin
Use Hustle to improve the design of your promotional offers.

Not only does it help you display beautifully designed coupon codes on your site, but you can collect email addresses in exchange for them (win-win). And you can create as many offers as you want. That way, if someone clicks out of the pop-up because they assume it’s irrelevant, you can nab them with another one stuck to the top or bottom of the website.

Buffy uses this pop-up to give new customers a discount on their first purchase:

Design the First Page of Your eCommerce Site Buffy Popup
Simple in execution, but effective in calling attention to the special offer.

It’s brightly colored, straight to the point, and even has a fun little mascot attached to it.

Polaroid Originals is another one that uses the pop-up to grab attention, but it’s an interesting approach:

Design the First Page of Your eCommerce Site Polaroid Email
It’s an interesting choice of color, but I think it works well on top of the super colorful site.

The website itself is absolutely stunning with a monochrome background transitioning into a much more colorful one. But then you have this pop-up offer that’s all black. It definitely stands in stark contrast from the rest of the website and is sure to get a lot of attention for doing so.

And here’s an example of a sticky bar from the ThemeForest website:

Design the First Page of Your eCommerce Site Themeforest Banner
Promo banners are going to become even more popular in the coming years thanks to mobile-first indexing.

Aside from logos for templates and themes sold on the site, ThemeForest generally has a pretty muted design. But with this small touch of color in the sticky bar, customers will instantly be drawn to the special offer.

Wrapping Up

The bottom line is that you need to make a strong impression right from the very start. And it needs to be unwavering. This means presenting customers with a secure place to shop from, a fast website to peruse inventory on, and giving them the right amount and kind of information they need.

Obviously, this list isn’t the end-all, be-all of design tips for ecommerce. But with the product page design guide, payment gateway suggestions, and now these tips on how to design the first page of an ecommerce site, you have a more comprehensive end-to-end overview of how to increase sales throughout the entire user journey.

Suzanne Scacca
Is there anything in these ecommerce design guides that hasn’t been covered yet that you’re curious about?