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.
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.
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.
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.
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.
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?
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.
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.
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.
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.
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:
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.
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:
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.
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:
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.
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:
About the author: Alex Ivanovs is a digital marketing specialist with a knack for writing, UX design, and all-things success. Visit his site The Divine Indigo.
Title image from Abstract pack of vector illustrations on Ouch
https://youtu.be/e6wCzETfb6c Welcome new Lunacy, a free cross-platform vector graphics editor and prototyping tool! Designers want…
Boo! Scared you won't cope with all those Halloween visuals in time? Don’t be! We’ve…
Want to stand out on Halloween? Go 3D! 3D pumpkins, ghosts, zombies, and other spooky…
Animation adds dynamics and variety to the design. Designers often animate details in their projects,…