Are you losing clients because of a bad product page design? and a difficult to use payment or check out process?
Nowadays everyone is buying online. And usually there are plenty of webshops offering similar products. Price is a very important criteria for people to choose where to buy. Yet, what if the price difference is not that significant? In this case, the best customer serviced (user-friendly) webshop gets the client.
Recently, we helped an online book store to double their performance. We improved the visitor to buyer ratio of their mobile product pages almost twofold.
Typical mistakes for product page design
Here are 8 typical mistakes we see in product page design:
- Not looking at mobile first
- Not using the space very well
- Not putting all crucial buying info above the fold (even on mobile)
- Hiding the buy button
- Having other buttons – like a wish list button – more visible than the buy button
- Information presented in an un-organized way
- Though most us use our right hand (about 90%) having the buy button on the left-hand side
- After pressing the add-to-cart button, it is difficult to go to the next step in the checkout process
Here is what our clients’ product page looked like on a mobile device:
Do you notice how big the cover is? This means it took a lot of space. Space that is now used for all kinds of useful information above the fold, like USPs and the buy button.
Take a look here: https://www.obeliskboeken.nl/shop/cirkel-doorbroken-thea-terlouw/
How we came up with this design
First, we spent quite a bit of time to research how other successful online booksellers are doing. We looked at both the large eTailers as well as the niche book stores. We looked at how they designed their product pages for mobile devices.
One thing we noticed was that the larger eTailers had some very similar traits. Was this coincidence? We decided not.
Another question we asked: How can we use these principles while maintaining our clients’ identity?
Based on this research we went and created a benchmark on how a product page should look like in this case.
Looking at the second group of online book sellers – similar niche shops like our client – we learned a lot there too. We noted how they kept their own online identity. Not always in combination with a good user experience. We respect all having a strong identity, but we could feel their users’ pain of having to buy from their website. This is something we wanted to avoid.
We took all this information and created a brief for our designer. He was then able to come up with a first design for the front-end developer. He then made it into a new working product page with an addition to the checkout process.
An addition to the checkout process?
We noticed that the eTailers used a modal popup asking whether the user wanted to check out or not. This made a lot of sense to us. A mobile device experience should be very actionable, ie. See the book, buy the book, checkout. And that’s the experience we wanted to recreate for our client’s users.
After a few days we compared the results in Google Analytics. We paid close attention to the following relationpairs:
- Products added to cart vs product detail
- Sales vs. product detail.
Below you can see an 84,57% increase in conversions. This means our client’s business almost doubled. On top of this an increase of almost 47% more additions to the shopping cart.
Hello! My name is Feisal. I’m your personal online marketing manager. I would love to share some I ideas… Interested in a informal conversation?