G COFFEY DESIGNS - CASINO SOURCE

INTERACTION DESIGNER

UI / UX SPECIALIST

CasinoSource - WEBSITE AND MOBILE APP RE-DESIGN

Overview

The purpose of including this project is to take a more in-depth look at redesigning an iGaming website that caters for 14 different countries as part of my previous employment. While the process was thorough and arduous the overview focuses on how analytics and testing helped assist the modernisation of the Casinosource site.

My Role

In this project my principal roles were that of Lead designer and researcher, being responsible for the overall design direction of the project, having full authority over the visual appeal of the product. Being the lead researcher, meant that I had to develop the questionnaires, analyse the test results and write up the findings. I wrote up the final persona's, scenarios and deliverables of the product. As part of being the visual designer of the site, I would create banners, icon directory, and marketing materials for the site. I would liaise closely with an agile team of 1 developer, a project owner, quality engineer and scrum master assuring that the product relaunch occurred without a hitch.

THE FINAL PRODUCT

Casino Source is an online affiliate gambling website, that works similarly to Trivago. Delivering to the user trusted gambling sites that are reviewed, provide the best bonuses, and offer fair play. The main parts of the site are casino bonuses, online casinos, casino games and a blog for users to stay up to date. The website was redesigned as part of a refurbish to engage new users to browse, play and continue to use our services. Although the conversion metrics on the site were good, there was much improvement to be made on the old interface. Users were mostly confused with the user flow of the website and tended to get lost on the website, the interface was not visually appealing, outdated and needed an uplift. Secondly, we noticed that a lot of the traffic was coming from mobile devices. As this site had not been optimised for mobile traffic it was obvious that it needed to be developed with a mobile-first approach. The goal of this project was to increase traffic, reduce drop-off rates, engage a new younger audience and build mainly for mobile whilst increasing page speed.

THE PROCESS

User Research

Firstly we reviewed the Google analytical data to gauge a better understanding of our user base. Secondly, we delved into the Hotjar heatmaps that we generated over the space of 3 weeks so that we could better comprehend how to make users convert to the website quicker.

We needed to understand why users were getting distracted and whether they fully understood how to browse the website and find what they need fast and effectively. We would then use the research to improve the UX of the website.

Our Findings

After analysing the results from Google Analytics we came up with came up basic metrics for our users. - main age (25-34) - gender profile ( male: 62.6%, female: 37.4% )

Users browsing habits:

- shopping, tv, media, tech, news & politics, gaming, politics, fitness

Gender makeup:

Males interests: money, jobs, work, business professionals, travel, fitness, tech, news, politics Females interests: planning next holiday, fashion, shopping, travel, leisure attributes: middle-aged, stay at home mums

From these basic metrics, we produced persona's for our different types of users and created different types of scenarios that the user may be faced with.

After analysing the results from Hotjar we came up with intriguing results.

- only 10% of users would scroll past the website fold. - barely any users were clicking into the games section in the right had side of the site. - the carousel operator list at the bottom of the screen wasn't getting much traction. - the paragraph at the top of the page to introduce the site was distracting users - the nav bar was showing insures in the (more) nav title was confusing for users as it was intended for casino reviews. - preferred players club was getting absolutely no clicks - with the header logo and the introduction text only 35% of the page in the fold could be viewed and only the first operator

User Testing

We began testing throughout all the stages of the redesign, from start to finish. Initially, we began redesigning the product based on the analytics and feedback given by the team present at our 15-minute presentations on a Tuesday which gave plenty of time to have the alterations completed by the Friday and also fit in time to work on my other tasks.

After the high fidelity prototypes had been completed for each page, we carried out a final assessment with the assistance of the product manager, and the rest of the team to test the user flow of the website and mobile browsing experience. Once this had completed, we began to develop the website with the front end developer which took over 3 weeks to complete as a bundle of new features had to be developed. Post-development stage we began to test parts of the website on the live interface, whilst I would analyse the information distributed to Google analytics and Hotjar.

A and B testing was performed by switching out the site for every 8 visitors that visited the site, which we carried out for a full month whilst iterating new improvements. We carried out this procedure to test out new features and establish whether the new interface was either improving or reducing their experience. Our final formal tests mostly confirmed what we had already established but there was room for some fine-tuning in the navigation process. Below are snapshots of key points in our iterative process

Initial low-fi prototypes for desktop

Sample of initial Navigation work-flow developed after first round of paper tests

Sample of ABC tests carried out on the device in second round of testing

Original Website and Mobile Design

Web Design Complete

Mobile Design Complete

Visual Identity

Web Fonts: Montserrat, Proxima Nova, Droid Sans, Lato System Fonts: Open Sans, Helvetica Neue,Arial

It was the aim of the project to assist users in finding their way easily around the website and convert quickly, with a simple and easy to use interface. As the website needed to host a 1000 character count due to Seo indexing with Google, it was decided that we would include more icons and banners with page linking. By adding this to the website users would be more likely to convert, even though they are scrolling down the page.

Below are snapshots of the different assets created for the project.