UI/UX - PROTOTYPING - WEB DESIGN

Megaways Casino Landing Pages

Company

Gamesys – Megaways Casino

Collaboration

Marketing Manager, Brand Manager, Graphic Designers

Services

User Interface, User Experience, HTML/CSS/JS

Date

2021

Project Introduction

Megaways Casino is an online gambling website that operates in the United Kingdom and is run internally from the London office, part of Gamesys Group Plc.

I am part of the design team that is responsible for everything that means brand visual identity, promotional content such as e-mails, banners, interactive promotions, landing pages, and offers.

Landing pages are part of an important marketing strategy and must have a well-designed user experience, clear user interface, and be engaging for the users.

The venture was launched at the beginning of 2021 and I was leading the creation of multiple landing pages for this venture.

Project Overview

Deliverables

1. Low-fidelity Prototype/Wireframes

In the initial stage of the project, I was required to provide a low-fidelity prototype that would show the structure of the landing pages.

Since the majority of users are accessing from mobile, I had to design with mobile-first design thinking.

2. High-Fidelity Prototypes with components

In the later stage of the project, I was required to design 3 high-fidelity prototypes that would should the most important variations:

  • Brand-led
  • Product-led
  • Mini-Registration

The project had components that would be either activated or deactivated, depending on the requirements. This could mean an additional line of selling points, log-in, or game grids.

2.1 Update: Transition to Figma and Atomic Design

On a recent department update, it was announced that we would transition to Figma as it’s getting more popular and provides better solutions for design.

With this in mind, I have taken the Adobe XD templates created and recreate them into Figma with the improvement of using Atomic Design methodologies. We would split the elements into atoms, molecules, organisms, templates, and pages.

Examples of “Atoms” can be seen below.

Example of “Molecule” can be seen below.

An example of an “Organism” can be seen below.

3. Front-end Development

I had to code the pages using HTML / CSS / Javascript / jQuery.

Initially, I designed the main template with all the required components that could be activated/deactivated depending on what each page required based on stakeholder’s requests.

Once the main template was tested and approved by management and executives, I had to provide a full explanation and show it to another designer that would help me complete around 15 other landing pages for this venture.

 

Brand-led Template

Product-led Template

Multiple A/B Tests

Example – Increase page quality score

Test: Will we get more P2Ps if we improve the relevance and clarity of our landing pages?
Adding game tiles and a paragraph of copy to LPs.

Result: Improved our quality score which has enabled us to be in more auctions, this is reflected in the 49k more clicks.

Related Designs