Gala Bingo

Responsive Website Design
UX Case Study

MY ROLE

LEAD UX DESIGNER

DELIVERABLES

RESPONSIVE WEBSITE

TIME FRAME

60 DAYS

DISCOVERY

THE CLIENT 

The Gala Bingo brand is one of UK’s most renowned in online gaming with over 1.2 million players. The brand is part of the Ladbrokes Coral Group.

Gala Bingo.com provides online gaming products with a wide range of bingo, slots and casino games.

THE PROBLEM

Our largest user groups were not proficient users of digital technology and the products lacked intuitiveness and clarity in design. The site had become increasingly out-dated with no real thought process behind the user experience.

Gala Bingo had independent products across different devices with very inconsistent experiences. The desktop experience was completely different to the tablet and mobile apps. This had resulted in disjointed and confusing experiences for players, leading to user unsatisfaction, poor website performance and negative effects on business goals.

Old Desktop Website
Old Mobile Apps

COMPETITOR ANALYSIS

I conducted a competitor analysis to better understand the current products on the market. The focus was on competitor features, usability, journeys and design patterns.

  • Most of the competition was delivering similer experiences
  • Some competitors applied simpler experiences
  • Most UK based websites were outdated
  • Nearly all had major similarities in features and patterns as each other.
  • Lack of innovation and clear tendacy to play it safe by “adopting” each others patterns
  • No competitor was providing independent user focused cutting edge solutions.

This provided us the opportunity to focus on user centred design whilst providing solutions which stand out from competition.

UNDERSTANDING USERS

We had a relatively good understanding of our user groups but needed to understand how they interacted with the existing products, what issues they faced and why they were having problems. I looked into our existing research and also carried out other sessions to build a better picture.

USER SNAPSHOT

Gender:

60% Female

37% Male

 

Age Bands:

45-55 yrs (Primary band)

30-45 yrs (Secondary band)

Devices/Channels:

66%  Mobile & Tablet Users

34% Desktop users

 

Preferred Game Types:

1. Bingo Games

2. Slots

LEARNING ABOUT PLAYERS AND BEHAVIOURS

Stakeholder User Insight

I carried out numerous stakeholder interviews to identify the knowledge base we had within the business regarding our users

Analysing Existing Research

We had numurous types of exisiting data and research which I explored for a better understanding for design solutions

Surveys

Our researcher set up different surveys to understand user opinions, thought processes and behaviours.

Highlights from User Research Findings

Primary users are not tech savvy

Difficult to understand design conventions

We found most of our users are not proficient users of technology.

Many players not aware of common conventions and wanted more direction as well as more forgiving design patterns.

Content difficult to find

Users find it difficult to find games as well as filter options.

Clear lack of signposting

Some journeys lead to dead ends

 My Account Section

Hard to find and confusing to use

The My Account section did not have a clear access point.

The My Account journey was badly designed with many distracting elements along the path.

Quicker access to Bingo games

Many users asked why the Bingo Schedule section was not clear and accessible from the homepage.

Header cluttered and confusing

Too many elements and features in the header

No clear signposting.

Most users only used two features (Login/Navigation) as they didnt realise some elements were accessible buttons

Desktop, tablet and mobile experiences disconnected

Desktop website was a different product to the tablet and mobile version.

Some good features in both but disliked the inconsistency accross devices.

BUSINESS OBJECTIVES

The requirement was to redesign the current products in to a market leading website. We established the business objectives to make sure these were a crucial part of the design strategy.
  • Reduce bounce rates by over 3%
  • Increase deposit journey conversions by over 10%
  • Improve journey design success rates
  • Communicate intuitively to all demographics
  • Convert the independent desktop and mobile products to a single responsive design solution
  • Future proof UX principles & design to adapt to other products within the Ladbrokes Coral Group for consistency and better usability

DEFINE

At this stage I started defining solutions from our findings highlighted in the discovery phase. We wanted to shift the design strategy to designing for our primary user groups who had lower skill level on digital products and websites.

THE SOLUTION

We proposed to redesign the current products in to one responsive website. We wanted to provide access to all content across every device. In order to meet the brand requirements we needed a unique experience which was standout from industry competition. We decided on a fresh new look and feel whilst keeping usability simple and accessible for our 40-50+ target market.

IDENTIFYING CORE IMPROVEMENTS

From the research findings we created our main improvement areas and goals:

  • Navigation Structure
  • My Account
  • Find a game
  • Sign posting
  • Make a Deposit
  • Consistency across different devices
  • Create more forgiving interactions and UI

DEFINING OBJECTIVES

  • Build a responsive user centred experience across all resolutions
  • Re-work the taxonomy
  • Reduce the amount of levels/tiers
  • Minimise cognitive load
  • Add simple and relevant language for signposting
  • Simplify the interface and journeys
  • Reduce game search time – offer favourites, saved games etc
  • Create larger click and touch areas on interactive elements for users in order to be more forgiving with human error

DEFINING STRUCTURES, SITEMAPS AND NAVIGATION

In order to redefine and improve new journeys and a sitemap I reviewed the current versions. A key area was the header which was a clear pain point. Users needed an easier introduction to the site and I wanted to do this by re-structuring the header area and its navigation.

I decided to simplify the header to establish two main areas. A core navigation on the left side and a right side area to group common features such as Balance, Quick Deposit and My Account. This base structure would be the foundation to eliminating all the confusion with sections, broken journeys and users not being aware of where thery are.

It would also reduce the cognitive load on users when faced with a much more intuitively communicated and grouped navigation.

DEFINING SCREEN RESOLUTION

The current desktop version is 940px wide. After reviewing the most common user screen resolutions (1366, 1280, 1920) we decided the website should be 1200px width. This is a good average target size and will help us accommodate layout and content as well as better support a responsive solution. 1200px resolution would also allow us to not deviate too far from the current 940px width layout. From 1200px the site would be fluid up till 1600px wide. This gives us much flexibility and adapts well to large screen sizes.

We focus on 5 breakpoints (screen sizes for different devices):

Width X Height

Desktop:                           1200px

Tablet Landscape:        1024px X 768px

Tablet Portrait:               768px X 1024px

Mobile Landscape:       480px X 320px

Mobile Portrait:              320px X 480px

N
At this stage i  established some principles to implement in design from the findings from our work.

 

  • Clarity – Simplified header for navigation and My Account access
  • Consistency – A responsive design strategy
  • Digestability – Present content in a digestable amounts and have a content first approach
  • Design – Fully responsive for maximum use of real estate
  • Implementing consistent journeys across devices
  • Focused on user centred design

DESIGN

In this section I will explain how I implemented the main solutions to a design strategy.

After defining the research findings, objectives, goals, new structures and establishing UX principles, I was ready to start working on the design framework via sketches and and then moving to detailed wireframes.

I designed the UX wireframes for the site with responsive interpretations for each screen. These wires were to be sent to developers with detailed documentation of navigation, functions, UX patterns, interactions etc for reference during their development process.

Future proofing the foundation of my UX was an objective which the business had asked me consider. I planned to apply a core level of UX which could be translated and adapted across some of the other products within the Ladbrokes Coral family. This was to accomodate cross brand players and implement consistency across the brand.

MAIN DESIGN SOLUTIONS:

HEADER & NAVIGATION

The current design had confusing interaction elements on the header. These assets lacked clear signposting and had a too much clutter visible in a small space which in turn resulted in a lack of clarity towards elements and  functions.

I simplified the header by dividing the navigation into two and removing secondary level clutter. The left side navigation contains the main site sections whilst the right side contains login, join now and Cashier, Balance, My Account, Quick Deposit when logged in. I moved secondary level features to a new sticky footer  i.e. elements such as responsible gambling, clocks, timers, feedback, live chat and help.  The example below illustrates the simplicity of the new from the old.

Old Header

New Header – Wireframe

New Header – UI Design

Sticky Footer – UI Design

SIGN POSTING, TILES AND LARGER TOUCH AREAS

Part of the redesign was to signpost more effectively across the product. We applied text associated with visual cues such as icons for users to learn and recognise. We made the visual cues and typeface sizes larger whilst also using more relavant tone of voice for our audience.

I also conciously wanted to apply touch/click/tap areas for users which were more forgiving. Using standard practice sizes I increased the touch areas on the most important interaction areas.

TAB SECTIONED HIERARCHY

I wanted to simplify hierarchy from a user perspective especially taking into consideration our primary user group. Rather than create a separate page for each sub-section we implemented tabbing. Each content area would have a tabbed sub navigation for all the subsections. This allows the user with constant access to the main navigation and sub navigations as all navigation will be visible at all times. Tabbing allows our user groups constant access to all menus without having to land deeper in to sections.

At mobile resolutions the tabs will automatically convert to an accordion menu system. This will provide the user with full visibility of menu items on a small screen size.

Tabbing Structure

Wireframe Structure – Tabbing

UI Design – Tabbing

Mobile Accordion Design – Responsive Tabbing

FILTER & SORT

Filtering and sorting options provided quicker access to our games catalogue. This categorisation transformed in to overlays on smaller resolutions.

Filter System Examples

Desktop Filter & Sort Bar

Mobile Filter & Sort Overlay

OVERLAY SYSTEM

I created a system where if any section was 2-3 levels deep we would apply an overlay  for further levels such as Game Information rather than go any deeper.  This approach really simplifies the heirarchy visually for a user.

Overlay example on tablet

MY ACCOUNT & DEPOSIT

From my e-commerce experience and our user research I understood users wanted complete focus and no distractions when it came to handling money i.e. paying,  depositing and withdrawing. Coupled with an easy to use experience our My Account had to provide users with a sense of security. The new My account section simplifies each section and has its own dedicated space without any distraction from other parts of the site.

My Account

Wireframe Examples – My Account Step 1

UI Design Example – My Account Step 1

TEST – DELIVER

USABILITY TEST

We carried out usability testing on a version of our new responsive site on user groups a few weeks before launch.  Our aim was to assess how users interacted with our product to iron out any issues.

Some feedback and findings of usability testing:

  • Easy to navigate
  • Easy to find games
  • Apply a way to see bingo schedule on homepage level
  • Very clean and simplified layout
  • Users could not initially find Help section. We decided to make the button more prominent
  • Users took a while to find the search button on tablet and mobile
  • The carousel Hero banners were too fast and a little distracting

Overall the feedback was positive but there were some interesting findings and issues we had to work on and fix. We also had users who simply didnt like change which interestingly was our 50+ group. Though they like the site, they wanted the choice of transitioning from the old to new slowly! This actually worked well for us as we weredid a soft launch of the product and eased our customers in slowly with marketing campaign focusing on users learning about the new version of the site.

After making ammendments we delivered the product with very positive feedback from our users and the industry as a whole.

RESULTS

Our results were proving a success!

5 months after launch we had increasingly promising results from our responsive website.

7%

Increase in acquisition of users

12%

Increase in Deposit Journey Conversions

5%

Reduction in Bounce Rates

Gala Bingo won numerous awards soon after launch!