Old product tiles
Imagine you are looking for a new 11-speed cassette with 11-34 teeth for your fancy road bike. In the summer of 2024 these were the product tiles on our website where you had to find it!
Hint: this is how the full name of the products look like: Shimano 105 CS-R700 11-Speed 11-34 Teeth And this is what we show: Shimano 105 CS-R700 ...
This is exactly what few of our customers pointed out to us when we interviewed them about their experience shopping with us.
Problem
Product names and images contain important information that users need but it’s hidden in our current design.
So, if we improve the usability of the product tiles we will help users find the best product for them faster which will increase conversion rate by at least 2%.
This is how we planned to do it
Discover & Define
Customer problems
Problem 1: Important information is truncated from product names
In our interviews with users we have discovered our main problem with our product tiles - customers found it frustrating that they have to navigate back and forth from product lists to product details pages because they don’t see the full name of the product.
Problem 2: Product images are very small
Product images are way more important for our users than we realised. They also contain important compatibility information. Especially for parts. And our product tiles only show a single image in quite small size.
Problem 3: Missing original price on discounted products
Our mobile tiles were missing the original price of the discounted products. During our research we realised this was very important to our users.
Problem 4: Tile design is complex and difficult to scan
Current tiles found to be very complex and difficult to orient due to not clear visual hierarchy.
Discover & Define
Competitors' solutions
Competitors use smaller font size to display more information
We analyzed top competitors' product tile designs, especially noting how they solve long product names without making them overly cluttered.
Competitors display bigger images and some have image gallery
Some competitors used clever ways to display bigger images, especially on mobile by using the full width of the screen. They also use different ways of displaying multiple images like changing an image on hover or an image gallery on swipe.
Discover & Define
Internal limitations
All of our images have white backgrounds
The images of all 200 000 products have white backgrounds and that restricted our designs. Luckily after a little technical investigation we found a way to remove it with code. And that allowed us to use any background we want.
Product data structure is not flexible enough
The product details that the name contains are not separated in our database so it is very restrictive when it comes to splitting, for example, model name and model variant. We needed to find a way to separate that data reliably for all products.
Our solution
Tiles with full product name, bigger and more images
We have taken some risks to achieve good visual design
Discount Badge: We opted for a subtle yet visible discount indicator to avoid overwhelming the design and to leave the image as uncluttered as possible. Brand Name: While important, we decided to combine brand and model name as we thought this would help the customer with scanning. Delivery Time Icon: This was moved to a less prominent position to prioritize product details and pricing information.
De-risk
Test how fast users find products
30% Faster product discovery!
We conducted user testing on a prototype to measure the time it took for users to find the correct cassette (11-speed, 11-34 teeth) and few other similar tasks using both the old and new designs. The results showed 30% faster.
Deliver & Iterate
We built it, didn’t work, we iterated until we made it work.
First iteration. Fail.
So, confident it will work we developed it but we needed to make sure it works so this was an AB test we were all looking forward to very much! Old tiles vs new tiles! Unfortunately, the result was negative. The new tiles did not perform that well in terms of conversion rate. Back to the drawing board. Fast!
Second iteratation. Better performance but not enough.
We went back to the risks that we made in favour of beautiful designs and brought the dsicount badge as we though this was the strongest element that may be responsible for the low performance. This indeed brought us better results but it was not nearly what we expected. So, after we AB tested it again we decided it is time for iteration number 3.
Third iteration. 3% increase in conversions!
Iteration number 3 included highlighting the product brand name and this ultimately made the difference.
As a result, we saw a 3% increase in conversion rate.
3% increase in conversions and right on time for Black Friday week which amplified our results which ultimately led to one of the most successful sale campaigns in the last years.
What did not go so well.
We did not properly understand how important brand names are for our customers and that led to the bad initial result. Luckily we were aware that this is a blind spot for us and were ready to test it very quickly.
We had a very hard deadline due to the Black Friday week. That created a lot of pressure to come up with a version that converts better than the current ones. Regardless of the pressure we kept cool and delivered.
Initial results from AB tests were not great which created quite a bit of pressure on the team to do something. At times panic sneaked it but we knew the risks we made initially and which were essentially our backup plans.
Kudos
I was the lead designer responsible for research and design BUT I would like to express my heartfelt gratitude to the remarkable team behind our success.
A special thanks to my fellow product designer, Fabio, for his creativity and collaboration, which greatly enhanced our design solutions. I also appreciate our product manager for his strategic vision and leadership, keeping us aligned with our goals as well as the engineering team that made it all happen. Finally, thank you to the head of product for your unwavering support and guidance, which empowered us to achieve outstanding results together.
