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.
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.
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.
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.
45-55 yrs (Primary band)
30-45 yrs (Secondary band)
66% Mobile & Tablet Users
34% Desktop users
Preferred Game Types:
1. Bingo Games
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
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.
- 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
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
- 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.
Width X Height
Tablet Landscape: 1024px X 768px
Tablet Portrait: 768px X 1024px
Mobile Landscape: 480px X 320px
Mobile Portrait: 320px X 480px
- 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
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.
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.
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
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.
TEST – DELIVER
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.
Our results were proving a success!
5 months after launch we had increasingly promising results from our responsive website.
Increase in acquisition of users
Increase in Deposit Journey Conversions
Reduction in Bounce Rates
Gala Bingo won numerous awards soon after launch!