How we increased transaction rate by 33% for Veloplaneta

Veloplaneta is one of the Ukrainian top sellers of world-famous cycling equipment brands. It is a chain of brick-and-mortar stores, repair shops and an online store, which, according to SimilarWeb, is visited by 210 000 users monthly.

Second website redesign in 5 years

Our partnership with Veloplaneta is quite long-standing — it was back in 2016 that we did their website redesign. As time went by, the company built their own in-house team of designers who were systematically upgrading the online store in line with the new tasks and challenges. However, in 2021, as the conversion rate appeared to be decreasing, a decision was made to turn to Turum-burum for an external consultation to obtain an expert evaluation of the work done and find growth points to increase the efficiency of the project.

UX Audit and supervision over implementation of recommendations

Since our customer had their own in-house team, the interaction type we chose was a UX Audit followed by our supervision over the implementation of the recommendations.

We conducted a UX audit of the updated website and drew up a document listing the problems for each key page and particular tools (e.g. Search). Then we prioritized all those issues using the PIE Framework and presented our recommendations on the elimination of the problems identified.

When the in-house team received the developed document, they turned to us with a request for supervision over the implementation of our recommendations, as well as for consultations on other tasks. Denis Studennikov, Head of UX/UI Dpt at Turum-burum, had an online meeting with them and gave his feedback on the work done. Once the solutions were validated by our expert, the work started.

Let’s have a look at several examples of the issues identified and the ways our recommendations were implemented.

Home page: eye-catching navigation and capturing user attention

We started the analysis from the home page. According to the analytics data, it is the third most viewed page, so we noted that the absence of the brand logo in the menu was quite crucial. It was difficult for the users to identify the store without it and prevented them from quick navigation to the home page from other website pages.

In the hamburger menu on mobile, the Product Catalog was collapsed and not quite visible. The users couldn’t see the product categories right away, so they had to make an additional move to go to the catalog sections.

The Home Page block th ine hamburger menu duplicated the logo and put down other sections.

Recommendation: The store logo should be added to the menu so that the user could see which online store he/she is actually in. Once the logo icon is clicked, the user should be taken to the home page. The hamburger menu should show the first level of the catalog, without the Home Page section. Navigation to the home page should be possible only once the logo is clicked.

‍Implementation: In the website header an eye-catching logo appeared, which, when clicked upon, quickly takes the user to the home page from any page and section of the site. Besides the icon of the hamburger menu, a new catchy “Product Catalog” button appeared, which also lets the user get to the menu. The menu was structured with the help of customized icons that help quickly navigate in the range of the store products.

Another area for improvement that we identified was lack of entry points. For example, the home page (especially on mobile) contained very few brands, half of those being unpopular and representing less than 1% of sales. Heat maps demonstrated that the users were swiping the brands without clicking on them.

Recommendation: Display more brands on the screen and prioritize them by showing top-sellers first.

Implementation: On the new website, the logos were placed in a more compact manner so that the user could see that there were many options to choose from. Besides, an opportunity to view all the brands was added with an additional accent on the wide selection.

According to the analytics data, about 50% of the users were abandoning the cart. We noted that on mobile there was no item-in-cart indicator, so we assumed that the users could buy expensive items during the second or third session, and once they re-entered the website, they could forget that there was a product waiting in the cart.

Recommendation: Highlight the cart visually. Add an item-in-cart indicator on mobile.

‍Implementation: In the new website version, we introduced bottom navigation, which is in line with modern patterns of user behavior and makes the mobile version as similar to a mobile app as possible. The item-in-cart indicator was added, with the icon being placed in the right-hand bottom corner, so that it could be reached with a thumb in a one-handed mode, even if the phone screen is big.

Product list page: convenient filtering

The filtering tool on the product list page was not working properly on mobile: after one filter was selected, the panel automatically closed. To choose several filters, the user had to reopen the panel every time, which was inconvenient and time-consuming. As a result, the site visitor could just stop using the filters and fail to find the necessary item.

According to analytics data, on mobile the users viewed 40% fewer pages than on desktop. This might have been caused by the complicated process of the product selection, so they left before they found what they needed. Besides, there was no list of the filters applied and no opportunity to clear them all.

Recommendations: The panel shouldn’t close after a filter is selected. The “Apply” button should be added. All the applied filters should be displayed in the upper section of the panel with an option to clear them –– each separately or all at once.

Implementation: The filters were placed under a separate button. Several filters can now be selected, and the corresponding button should be pressed to apply them. In the upper section the user sees all the selected filters and can clear one or all of them with just one click.

Product card: bonus program, payment by installments, cross-sell tools

Being the most visited page of the website, the product card had the biggest potential for growth and improvement of the project usability.

For example, gray size icons looked inactive, which could make users think that the item was unavailable and prevent them from choosing it. There were no image carousels –– the users couldn’t swipe photos, and clicking on each thumbnail was inconvenient and took a lot of time.

When the product was represented by one image, thumbnails took a lot of space, putting down the selection of parameters and buy-buttons, so the users could leave before scrolling down to them.

Recommendations: Change the color of the alternative parameters to a darker one; highlight the selected option with a different color or bold print.

‍Implementation: The selected option is now darker, available alternative sizes are intensely colored, and the unavailable ones are light-gray and crossed out.

There was no link to the details of the bonus program. The users could not understand how the bonuses work and where they are added. The message that no discount could be applied took a lot of space, which definitely did not facilitate the decision to make a purchase.
Besides, we noticed that there was no option of payment by installments. This could also be a decisive factor for the customers.

Recommendations: A link to the bonus program conditions should be added and open as a pop-up. The discount conditions should be displayed as an online help window and hidden by default. If the user has a discount that can be applied, it should be displayed right away. A link to the terms of payment by installments should be added.

Implementation: A link to the bonus program was introduced. When it is clicked, a pop-up window with detailed information on the conditions of the bonus program opens. The user’s attention is drawn to the benefits he/she will get as a result of the purchase.

A separate button “Payment by Installments” was introduced. When it is clicked, the user also sees a pop-up window with the terms of the installment purchase. After that he/she can proceed with using this service or go back to shop.

Cross-sell and upsell blocks. The “Related Products'' block didn’t get the users’ attention, and it was unclear what exactly the store was offering. Besides, on mobile not all the sections were displayed on the screen, so the users could leave without scrolling down all of them.

Thus, the heat maps show that the thumbnails of the related items were virtually never clicked.

Another problem was that the users couldn’t quickly add the item to the cart from the bottom part of the page.

Recommendations: Related products should be displayed as product cards –– with photos, so that the users could identify the product more quickly and get interested in it. A “See More” link to view other accessories should be added, and the “Buy” button fixed in the bottom part of the screen.

Implementation: The “Related Products” block was represented by thumbnails with real pictures of the products, short descriptions and prices. Besides, the information about the availability of the items was there now, as well as an opportunity to add them to the cart. In the upper section of the block a category switch for the related products was added. Also, a fixed button “Add to cart” was introduced.

Result of fixing the usability errors

The results of the Turum-burum and Veloplaneta cooperation were as follows:

• the transaction rate increased by 33% on mobile
• the average order value grew by 19.68%
• checkout abandonments decreased by 80%

The working process consisted of three basic stages:

1. UX Analysis. Based on analytics, user behavior and key metrics of the website, the expert identified the interface mistakes that were critical for the conversion and developed recommendations on their elimination.
2. Implementation of the recommendations by our partner’s in-house team.
3. Supervision over the implementation + consultations on other current interface issues.

This kind of cooperation suits the companies that have in-house designers but need some fresh eyes on the project. An external UX/UI expert can both share general trends in the niche of your business and provide recommendations on the improvement of your specific project with a view to increasing conversion. If necessary, he/she can also validate the implementation of the received recommendations and provide answers to emerging questions.

‍