How to Compete with Ecommerce Giants with Superior Product Pages

All posts
May 1, 2018


The retail apocalypse is coming.

A Credit Suisse report predicted that a quarter of all U.S shopping malls may be forced to close their doors within the next five years. What was once a staple in modern consumerism will be reduced to nothing more than a collection of abandoned buildings.

In the years past, retailers were faced with the daunting task of competing with chains like Walmart and Kmart. Now, as ecommerce becomes the preferred method of shopping, brands must work tirelessly to keep up with Amazon and eBay.

That’s okay, you smirk – you have an ecommerce store up and selling. However, you need to make sure that in the absence of an aesthetic showroom and a friendly salesperson, your product pages are hard at work. All your efforts in other areas of the website eventually bring visitors to this “make or break” point.

Here’s how to create product pages that ultimately prove to be the difference between visitors who turn into customers and those that add to your bounce rate.

Use Visual Hierarchy in Your Design

Visual hierarchy in web design refers to how the components of a page are arranged to convey differing levels of importance.

The human brain is extremely good at consuming visual content. As an ecommerce business, you’d be very wise to manipulate this neurological trait to direct visitors’ attention to the most meaningful information on your product pages, and thereby influence their decision making.

Visual hierarchy is what tells people how to navigate the page, what to look at, and where to click. Your job is to prioritize the elements of your content to showcase the product best.

There are four major components of visual hierarchy to consider in your design:

  1. Color
  2. Size
  3. Spacing
  4. Scanning pattern

Color is a big one. How you use it provides the initial focal points as to where users’ attention goes at the outset. As you could probably guess, the more vibrant elements get noticed first. Using prominent colors is great for things like product titles, CTA buttons, or any part of the page that is meant to prompt action. Take a look at this listing on Skate Warehouse’s Daily Dose:

Screen Shot 2018-04-30 at 15.36.53

Notice how the price of the product, size of the item (where applicable), and Add to Cart button are the same color, and are a bold contrast to the white page. This highlights and prioritizes the most important course one can take onward from a product page: the path to purchase.

In terms of size, the biggest items attract the most attention, obviously. Size should be used to emphasize benefits. Larger fonts can be used to feature deals and promotions. Magnified images can give the visitor a granular look at what they are buying. One of the universal patterns you’ll notice in nearly all product pages is how pictures take up significant real estate. This is best illustrated by jewelry stores, which blow up pictures and videos of little diamonds many times their actual size. Here’s an example from Indian jewelry retailer BlueStone:

Screen Shot 2018-04-30 at 15.38.18

Moving on, spacing is a design aspect that doesn’t get a lot of attention these days. Instead, designers use negative space (the space around the object you want to highlight) to carefully draw focus to important elements of the layout, especially logos and images.

On product pages, the main objective of using negative space is to invoke subtle visual cues and improve comprehension of benefits and features. Viva Audio uses white space beautifully to draw attention to their product:

Screen Shot 2018-04-30 at 15.39.33

You can’t help clicking on the Look Up button, which gives you the features of the product.

The last major component of visual hierarchy to take into account is scanning pattern. The F-pattern and Z-pattern are typical ways visitors read or scan through a website page. However, that doesn’t mean you can’t influence how they traverse your pages. Goods does a great job featuring products in the middle, creating an I-pattern of its own as you scroll down the home page:

Screen Shot 2018-04-30 at 15.44.20

Whatever pattern you use, you need to be very careful you arrange media, text and CTA accordingly. The main points you want to make should ideally be above the fold and left-center while secondary bits of information can be at the fringes. A single pattern can be extended throughout the entirety of the page. It’s just a matter of putting the vital elements at the “hot spots.”

Give Shoppers Everything They Need

As consumerism shifts from brick and mortar shops to online outlets, one of the biggest drawbacks is not being able to look at items in-person or ask questions to a sales associate.

Therefore, one of the major goals with your ecommerce website should be to eliminate the need for visitors to search elsewhere for the information they need. In other words, your product pages should serve as a one-stop resource center that leaves buyers with no further questions or concerns before making a purchase.

When creating your product pages, look at each item from every angle. Put yourself in the shoes of a clueless, yet inquisitive, customer. Brainstorm as many questions as you possibly can and provide all necessary tools and insights to answer them.

As many businesses have figured out, some products are much more difficult to sell online than others. As a result, they must go to great lengths to provide all relevant information. Or else, shoppers will do their research on Google and end up buying what they on Amazon (or offline).

Take Firmoo, an online eyeglasses retailer, for example. Eyeglasses are one of those items that you typically need to go to a physical store to do things like show a prescription, take measurements, explain your preferences, discover new materials and styles, before you try a few on. Firmoo addresses all these things on their product pages while attempting to meet every need of the casual shopper:

Effective use of visual hierarchy can do wonders for your conversion rates, as well as the overall UX of your design. Failure to use it can put you at a significant disadvantage vis-a-vis your competition.

Screen Shot 2018-04-30 at 15.46.45

Everything in terms of dimensions, weight, frame and lens material and detail is clearly spelled out. Additionally, the shopper can select the type of lens according to their intended usage.

Screen Shot 2018-04-30 at 15.48.42

Truth be told, when shopping online, people never really know what they’re getting until it shows up at the front door. Ultimately, your product pages should work to leave nothing to the unknown and avoid unpleasant surprises when your customers open the box.

Shopping online will always involve a certain degree of risk. The more information you provide, the lesser the perceived risk to customers. In each of your product pages, you need to do everything you can to solidify shopper’s decisions. In essence, your messaging should reduce anxiety while building confidence.

People are typically looking at product pages near the business end of the buyer’s cycle (the decision stage). It is here that they are desperately looking for the final bit of validation that they’re making the right choice. Your product pages need to reassure them without a shred of doubt.

Be Easy to Reach

A big drawback of ecommerce is shoppers can’t simply walk up to the nearest sales associate or customer advisor when they have questions.

Truth be told, regardless of how intuitive your product pages are and how much insight you supply, it’s nearly impossible to cover EVERYTHING. There will always be questions that arise in the minds of your customers; and when they do, you need to the be there to answer them. No one wants to send an email and wait hours for a response, or call a toll-free number and listen to mind-numbing elevator music while they wait to be connected with a customer support agent.

So what can you do to be there when people need you? The answer is simple: live chat.

Online businesses everywhere have found this vehicle to be an extremely effective tool for customer service. In fact, Comm100’s Live Chat Benchmark 2017 report found that live chat leads to an average customer satisfaction rate of 84%.

Forever 21 has done a nice job incorporating this feature on their product pages:

Screen Shot 2018-04-30 at 15.54.55

See how they require shoppers to input their name, email, and initial question to begin the chat. Not only does this help support agents better assist customers, but also give more targeting data for future promotions.

Live chat is now transcending (invariably) from humans to chatbots. The popularity of chatbots in customer service is growing parallel to the evolution of mobile commerce – over 2 billion smartphone or tablet users will make some form of mobile transaction by the end of this year! With this mind, much of today’s retail support systems can be augmented by chatbots.

For one, customers can get instantaneous responses or quickly directed to the appropriate department or person. Two, bots can record historical data on previous interactions, so there is no need to validate personal information or provide context for each query.

Using manual or automated support on your product page works to add an extra level of personalization to the shopping experience while clearing up any concerns or obstacles to purchase.

Over to You

As the most crucial piece in the ecommerce puzzle, successful product pages need to exhibit a profound degree of perceptiveness. Competing with the likes of Amazon and Etsy is no cakewalk. These megabrands are changing the face of business as we know it. Product pages are where you can really show your real expertise to your customers, guide them toward making informed decisions, and prevent buyer’s remorse. Good luck creating and optimizing yours!

About Tracy Vides

Tracy Vides is an independent researcher and content strategist, who blogs about things as diverse as tech, fashion, cars, and finance. You can follow her on Twitter @TracyVides or catch all her posts on Google+.