PROJECT OVERVIEW
The project was to review the Ladbrokes mobile gaming site in order to better understand how to improve the journeys, content presentation and navigation structure. The main task was to highlight the inconsistencies across the gaming sections by identifying the problems and providing UX design solutions to the business. The Gaming site had numerous sections as independent URLs, which contained inconsistent menus, features and layouts. This lead to problematic user journeys and navigation.
Listed below is the three core areas which had issues from a UX/UI perspective. Within each of these I have listed the main problems. On this UX case study I have presented the highlight of the review and then explained how the solutions in the second part.
User Journeys
Gaming Overlay Menu
Promotions Journeys
Content Layout
Promotions section different everywhere
Lack of a unified gaming main page
Navigation Structure
Header differences and UI inconsistencies
Bottom navigation order, sports menu & naming
REVIEWING THE CURRENT PROBLEMS
Gaming Overlay Launcher
On Sports bottom bar there was an access point button for Gaming. This gaming button opens as an overlay, which then launches independent URLs for gaming sections.
Accessing this menu again once a user has left this overlay screen and into a Gaming section is problematic.
• Too many clicks to return to gaming home menu:
Users have to access sports again > then click on gaming home overlay > then select a gaming section again.
• This overlay design pattern appears only once within the ladbrokes product. It is completely different to everything else within the UI design.
All gaming sections open in new window
Each gaming section opened a new window with a new URL:
Accessing different sections resulted in opening too many browser windows/tabs
Navigating back is a problem particularly for 1st time users as they will struggle to know how to access the gaming home again.
Too many clicks to return to gaming home:
Users have to access sports again > then click on gaming home > then select a section.
Easy to feel lost as many sections have different layouts
Different gaming layouts for each section
The layout of the content (game thumbnails etc) was
inconsistent across some of the gaming sections.
Some layouts had grids and some had different menus and content structures.
The issue is that users would have to learn different UX & UI patterns across sections
• Creates higher learning curve – slower access to areas
• Increases the cognitive load on a user
• Bad use of design structure for the brand displaying massive inconsistency. All sections feel like separate products
Side Menu (Burger Menu)
We have a side menu (Burger Menu) across most of our Ladbrokes product apart from the “poker” and “virtuals” sections.
Users would expect a burger menu appearing on the top left to be a master menu for the whole product. This is not the case for the ladbrokes gaming.
There are some serious issues with content and navigation as each side menu for each section was independent from each other.
• Different navigation content depending on the section increases user learning time curve per section.
• Very inconsistent and confusing experience for a user
• Creates bad journeys and funnels users into wrong locations within the product
Inconsistent Header
There were numerous different header bars across many of the gaming sections.
Each of which differed from there logged in and logged out states.
This creates different outcomes increasing inconsistency.
• Confusing for users to identify with brand, product or which gaming section they are on when seeing different headers
• There was differing placement of features per header or per section. This leads to frustration for users having to find certain features again. i.e. Search, Balance etc.
• Design conventions prove headers should primarily remain the same throughout a product otherwise it can lead to broken user journeys, brand confusion, usabilty issues etc.
Sub Navigation Inconsistency
The gaming sections have sub sections but not across all the different gaming areas.
The Ladbrokes Sportsbook Sub Navigation is located in a well positioned and visible area. The Ladbrokes Gaming section unfortunately is much more inconsistent.
The screens to the right highlight the areas which have sub sections and the areas that do not.
Issues:
• The navigation content and positioning is different depending on the section which creates problematic journeys
• Very inconsistent and confusing experience for a user
• Incorrect design patterns when looking at the product as a whole. There should be a unified design approach to menu and nav systems
Bottom Bar Navigation
The Global menu bottom bar consists of 5 buttons. The first 4 buttons are dedicated to Sportsbook and the last is access to the Gaming home overlay.
Navigation Issue:
Once in the Gaming Sections we lose this bottom bar design pattern as it does not appear in gaming at all.
This makes it difficult for users to navigate different areas or return to Gaming Home.
Button placement at position 2 issue:
The menu button at position 2 activates the Sports main menu. This position is breaking some basic UX/UI conventions. As a main menu it should be placed first on the bottom navigation or as the master menu in the top left (Side Menu/Burger Menu).
This creates a few issues from a UI & UX perpective:
• Navigation does not follow conventions
• Creates confusion for user expectations when trying to navigate different areas
• Inconsistent experience from Sports to Gaming
SOLUTIONS
I decided to design a new navigation flow and get rid of the Gaming Home Overlay and implement a Gaming Home section. From this section users will be able to access all other gaming sections with a consistent navigation pattern e.g. Header, sub navigations and bottom menu bar across all sections. This consistent navigation system across the whole product would resolve many of the issues we have reviewed. I also decided to change certain layouts and journeys to allow for a more intuitive experience for users.
We have tackle the problems with a set of solutions:
• Unify header elements
• Apply a visible Sub Navigation
• Apply a Bottom Bar Navigation across all of Gaming
• Create of a Gaming Home Section
• Create a unified design layout for subcategories
• Centralise promotions area
• Create a single Side Global Menu (within burger menu)
Unify Header Elements
There are currently numerous different types of headers for gaming. We propose to design one type of header across the whole Ladbrokes product (Including Sports).
For now we will require an independent design for a Gaming header with very similar attributes and struture to the sports version. This will enable us to align in the future.
The Gaming header will include a side burger menu (Master Menu), Logo, Deposit button and a Balance Display/My account button.
Sub-Navigation
I created a sub-section menu across all the gaming sections for consistency.
This menu will be located directly below the header following the same design patterns as the Sports sub menu for consistency.
o Each gaming section will include a sub-section menu
o All sections and sub-sections will include page title and sub titles in the form of a breadcrumb structure for users to have visibility of their location
Bottom Bar Navigation
I designed a consistent bottom menu bar across all Sports and Gaming.
There will be 5 buttons:
o The first button would become the “Sports Home”
o The Last button would become “Gaming Home”.
o The 3 remaining central buttons are TBC
This would provide a global access point for Sports home & Gaming home. In turn this will resolve the “returning home” issue for users when on different parts of the Gaming sections.
Creation of a gaming home
The recommendation was to remove the Gaming Overlay and create a Gaming homepage with its own section/URL.
Swipeable Categorisation layout for Gaming:
The Gaming home will consist of categorised swipeable game thumbnails similar to a “Netlix” approach.
o The content layout will have slider carousels which will display game selections such as Top Games, New & Exclusive, Jackpots etc. This slider layout will only exist on the Gaming homepage
o Users will be able to use the sub navigation to access specific game types
o There will be 2 access points for gaming home – Main Menu (Side/Burger menu) and the bottom navigation will have a Gaming home button.
Side Global Menu
I recommended implementing one “Master Navigation” within the side menu with the same navigation structure across the whole Ladbrokes product (sports & gaming).
Within this master menu there would also be sub levels.
The example to the left is the Coral product menu.
We will design a similar (but not exact) structure solution for Ladbrokes.
Gaming Home & Navigation Elements
Sub Category Navigation & Layout
UI Elements
