Social Proof - Product Feature

Social Proof -
Product Feature

INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION

INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION

Overview

Company

Moonshot Marketing

Role

Product Designer

Year

October 2023

Status

Developed

About Project

The company utilizes a custom CMS to manage multiple consumer comparison websites, offering detailed insights, reviews, and promotional deals for partners' products and services. Within the CMS, several comparison table templates are available. My task was to integrate a single social proof element, displaying a number of users who selected a particular provider, into four table templates across various products and verticals.

Objectives

Improve conversion rates and users' trust in the product recommendations

Increase users' engagement and time spent on the comparison tables.

Provide users with additional information and context to make well-informed decisions.

Challenges

Each table template has a unique card layout and is designed with four to seven breakpoints.

There are multiple card layout variations within one table template which vary depending on the project.

The current solution has proven to be ineffective.

Solution

To integrate the social proof element into a popping-up tooltip above or under the buttons of the first three providers, depending on the card layout.

VIEW LIVE PROJECT

Workflow

Existing solution analysis

1

1

Reasons for the solution failure

Competitors analysis

Product research

2

Feature component

Feature integration

Interactions

3

Interactive prototype for 4 comparison templates

Overview

Company

Moonshot Marketing

Role

Product Designer

Year

October 2023

VIEW LIVE PROJECT

VIEW LIVE PROJECT

About Project

The company utilizes a custom CMS to manage multiple consumer comparison websites, offering detailed insights, reviews, and promotional deals for partners' products and services. Within the CMS, several comparison table templates are available. My task was to integrate a single social proof element, displaying a number of users who selected a particular provider, into four table templates across various products and verticals.

Objectives

Improve conversion rates and users' trust in the product recommendations.

Increase users' engagement and time spent on the comparison tables.

Provide users with additional information and context to make well-informed decisions.

Challenges

Each table template has a unique card layout and is designed with four to seven breakpoints.

There are multiple card layout variations within one table template which vary depending on the project.

The current solution has proven to be ineffective.

Solution

To integrate the social proof element into a popping-up tooltip above or under the buttons of the first three providers, depending on the card layout.

Workflow

1.

2.

3.

Existing solution analysis

Reasons for the solution failure

Competitors analysis

Product research

Feature component

Feature integration

Interactions

Interactive prototype for 4 comparison templates

A/B Test

Test Durations

25 days

Sample Size

Variant A (original) - 12 568

Variant B (new) - 12 656

Detection Sensitivity

Medium

+0.2%

Earning Per Click

+0.7%

Sales/Clicks

+0.6%

Leads/Clicks

+0.5%

Outbounds/Clicks

Hypothesis

Changing a social proof element will increase Earning Per Click.

User Hypothesis

Integrating a social proof element into comparison tables will enhance user engagement, establish trust and credibility, and guide users in making informed decisions across various product verticals.

Result

Significant winner: Variant B

A/B Test

Test Durations

25 days

Sample Size

Variant A (original) - 12 568

Variant B (new) - 12 656

Detection Sensitivity

Medium

Hypothesis

Changing a social proof element will increase Earning Per Click.

User Hypothesis

Integrating a social proof element into comparison tables will enhance user engagement, establish trust and credibility, and guide users in making informed decisions across various product verticals.

Result

Significant winner: Variant B

+0.6%

Leads/Clicks

+0.5%

Outbounds/Clicks

+0.2%
+0.2%

Earning Per Click

+0.7%
+0.7%

Sales/Clicks

+0.5%

Outbounds/Clicks

+0.6%

Leads/Clicks

DESIGN PROCESS

1 STAGE

Existing Solution Analysis

When I received this task, only one comparison template included a social proof element: a static text positioned at the footer of the first provider's card. This element proved to be ineffective.

Possible Reasons for the Solution Failure

The social proof element is obscured by the abundance of data within the card

The social proof element is obscured by the abundance of data within the card

1

1

The font size of 12px is too small, which can result in readability issues

The font size of 12px is too small, which can result in readability issues

2

2

The poor contrast ratio between the element background and the text affects readability

The poor contrast ratio between the element background and the text affects readability

3

3

Having the social proof element exclusively for the first provider may lead to mistrust among users

Having the social proof element exclusively for the first provider may lead to mistrust among users

4

4

2.1 STAGE

Competitors Analysis

I investigated both direct competitors and popular marketplaces like Booking.com and Amazon, identifying two potential design approaches: integrating the social proof element within the tables' cards or incorporating it as a popping-up element.

Static Text Under the Score

The element is always visible.

It is obscured by the abundance of data within the card.

It changes the card layout, requiring separate development efforts for each comparison template.

This approach is similar to the current solution, which proved to be ineffective.

Static Text Under the Score

The element is always visible.

It is obscured by the abundance of data within the card.

It changes the card layout, requiring separate development efforts for each comparison template.

This approach is similar to the current solution, which proved to be ineffective.

Tooltip for the CTA

The element is clearly visible, ensuring users notice it easily.

It doesn't change the card layout, simplifying the development process.

It's visible only for a few seconds.

It exists exclusively for the first provider with the trigger of the appearance animation - page loading.

Tooltip for the CTA

The element is clearly visible, ensuring users notice it easily.

It doesn't change the card layout, simplifying the development process.

It's visible only for a few seconds.

It exists exclusively for the first provider with the trigger of the appearance animation - page loading.

2.2 STAGE

Product Research

Here are four comparison table templates for which the feature integration was requested. Each template has multiple layout variations that vary depending on the project. The image below displays some popular layouts for each template.

Feature Component

Considering the analysis of the existing solution and the diverse layout variations of the table templates, I opted to implement the feature as tooltips for the first three providers' buttons. This approach enhances the visibility of the element, emphasizes the buttons, and also streamlines the development process.

Considering the analysis of the existing solution and the diverse layout variations of the table templates, I opted to implement the feature as tooltips for the first three providers' buttons. This approach enhances the visibility of the element, emphasizes the buttons, and also streamlines the development process.

3.1 STAGE

Feature Integration

To determine the tooltip placement relative to the buttons, I collaborated with a product manager to identify implementation projects and with PPC managers to understand the most common card layouts for these projects.

Comparison Template 1

Project

Meal Delivery

Vertical

Lifestyle & Tech

Comparison Template 1

Project

Meal Delivery

Vertical

Lifestyle & Tech

Comparison Template 1

Project

Meal Delivery

Vertical

Lifestyle & Tech

Comparison Template 2

Project

Car Loans

Vertical

Finance

Comparison Template 2

Project

Car Loans

Vertical

Finance

Comparison Template 2

Project

Car Loans

Vertical

Finance

Comparison Template 3

Project

Pet Insurance

Vertical

Finance

Comparison Template 3

Project

Pet Insurance

Vertical

Finance

Comparison Template 3

Project

Pet Insurance

Vertical

Finance

Comparison Template 4

Project

Casino UK

Vertical

Gaming

Comparison Template 4

Project

Casino UK

Vertical

Gaming

Comparison Template 4

Project

Casino UK

Vertical

Gaming

INTERACTIONS • IINTERACTIONS • INTERACTIONS • INTERACTIONS • INTERACTIONS • INTERACTIONS • INTERACTIONS • INTERACTIONS • INTERACTIONS • INTERACTIONS • INTERACTIONS • INTERACTIONS

Desktop & Laptop

Desktop
& Laptop

The tooltip is integrated into the buttons of the first three providers. The appearance animation is triggered by hovering over the buttons. Additionally, for the first provider, the tooltip appears when the page is loaded.

Mobile
& Tablet

Mobile
& Tablet

The tooltip appears on mobile and tablet devices when the buttons are in view. The element disappears after three seconds.

The tooltip appears on mobile and tablet devices when the buttons are in view. The element disappears after three seconds.

Possible Reasons for the Solution Failure

The social proof element is obscured by the abundance of data within the card

1

The font size of 12px is too small, which can result in readability issues

2

The poor contrast ratio between the element background and the text affects readability

3

Having the social proof element exclusively for the first provider may lead to mistrust among users

4

Next
Project

Social Proof

2023

Next
Project

Web Portal Design

2023

Next
Project

Web Portal Design

2023

MR

ABOUT

WORK

CONTACT

MR

ABOUT

WORK

CONTACT

MR

INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION • INTRODUCTION

Workflow

1.

2.

3.

Existing solution analysis

Reasons for the solution failure

Competitors analysis

Product research

Feature component

Feature integration

Interactions

Interactive prototype for 4 comparison templates

Create a free website with Framer, the website builder loved by startups, designers and agencies.