Ecommerce UX: Tips to Design Better Product Pages

It’s tough to design for conversion rates. Like, really tough. And even when you do everything by the book, the increase in conversions is nominal (~2.5%) at best. But, is that all to expect? Absolutely not.

Although any kind of an ecommerce design project can be extremely challenging, you can always find ways to guarantee success. Sure, web design has got more complex over the years. Even a small ecommerce store selling t-shirts might require up to 3-4 unique layouts for each consecutive page. Not to mention that seemingly trivial elements such as search forms can greatly impact your sales numbers, too.

It can feel like it’s a lot to take it all at once. But, it need not be. In this article, we’re going through several tips and tricks to help you design better product pages.

Ecommerce statistics to keep in mind

Understanding statistics and common trends can help you make better data-driven decisions. By understanding the consumer thinking process, you can create impactful choices for your design roadmap.

#1: Price comparison is huge amongst shoppers

KPMG reports that up to 65% physical store shoppers will use their smartphone to compare prices online.

You can use this to your advantage by exposing your products in places where shoppers are likely to look first.

One such place would be Google’s Shopping listings. You’ll need to use Product Listing Ads (PLA) to have your products displayed in ecommerce search results.

#2: Cart abandonment rate is soaring worldwide

It’s easy to get caught up in numbers that make you feel like you’re doing something wrong. According to Statista, the global cart abandonment rate has remained consistent in the 69-70% range.

Even the slightest decrease in cart abandonment can result in substantial revenue growth. One way to tackle this is by ensuring that the checkout process is as seamless as possible.

#3: Mobile site performance impacts sales directly

In a recent report, Google has stated that “If people have a negative experience on mobile, they’re 62% less likely to purchase from you in the future—no matter how beautiful or data-driven your marketing campaigns are.”

So, there’s no question that performance (mobile or otherwise) should be of utmost priority for your design process.

We’ll touch on this more throughout the article as there are several design elements which directly affect the performance of your online store.

Alright. Now that we have statistics out of the way, let us take a closer look at the tips and tricks for designing better product pages.

How visuals affect product perception

I’m sure that in the next 100 years, technology will have evolved to the point of letting shoppers feel a product from the comfort of their screens. Augmented reality trends are certainly pointing us in this direction.

But, we’re not there yet. And the best substitute for product interaction is through visuals such as photos and videos. 9 out of 10 consumers say that visuals are the most influential aspect of making a purchase decision.

The question is, how do you apply visuals to your product page design so that they promote confidence and sales?

#1: High-quality, multi-varied photos

Consumers recognize cheap photos just like they recognize cheap products on a physical store shelf. It’s not the direction you want to take. Instead, invest in photography that brings your products to life.

Crazybaby, a brand specializing in wireless headphones, use their product pages to showcase every angle of their product, including technical details.

Baymard did an extensive case study on product page UX and found that up to 40% of consumers will use photography as a means to understand the size of a product.

In short, you can use photography to answer consumers’ questions before they make a purchase. Will it fit in their pocket? Is it waterproof?

For every feature your product has, you can create a separate photo and use it as part of your overall product page design.

#2: Incorporate lifestyle photos

A photo of a t-shirt hanging in on a coathanger is not the same as a t-shirt being worn by a real person. The difference is huge.

By having a model wear the actual product you’re selling, consumers will get a much better idea of what the product looks like from different angles.

Photo credit: Anna

Not all materials look the same on every body type. You can go as far as to mention the exact body type of the model you’re using to give consumers a better idea. Among other things, you can provide photos for product variations, different colors, sizes and details. This applies to products outside of clothing, too.

#3: Optimize before publishing

The average size of a web page is getting bigger. This is a fact.

And images tend to make all the difference.

So, it’s crucial to optimize your photos before you publish them. Look into the srcset attribute which is intended for use on responsive sites. This lets you specify different image sizes for different devices.

As a general rule, you don’t want to serve a 1200×800 photo for mobile users. With srcset, you can specify different dimensions for all device types.

The role of copywriting in UX

Whether it’s headlines or product descriptions, copywriting plays a major role in boosting your sales. If you’re looking to get people to buy your products, copywriting is arguably the most important skill you can learn.

Here are 3 principles of great product page copy:

Be relatable. People are more likely to buy your product if you tell them why you built it as opposed to telling them “it’s the best there is”. Sales jargon is a no-go!
Stay on point. Design real estate is precious. Long sentences quickly turn into content that people will “scan” rather than read.
SEO. Organic traffic is important. One way to tackle this is by providing a “Read more” button for longer descriptions. Especially if you’re working with extremely creative product page designs.

You can relate to your customers in many different ways. Leaf Shave specializes in cartridge-less razors. Besides the great product, their sales pitch is “a plastic-free shaving experience”.

Take note of the quirkiness in this copy. This is a perfect example of how copywriting can be used to portray a strong brand image.

Here as well, Leaf Shave is being transparent about their business model. There’s emotion as much as there is humor. This makes the copy both relatable and deeply engaging.

One could argue that the world has a fundamental problem with plastic. But, would this copy sound the same if it was written in a negative tone, putting blame on brands that don’t provide a plastic alternative? Not at all.

Learning a little about topics like the tone of voice can go a long way to help you write copy that speaks to your customers.

Branding as part of your product page design

To stand out, you have to lean towards design uniqueness. And the most straightforward way of staying unique is through branding.

In the current era of web design, branding is achieved through a few simple steps:

Design consistency. The use of the same design style across all website pages. Internal and external.
Creativity. The use of creative visual design elements such as illustrations and shapes.
Color. The use of color as a means of website navigation.

All in all, consumers should be able to recognize your brand anywhere they look.

In this example, Lavva is going for an engaging and creative design style. It makes certain page elements stand out.

Also, the actual design of their product packaging reflects the design of their homepage. In other words, their brand image.

Further, their social media pages are also structured around the same colorful design style. So, it is without question that consumers would be able to recognize Lavva as a brand whether it’s online or in a physical store.

The same cannot be said about ecommerce giants such as Amazon and Alibaba. Both platforms provide limited scope for brands to design their product pages in a meaningful way.

Reiterate your checkout page

As we discovered earlier, the average cart abandonment rate is generally around 70% when looked at on a global scale.

There are a lot of reasons why consumers might abandon their cart. To better illustrate this, here’s data taken from a Baymard study.

A lot of these reasons can be solved specifically through design. Things like “create an account” or “overly complicated” can be resolved through convenient UX implementations.

Good checkout pages are simple to use yet provide answers to critical questions.

For the most part, consumers will want to know about shipping rates, return policy, and whether they can pay with their preferred payment method.

In this example, we’re looking at the checkout page from Luxy Hair.

Here is a rundown for each numbered section:

Clearly defined customer value. Shipping type, return policy, and customer support.
In-depth information on common consumer questions.
Efficient payment process where shoppers can purchase with one-click using PayPal or their credit card.

Best of all, there is nothing distracting me from making the purchase. The entire page is dedicated to checkout only.

The same Baymard study also reports that “The average large-sized e-commerce site can gain a 35.26% increase in conversion rate through better checkout design”.

So, to summarize, focus on creating clean and fast checkout pages which let shoppers purchase their items quickly and efficiently.

Conclusion

Your product page design should always reflect the best qualities of your brand. In most cases, being informative and engaging with your shoppers is just about enough to ensure a steady flow of sales.

Here is a summary of our tips on product page design:

Data can be used to understand the roadblocks consumers have during their shopping experience.
High-quality and professional visuals are a must-have to ensure shoppers get a proper feel for your product.
The tone of your brand’s voice is largely dictated by the copy you’re using. How do you wish to be heard by your customers?
Branding makes you recognizable both on the web and outside of it.
Cart abandonment rates can be improved by optimizing your checkout pages.

About the author: Alex Ivanovs is a digital marketing specialist with a knack for writing, UX design, and all-things success. Visit his website Stack Diary.

Title image from Abstract pack of vector illustrations on Ouch

Read how to integrate brand identity into digital products, check the actual ecommerce trends and learn how to create accessible search forms.