Product Design Case Study 2024.

Flexible Compare Page Template

Section template for company CMS system.

12

Variable parameters:

Compare table offers customization through Ribbons, Buttons, Card layout, Score Type, and Text alignment.

48 +

Template variations:

Combine parameters to create diverse

table options.

5

Platforms:

Template designed for Desktop, Desktop with sidebar, Tablet, and Mobile devices, ensuring seamless integration.

2

Read Review

50 Bonus Spins

+ Up To £1000 Back

Ocean’s Treasure

Ocean’s Treasure

Ocean’s Treasure

4.3

User votes

GET BONUS

visit 888 Casino

User’s Choice

18+. New UK customers only. Min bet. New player offer - T&Cs apply 18+, Begambleaware.org 18+. New UK customers

Read more

Project Objectives

About:

Multiple affiliate marketing websites are supported by the company through a custom CMS system. These websites function as resources for users exploring online casino options, providing detailed insights, comparisons, and promotional offers. Simultaneously, they operate as affiliate marketing tools for featured casinos.

Problem:

The website builder system currently features four similar but underutilized compare page sections. This underutilization results in increased difficulties in system support.

Solution:

A solution is proposed to create a single section inheriting properties from existing compare tables. This ensures flexibility for use across different affiliate sites, addressing the underutilization issue and simplifying system support challenges.

Workflow

Analysis

  • Product research

  • Competitors research

  • User Persona

UX

  • Card Wireframe

  • Compare page Wireframe

UI

  • Dark version

  • Light version


Framework

Project limitations and guidelines.

Existing

Design System

The new section has been created using only existing and developed

components.

Color

attachment logic

To create seamless transitions between Light and Dark themes, color attachment logic was taken into consideration.

Platform

Limitations


Knowing in advance that some features would increase development time, dubious features were excluded from prototyping.

Analysis | Product research

Analyzing Existing Sections:

Establishing Main Parameters

In the examination of four current compare table templates, a compilation of parameters and features that should

be inherited by the new section has been undertaken.

01

Logo

Basic functionality. Size and side ratio are designed to accommodate any type of logo.

02

Main offer

Basic functionality. Positioned as the primary focal point for the user.

03

Score

Basic functionality. Multiple options for different score types are sourced from the Design System..

04

CTA

Basic functionality. Various button options are available from the Design System.

05

Legal Info

Basic functionality. Should have a "Hide" option to minimize space usage.

06

Read Review Link

Basic functionality. ontains a link redirecting to the review page.

07

Table Header

Basic functionality. Inclusive of an "Info" section.

08

Highlighted Card

Additional. The first card should offer an option for an icon and stroke.

09

Min. Deposit

Additional field. Provides an option to emphasize deposit choices.

10

New Customers info

Additional field.Offers an option to highlight the special offer for new customers.

11

Ribbon

Additional field.Incorporates multiple ribbon options from the Design System.

Analysis | Competitors research

Analyze Competitors:

Additional Features

In the exploration of competitor websites, features were sought to enhance our template. The selection focused on features commonly searched by users and those not reliant on parameters sent by API due to development limitations.

Rating

Legal Info

Offer

Ribbon

Payout Time

Payment Methods

Win Rate

Min. Deposit

Interactive animation

Bullet-points

Amount of Games

More Details

Position Number

Bonus Wagering

Casino Games

Bonus Code

Read Review Link

Selected Implementations:

01

Casino Games

Users often search for specific casino games. Implementing this feature may increase the likelihood of user interest in offers related

to these games.

02

Interactive Animation

Drawing on our experience, the incorporation of interactive animation has been chosen. Such animations have demonstrated an increase

in user engagement.

Analysis | User Research

User Research:

What to Highlight?

By comprehending their goals, pain points, and online behaviors, our design approach is tailored to highlight features that hold significance. The insights gained from user behavior guide us strategically in implementing enhancements

for an optimized user experience.

James Smith, 28

UK, Birmingham

Freelancer

Goals:

  • The identification of the most rewarding online casino experiences in the UK.

  • Maximizing bonuses and promotions offered by online casinos.

  • Discovering new casino options with bonuses for new players.

Pain Points:

  • Research on multiple casino websites is time-consuming.

  • Concerns about the reliability and trustworthiness of online platforms.

  • A desire for a simplified and efficient way to compare features, bonuses, and user reviews for informed decision-making.

Behaviour:

  • Main focal point: First Scroll.

  • Mobile traffic - 80%.

  • The most searched keywords with "casino offers" include game titles, withdrawal options, and promotional bonuses.

What are we going to use:

01

Narrow card layout

Implemented to showcase more brands on the first screen of scrolling, addressing the user's preference for efficiency.

02

Trust section

An additional field highlighting offers for new customers, aiming to address concerns about reliability and trustworthiness.

03

Mobile first

Optimizes the template for mobile devices, ensuring a user-friendly design aligned with the 80% of interactions occurring on mobile platforms.

UX | Card Wireframe

Card Structure Wireframe

Based on the identified features, we've created

a basic card template for the compare table.

1

Card Background

2

Number

3

Stroke

4

Ribbon

5

Logo

6

Min. Deposit

7

Number

8

Stroke

9

Ribbon

10

Logo

11

Card Background

12

Number

13

Stroke

14

Ribbon

15

Game Logo

16

Card Background

17

Number

Cad Layout Variations

By creating an option to choose between different element variations, 48+ options were made available for managers to use in testing their hypotheses

and increasing conversion.

48+

Template variations

UX | Compare page Wireframe

Wireframing:

Table design and Responsiveness

Things considered

for smooth development.

To reduce development time, an easy-to-comprehend design file was created, including all necessary information for developers.

3 instead of 5

The tables are designed the way developers can make 3 main templates, that will work on all the devices.

Auto layouts

The design file is built with auto layouts, making it easy to work with.

Documentation

In addition to the design file, detailed documentation with all the sizing information has been provided.

Logic inheritance

The sequence of elements remains consistent across both stationary and mobile devices.

UI | Table variability

Page Design

Dark Mode

UI | Table variability

Page Design

Light Mode

Thank you

for your interest.

To see more of my work, please check my portfolio on Behance.

Check Other Works

Contact ME

Open for hire

WhatsApp

0525806831

Email

azovskayala@gmail.com

Find me on:

Behance

Linkedin

Azovskaya

Liubov

Resume

Portfolio

Contact

2024 Made with ❤️

by Liubov Azovskaya