Context

Implementing an updated tire compare feature on desktop and mobile platforms aims to boost user engagement by offering a seamless experience.

The goal is to improve user satisfaction, retention, and ultimately drive conversions through consistent and user-friendly accessibility across devices.

Problem

The existing tool for comparing exhibits a high exit rate, posing challenges in seamless comparisons, and its information hierarchy is not user-friendly.

Compare Feature Leadership Report → Link

Ask permission to see my report!

Team

UXPA

Principal UX Designer

UX Researcher

Sr Store Experience Specialist

Product + Quality Program Director

Sr Business Systems Analyst

Software Engineer

Tools

Figma

Content Square

Baymard

NNG

Metrics

Conversion Rate

My Role

UX Researcher

Competitive Analysis

Analytics

Timeline

Research – 1 week

Scope

Analytics

Benchmarking

Design Proposals

Compare Feature Background

This project addresses the rising significance of online platforms, especially mobile devices, in tire purchasing decisions. Focused on enhancing user experience, it aims to provide a seamless tire comparison tool across desktop and mobile interfaces, catering to evolving user preferences and positioning the platform as a user-centric destination for informed tire purchases.

Goals ✨

• Enhance User Experience: Achieve a 20% increase in user satisfaction scores based on post-interaction surveys conducted quarterly.
• Increase User Engagement: Achieve a 15% increase in the average time spent on the tire comparison feature within the first six months of implementation.
• Drive Conversion Rates: Attain a 10% increase in conversion rates for users who utilize the tire comparison feature before making a purchase.
• Optimize for Mobile Accessibility: Achieve a minimum 25% increase in mobile user engagement with the tire comparison feature within the next quarter.
• Expand Tire Database: Increase the number of available tire test ratings by 30% in next 6 months. To allow for a broader comparative selection for users.

⭐️ Insights

Long Scrolling on Compare Page

Our competitor's compare pages are shorter than ours including our sister company Tire Rack.

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/5d7d991a-e036-4ea0-9330-e824181f7da3/5ef37959-f5bd-4b57-b35f-751bd1d8e498/costco-favicon.ico" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/5d7d991a-e036-4ea0-9330-e824181f7da3/5ef37959-f5bd-4b57-b35f-751bd1d8e498/costco-favicon.ico" width="40px" /> Costco

Scroll Rate: 1960px

</aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/5d7d991a-e036-4ea0-9330-e824181f7da3/7512399f-db78-484c-aa82-acb57a0d59f1/goodyear-favicon.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/5d7d991a-e036-4ea0-9330-e824181f7da3/7512399f-db78-484c-aa82-acb57a0d59f1/goodyear-favicon.png" width="40px" /> Goodyear

Scroll Rate: 2200px

</aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/5d7d991a-e036-4ea0-9330-e824181f7da3/032ecad2-8c7d-41db-ad46-33aeaf804af4/TR-favicon.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/5d7d991a-e036-4ea0-9330-e824181f7da3/032ecad2-8c7d-41db-ad46-33aeaf804af4/TR-favicon.png" width="40px" /> Tire Rack

Scroll Rate: 443px

</aside>

<aside> <img src="/icons/car_red.svg" alt="/icons/car_red.svg" width="40px" /> Discount Tire

Scroll Rate: 3500px

</aside>

<aside> ⭐ Efficiently consolidating information will shorten the page and facilitate quicker decision-making for our users and store employees.

</aside>

Above the Fold

Impertinent information should be above the fold:

Call to action buttons

Should be above the fold, DT does not have it currently.

Info Overload of Product Cards

With more than three comparison options, the zones become compressed, and the displayed information is stacked.

Competitor Insights

Goodyear is a great example to follow

• High-level information
• Customer Delight

<aside> ⭐ Whether dealing with customers directly or managing in-store interfaces, it is always advantageous to minimize cognitive load for our team and ensure that the user interface supports seamless journeys.

</aside>

***Above the fold ***

Displaying NA

Whether it's storefront or customer-facing

What to do when data is not present

Displaying a repetitive callout such as "NA" creates a perception of breakage. Both store and customer users may question the reason for its display, seeking additional context to understand why there is no information available for them.

<aside> ⭐ Copy + UX Suggestion: Follow Tire Racks ‘Pending’ with a tooltip

</aside>

Baymard

Whether it's storefront or customer-facing:

Remove identical attributes:

On sites where rows with specs shared by all products can be hidden, users can instead focus only on differences, cutting down the time needed to decide which product is most suitable.

<aside> ⭐ UX Suggestion: Instead of a simplified vs complex toggle view, users care about just seeing the difference between products vs repeat information they have to sift through

</aside>

Color Box Shading

Highlight attributes that differ between products, allowing users to quickly assess those that vary across items.

<aside> ⭐ UX Suggestion: To facilitate rapid decision-making, incorporate colors to easily distinguish which tires are superior, avoiding confusion.

</aside>

Group attributes by category

We currently do this!

Colored Rows

For example, without horizontal lines or alternate colors to visually separate the rows, users are more likely to lose their place as they scroll and try to trace attribute labels on the left to associated values in columns on the right.

<aside> ⭐ Add On UX Suggestion: On desktop, providing on-hover highlighting can further reduce users’ scanning efforts.

</aside>