top of page

Comparison

Review and compare the best products

Scope

UX Research

UI Design

Overview

In this project for Exon-Media, I built price comparison websites and redesigned existing websites with responsive for mobile, tablet, and desktop, building a design system from scratch & rebranding.

Tools

Figma

Illustrator

Mirro

Photoshop

About The Project

When a user is looking to buy a product, he researches websites and tries to compare prices, but does not always make a purchase because he cannot decide which product is best for him.

Problem

There are hundreds of products and it takes a lot of time and knowledge to compare all the products and choose the product that best suits that user.

Solution

Make the best product available to the user in such a way that he can see the product that suits him best or compare products and check the values of
each product.

Design Process

Research

01

02

Define

Competitive analysis

Key insight

Guiding principles

Personas

03

Ideate

04

Design

Original experience

Wireframe

A/B testing

Heatmap

Style guide

Visual design

Research

RESEARCH

Competitive Analysis 

I did research on similar and competing sites and chose to focus on the top 3 companies.

Group 18095.jpg

Key Insights

Focus the user on the center of the screen, arrange the product details in such a way that it is convenient for the user to quickly scan all the products and direct him to make a purchase.

Pain Points

The user does not want to search for all the products on the Internet, he wants a place that will do it for him, with access to the tech specs for making a comparison

Guiding Principles

01

All in one place

We collect products from various sources and recommend the best product to the users

02

Simple comparison

The user can compare features and tech specs between many products

03

Simplified UX

Create an intuitive and easy to use, navigation experience with a clear hierarchy and CTA

04

Build trust

Be transparent about how we choose products and how we rate them

Define

DEFINE

Persona

31, Engineer, NY, US
Education: Master's degree, Engineer
Income: $11,000
Status: Single

DAILY TASK:

How often do you shop a month?

22-25

How long it takes you to buy a product?

30 Min

How much do you buy every month?

$800

Are you satisfied with your purchases?

6

GOALS:

  • Choose the best product for him

  • Compare products

  • Choose from a wide variety of products

FRUSTRATIONS:

  • There are too many products to choose from

  • It takes time to research the products

  • Many websites are overloaded with too
    much information

Ideate

IDEATE

Original Experience

I tried to focus on several UX and UI points in the redesign process.

The logo is too prominent

Category might get cut off on a narrow screen

The best choice tag is not highlighted enough

Missing Breadcrumbs

Lack of white space

The search button appears in red and feels like a warning

The information is not organized well enough and hard to screen

CTA should be more prominent

The score is too prominent

There is no typographic hierarchy between the elements

Wireframe

Design

DESIGN

Product Components A/B Test

As a part of the redesign I designed a few options for the product component which is the mean component of the page, we did a quick test to see which component performed better

A

20% visitors
see variation A

B

80% visitors
see variation B

The discount price did not stand out

We wanted to direct users to the best product, But it caught too much of their attention

Our product rating was not highlighted enough for the users

I shortened the cube and reduced spaces to allow the user to see more products while scrolling

Search Page Final Design

Based on the A/b testing, we chose the best option, and we saw a 14% increase in sales

14%

Increase in sales

Heat Map & Navigation

Through tests, we were able to identify the level of conversions, how the user scans the site and how to improve
the design.

Additional Screens On The website

Home Page

The user can read blogs about products and product comparison experience, See the top categories, and how we choose the product for him.

Compare

Here the user will be able to compare the values of each product such as features, technical specifications
and more.

Search Products

A quick overview of the 10 most suitable products for the user, highlighting the best product/value and continue reading about the product by clicking Show More.

About Us

The user can read about the way we scan our products and how we make sure to find the best product for him.

Typography

Inter

Bold  |  Semi  |  Medium  |  Regular 

Aa   Bb   Cc   Dd   Ee   Ff   Gg

Main Colors

Icons

NEXT PROJECT

bottom of page