Turum-burum

Turum-burum

How Shiny & Diski Achieved a 12.5% Increase in Conversion Rate with Microsoft Clarity

How can a redesign dramatically boost sales and conversion rates by 12.5%? This case study on Shiny & Diski’s online store showcases how targeted UX/UI improvements can streamline user interaction and enhance the overall shopping experience.

About Turum-burum

Turum-burum is a leading conversion rate optimization agency. With 14 years of experience in UX/UI design across industries like e-Commerce, FinTech, B2B Tech, and SaaS, they offer insights that enhance user experience by improving interfaces for the Ukrainian and global market, including the UK, USA, Canada, Germany, Australia, and Thailand.

Shiny & Diski at a Glance

Founded in 2012, Shiny & Diski is an official dealer for Nokian, Michelin, Continental, and Goodyear tires and discs. In its online store, customers can use a tire calculator, access detailed product specifications, and receive orders within 1–3 days via various logistics companies or at a pickup point just in three minutes after ordering. User satisfaction is the company’s top priority. 

Project Challenges and Objectives

The goals of the redesign were to:

  • Provide well-structured information and all the necessary details for each product
  • Enable easy and convenient product searches
  • Ensure a user-friendly experience across both desktop and mobile platforms

The challenge: Appealing to a diverse audience with varying backgrounds, ages, and levels of technical sophistication.

5 Key Usability Issues and Solutions

The team at Turum-burum thoroughly analyzed the site’s usability, KPIs, and customer behavior by setting up analytical tools including Microsoft Clarity. Their research revealed several usability issues on the Shiny & Diski website that negatively impacted the business’s performance.

Issue #1: Ineffective filter by brand

Problem: The site’s alphabetical arrangement of brands made searching for popular options a time-consuming process. Customers had to scroll through long lists to find the brand they needed.

When using the Brand filter before the website redesign, users frequently used the search to find their desired brand

Recommendation: Reorganize the brand list by placing the most popular brands at the top, based on analytical insights, with the remaining brands following in alphabetical order. This change would improve user accessibility and reduce search time.

After the website redesign, users actively used the most popular brands to filter the products

Result: Post-implementation data showed that users were engaging with popular brands more frequently, which significantly sped up the product selection process and increased user satisfaction.

Issue #2: Extra step to filter items

Problem: User interaction with the filter functionality was high, according to heat maps and click maps. However, to view filtered search results users had to click the “Show” button, which was a redundant step. Additionally, it only displayed the number of products that matched the filter without indicating any additional product counts for additional filter criteria.

The click map before the website redesign: the users actively used the filters and the “Show” button

Recommendation: Eliminate the “Show” button and display the number of products directly next to each filter. This change allowed users to immediately see the number of products matching their criteria, simplifying the filtering process and improving the user experience.

The click map after the website redesign: users still actively use the filters, yet the search process is faster and smoother

Result: Users continued to actively use filters after implementing this change, but the process of finding the desired product became easier and faster. By eliminating this unnecessary step and providing instant visibility into the number of products, the team streamlined the shopping process and effectively brought users closer to making a purchase.

Issue #3: Price filter button position too low

Problem: Although frequently used, the price filter button was only visible to 64% of customers, potentially hindering its use and prolonging the search process.

The Price Range filter button position before the website redesign was lower than the Brand filter button that was much less used

Recommendation: Reposition the price filter button higher up to improve its visibility and usability. This adjustment would allow for faster navigation throughout the product selection and checkout process.

The Price Range filter button position after the website redesign

Result: Microsoft Clarity scroll and click maps showed that after the repositioning of the button, approximately 90% of users saw the price range filter, resulting in increased usage. This change not only improved the user experience, but also sped up the process of finding products that meet specific user needs.

As a result, users became 15% more likely to go to the product page from the product list and 67% more likely to add the product to cart.

Issue #4: No quick size options available

Problem: In the site breadcrumbs, users frequently click on the “brand model” to visit the specific catalog page. This is likely to check for different sizes of a particular model, indicating that size information was not easily accessible.

The product page before the website redesign: users frequently clicked on the model to check available sizes

Recommendation: Allow users to see all size options for a product on the same page. This would streamline the shopping process and eliminate the need for additional searches.

The product page after the website redesign: details about the available model sizes are clearly visible and no need to search for it

Result: This change improved user engagement by allowing them to easily compare and select sizes, speeding up the purchase decision process.

Issue #5: Wrong position of item characteristics

Problem: Users often clicked on “All Features” because they were interested in product details or because the features were not visible on the initial screens. Clarity heatmap data showed that only 16% of users reached the features section, while 33% accessed the reviews positioned above the product details.

Before the website redesign: heatmaps showed that only 16% of users scrolled to product characteristics

Recommendation: Reposition the characteristics block to appear right after the photo block, with the reviews section placed after it. This change would make the product details immediately visible and accessible, eliminating unnecessary scrolling or clicking.

After the website redesign: heatmaps show that over 40% of users now access the section with product details

Result: After the change, over 40% of users accessed the product characteristics section, indicating a significant improvement in visibility. These users then naturally moved on to the reviews, improving their overall browsing experience.

As a result of all product page UX/UI improvements, conversion from the product page to shopping cart increased by 11%.

Issue #6: No search by popular categories

Problem: The homepage lacks direct links to popular categories, so users are forced to navigate through the burger menu to access specific categories. This added unnecessary steps to their shopping process.

The first three screens of the homepage before the website redesign: the users must scroll a long time to find the category links, so instead use search and/or a hamburger menu to find the needed category

Recommendation: Add a block with the most popular subcategories directly below each main product category. This would allow users to quickly navigate to the desired subcategory, streamlining their search and reducing the number of steps needed to find the right product.

The homepage’s first screen after the website redesign: quick category links-reduces search time and shortens the customer journey

Result: There was a noticeable increase in user interaction with these categories, with approximately 40% of mobile users and 15% of desktop users using via this new section.

As a result, the conversion rate for the users that came from the homepage increased by 8%, indicating a faster transition to purchase compared to previous metrics.

Redesign Results and Metrics

The hard data clearly demonstrate the positive impact of the teams improvements:

  • Overall conversion increase: The site’s CR increased by 12.5%, with notable boosts across devices — 16% for mobile and 7% for desktop.
  • Customer Engagement Surge: Users became 15% more likely to go to the product page from the product list and 67% more often added the product to the cart.
  • Improved site interaction: Users viewed 40% more products per session, with an average of 2.2 items.

Our UX analysts and CRO specialists prefer to use Clarity for analyzing heatmaps, scroll maps, video recordings, and comparing versions of A/B tests. This tool is especially useful for our eCommerce clients and helps us build hypotheses to increase conversion rates. I can highly recommend Clarity for businesses of any size.

Dmytro Kukuruza, Chief Executive Officer of Turum-burum UX/UI and CRO agency

AnswerThis.io

AnswerThis.io

image of books with text over top

Learn how AnswerThis.io more than doubled their user retention with Clarity.

What is AnswerThis.io?

AnswerThis.io is on a quest to revolutionize the research landscape through cutting-edge AI technology. At the core of the platform is a research assistant tool, crafted to meet the diverse needs of scholars and consultants. AnswerThis.io pulls data from a vast reservoir of over 200 million sources spanning a multitude of subjects and topics. Their users are primarily researchers and consultants immersed in literature reviews and data analysis within their specialized industries. In the coming years, AnswerThis.io aspires to revolutionize research methodologies by leveraging AI to streamline repetitive tasks and cultivate a more streamlined, insightful research journey. Heading this endeavor is Ayush Garg, the founder and CEO of AnswerThis.io. 

Challenge

Utilizing a visual user behavior analysis tool was essential for AnswerThis.io to understand and optimize how users interacted with its application. They started using Clarity to gather feedback on how users were using the app, and if there were issues in usability. Their goal was to refine the user experience significantly, aiming to double their user retention from 20% to 40%.  Before implementing Clarity, they lacked the means to identify usability issues effectively. Prior to Clarity, they inspected their SQL database for usage and had internal tools but they had to change their code base and push to production every time they wanted to track a new KPI. They also wanted a way to analyze user recordings, and that’s why they went with Clarity rather than going with internal tools. 

old homepage image

Old Homepage

new homepage image

Updated homepage

Using Clarity

From the onset, they integrated Clarity into their system, laying a strong foundation for data-driven insights. This pivotal decision empowered them to not only monitor key performance indicators (KPIs), such as export rates, but also delve into user behavior analytics, pinpointing areas of the website posing navigational challenges. As they progressed, they leveraged Clarity to propel user growth initiatives and attain heightened conversion rates, thus cementing its indispensable role in their strategic growth. 

Actions Taken

Utilizing Clarity’s invaluable heatmaps and session recordings, they meticulously identified friction points within their user journey. Armed with the insights from these features, they harnessed the power of data to inform their design decisions, ultimately fine-tuning their onboarding flow and refining search functionality for enhanced user experience. Some of the adjustments they made, guided by Clarity’s insights, included integrating Single Sign-On (SSO) login to bolster sign-up conversions, streamlining their app’s interface for greater user clarity, and orchestrating a comprehensive redesign of their onboarding process. They also analyzed that their search UI was confusing for some of their users based on recordings as well as conversions. They changed the search UI and saw an increase in user retention.

old search UI

Before: Old search UI

New search UI

After: New look UI

Results

They noticed while using Clarity, that a lot of users that came to the website dropped after going to the sign-up page. Therefore, they added a single sign on to vastly improve the conversions in users that came to the website and users that signed up. 

Because of this, between February 2024 and April 2024, there was a remarkable surge in user retention, soaring from a modest 20% to an impressive 50% for AnswerThis.io. Along with that, their week over week active user rate went up by 40% due to authentication being friction-less. And through analyzing how much time users spent on the results page, a KPI used to improve their AI engine, they were able to increase their average weekly query per user by 200%!

Learnings

Clarity provided AnswerThis.io with an unprecedented level of insight into their users’ behavior and pain points. By leveraging Clarity’s powerful features, they were able to make data-driven decisions that significantly improved the user experience and led to substantial increases in key metrics like user retention and mailing list sign-ups. User retention is important to them as it directly impacts their monthly recurring revenue and overall growth. The longer they retain users, the more valuable the business becomes. Clarity’s ability to visualize user journeys and identify areas of friction was particularly valuable in helping them optimize their search functionality and onboarding process. Clarity’s ease of use and comprehensive analytics has made it an indispensable part of their growth strategy. 

Clarity has been a game-changer for AnswerThis.io. The visual insights and user behavior data provided by the tool have allowed us to optimize our platform and achieve remarkable growth in user retention and engagement. With Clarity, we’ve been able to make data-driven decisions that have propelled our business forward and solidified our position in AI-powered research assistance. The tool’s ability to help us refine our search functionality and onboarding process has been particularly impactful, leading to a 150% increase in user retention.

–Ayush Garg, Founder of AnswerThis.io

Love using Clarity? Share your story with us!