Adlibris was launched in 1997 and for 18 years it was exclusively dedicated to book sales. Since 2015 it started to diversify its product portfolio, adding 5 more categories. Adlibris has positioned itself as one of the most popular e-commerce sites in Sweden with an average of 50.000 daily visits.
Of the total visits to the site, 10% are to the product page. As the purchase decision is made here, it’s one of the most important pages in the site. With a conversion rate of 3%, we knew we could increase it, so the product team was tasked to get users insights and identify issues in order to increase the conversion rate.
As Adlibris has a shop in the hearth of Stockholm, we did on-site interviews to find answers to two questions:
1. How were users using the product page?
2. What users wish it had.
We decided to focus on Mobile first as it’s the device with most traffic. On Cyber Monday 2018, 54% of all visitors came from mobile devices. We conducted interviews with a total of 10 individuals, with 8 using mobile devices and 2 using tablets. Each of them got an Adlibris voucher they could redeem in the shop. Some key insights gathered after the interviews were as follows:
• People wanted the product name, price and purchase CTA over the fold.
• For products available in different colours, they noted that there’s no possibility of checking the different options without leaving the product page.
• People wanted to be able to zoom into the product and have a better view of it.
• Yarn customers buy 8 yarns per order on average, so the option to choose the number of units in the product page was valuable for them.
Another method we applied was using heat-maps through Hotjar. They showed how users were really using the non-books product page and wouldn’t be said during the interviews.
The results dropped some very interesting facts. Naturally, people would press on add to basket and read more. But the CTA That got the most clicks was see more under the other colour suggestions. That was said in the interviews and it was shown here as well. It also showed that users would scroll down until the “see more” CTA and would ignore the “you might like” section and the footer.
Although a few other things didn’t show up in the tests, we knew they could be improved. One example was the low colour contrast between the background and the text of the add-to-basket button. On the desktop version we removed the suggestions bar on the right side of the page (as it was just a distraction) and reorganised the different feature descriptions of the product.
Once the UX research finished I had gathered enough information about what needed to be done. Different products needed to have different information sections but the ideal solution was to have a template that would fit all products.
On the first iteration (1) I fit the product image, product name and “add to basket” CTA above the fold. The problem here was that the breadcrumbs could be 3 to 4 line long and the product name could be very long as well, making it very difficult to fit the CTA over the fold. The only way the CTA was always visible above the fold was to have a fixed footer. The footer was a good solution but I was still having a problem with the long breadcrumbs and product title, leaving very little space for the product image.
On the second iteration (2), It was decided that the breadcrumbs would be moved to the bottom of the product description and the delivery information would be placed somewhere else. It was also added the option to zoom on the product page as well as display a video on the product image carrousel. The final touch was the re-design of the added to basket notification.
In the design of the book product page there were many iterations until we got to the final optimal design. From there we would take it as a start point to design the other product pages as such as e-book, audiobook, clothes, food or yarn (shown below)
After the mobile version design was set, I started designing for desktop, which was less of a challenge because there would be much more space available. The biggest iteration was to suppress the side bar with product suggestions as it was just taking clicks away from the add to basket CTA.
