Navigation Redesign
Role: Mid level UX Designer | UX Navigation Team
Sector: Brazil online betting
Challenge: Sportingbet Navigation improvement
Timeframe: 3 months
SKILLS + EXPERIENCE
-
Interaction Design
-
Information Architecture
-
Journey Mapping, Wireframing and Prototyping
-
Strategy and Problem Solving
UX Challenge
Sportingbet Brazil had lost 50% of it's market share between 2022 to 2023.
One of the areas that needed urgent improvements was navigation.
​
Navigation design can be extremely complex for online betting operators.
Sportingbet Brazil had 7 product verticals Sports, Casino, Live Casino, Bingo, Poker, Crash and promotions.
​
The challenge was to simplify navigation and enhance the user experience based on a previous navigation redesign project for Ladbrokes and Coral.
​
Success of the implementation would bring;
​
-
Seamless navigation for all users
-
Longer session duration
-
Increased cross sell from sports to casino
-
Reduced churn
-
Faster action times
-
Increased active players in betting and gaming​​​
Brazil Market Insights
Online betting in Brazil rapidly grew from 2018 onwards and was only regulated in 2023.
​
Betting and gambling is part of the Brazilian culture.​
A survey of 2,839 Brazilians Aug 7-9, 2024 showed the following;​
47% played the lottery, 25% participated in raffles, 11% bet on sports, 10% played bingo, and 8% played the Brazil-specific Tigrino.
Brazil has unique requirements, cross selling reports indicate that users engage in up to 4 main types of betting/gaming.
Although sports betting is the most popular online activity, user's still need to easily navigate to other unique Brazilian games.
Device Data: Mobile Android 68%, iOS 24%. Screen length over 800px
Desktop 8% game.
​
UX Process
We had previously carried out a substantial amount of research on navigation for Ladbrokes and Coral and we had solutions that could be adapted for Sportingbet.
​
This project required us to map all the user journeys for Sportingbet to understand the pain points.​
​
Once we had identified the pain points we then iterated designs using the solutions that we had worked on for Ladbrokes which included a global menu, consistent search and consistent entry points to other verticals.
​
My role was to document and map the user journey's, communicate with the research team on insights and collaborate on the navigation solutions with the Senior UX Designer.
​
The goal was to deliver and test the prototype Q2 2024.
​
​
Ladbrokes navigation redesign
Discovery Painpoints
We discovered similar issues with navigation previously seen on Ladbrokes. The Brazilian market had a separate vertical added for crash games in the nav bar.
Lack of consistent global menu.
Search in sports is hidden with poor functionality.
Icons on 2nd header missing labels.
Duplications in ribbon.
Bottom nav bar contrast issue.
Casino bottom nav bar
Sports bottom nav bar
Inconsistent nav bar across verticals and up to 7 icons.
Casino search covers content.
Back button issue in promos.
Discovery Data Insights
Webtracking data for interaction points with existing menus, ribbons and bottom nav bar.
​
43% of users in the Sports menu are interacting with the Sports icon - frustrating as it leads nowhere.
31.2% of users cross sell to another vertical from Sports menu.
86.1% of users are looking in the A-Z list.
Only 1.6% of users are downloading the app, even with prominent position in the menu.
Frequent Sports users access betslip, bets and live (in that order) from the bottom nav bar.
Frequent Casino users access Sports, Live Casino, Menu ,Bingo and Crash (in that order) from the bottom nav bar.​
​
Sports Menu and A-Z list
Sports Ribbon and bottom nav bar
Casino Ribbon and bottom nav bar
Solution Global Menu
We adapted the global menu from the Ladbrokes redesign by placing it in the header.
As a result it became accessible across all product verticals.
Inside the menu we placed all 7 vertical entry points using a left side nav bar.
We also explored pinned favourites for Sports after the data showed us that 86.1% of sports users were using the A-Z menu to locate specific items.
Solution Menu Taxonomy
Below is the menu taxonomy workings from my figma file, containing all the listings of the items in ribbon and headers in the order found online.
​
We discovered that the order changed several times a day depending on events and marketing and was different for logged in and unlogged in users.
​
It posed the question of how this should be managed on a menu, whether it should remain dynamic like the ribbon?
​
The UX team felt that it should remain consistent and that promotions should have fixed position with high visibility and events should be the area that remained dynamic.
Ideations for entry points to the product verticals
Working through ideations for multiple entry points from nav bar with a candybox icon that opens a drawer.
The current vertical is highlighted in the drawer
Working through the UI for showing current vertical on the candybox icon.
I abandoned this idea early as the vertical icon on candybox was too small and easy to miss.
Working through ideations for multiple entry points from FAB
Hand sketching is my go to for rapid ideations.
​
The issue with this design was that candybox icon changed to show the current vertical and we felt that would be confusing for users as they may tap it unnecessarily instead of tapping the close, this is the behaviour we had seen in the sports menu with webtracking data.
Ideation for Quick Links
Below are very early sketches from the Ladbrokes navigation project working through ideas for how quick links could work.
Ladbrokes high fidelity prototype with quick links from the previous project, we used this for user testing of position preference with quick links in the drawer versus quick links in the menu.
Mapping the Mobile Screen with multiple entry points
Working through ideations for multiple entry points from the nav bar drawer versus FAB buttons.
Option 1
Option 2
I worked with the Senior UX Designer to review the multiple entry points on the mobile screen.
Overlaying the touch points of the menu, bottom nav and the 2 options for switching the vertical FAB versus drawer.
Note the 2 options for quick links menu versus drawer.
The quick links were later renamed shortcuts.
Solutions for the Bottom nav bar
Variant 1
Variant for prototype
Variant 6
​
​User's adopt the bottom nav bar after frequent use of a product.
The original nav bar held 7 icons, we reduced them to 5 icons only because this is a familiar user pattern and is more accurate for tapping.
​Sports generates the most revenue, frequent users were accessing live, betslip and "my bets" here.
Casino players require search and favourites in bottom nav to locate regularly played games.
Promotions are vital for online betting and users actively seek them out.
We reviewed 6 variants for Brazil until we had one that met majority of user’s needs.
We fixed the position of the first and last icons keeping them consistent across all verticals this helps with recall.
The betslip was moved to a drawer feature that the sports team were testing at the time.
Working through the Interaction Design
I found working through interaction design with the senior UX Designer really enjoyable, working through use cases and pushing the design to its limits.
We were UK based and the UI team were 5 hours ahead, this meant we reviewed the hi fidelity prototypes they worked on daily first thing and then checked the interactions.
We tested several versions with unmoderated user testing.
There was a fierce debate on whether shortcuts would be better in the menu or in a drawer.
Participants from testing preferred the menu, however some of the UX team felt the drawer would be quicker for frequent users and that behavioural observation would be a more accurate way to gain insights.
Final 2 prototypes
Final UI for the 2 prototypes.
The drawer can hold up to 8 product verticals this is useful for scalability.
During the project we were asked to work on shorter screen length of 600px despite data showing the average Brazil screen length was 800px.
The shorter screen length with shortcuts at the top reduced the left side nav bar compromising the 7 verticals showing above the scroll.
We did work through another prototype with 2 separate vertical scroll functions but this proved to be unnecessarily complex for the user.
Request to adapt BetMGM functionality to Sportingbet
At the end of the project the business requested us to redesign using BetMGM functionality.
This was the tech set up that the business had decided to implement for Sportingbet.
Quick ideation using the BetMGM library
​​
We placed search and menu are in 2nd header and this is consistent across sports and casino.
We kept the bottom nav to 4 icons inline with BetMGM functionality.
Figma working file applying the BetMGM functionality to Sportingbet and notes of conversation with PM.​​
​
Final Design using the BetMGM tech set up for Sportingbet.
​​
Pros
Space in header
Consistent icons across verticals.
​
Cons
Inbox was moved to bottom nav this was unusual for nav bars.
Favourites for casino isn't available.
Final Solution the business adopted.
I was curious to know the outcome of the Sportingbet navigation improvements.
These are screenshots from the current platform.
This is what they have implemented.
-
Improved UI and contrast with icons.
-
Reduced icons from 7 to 3/4 icons in bottom nav.
-
Consistent position for menu across verticals.
-
Promos back button journey's have been improved.​
-
Downloads removed from Sports menu.
-
Sports search is now visible on ribbon.
-
Crash games are no longer available.
-
Labels are now under icons clearly visible in Casino ribbon.
LATAM brand match search queries from 1/07/24.
Betano and Bet365 remain the most popular this could however be driven by marketing and promo campaigns.
Since completing the redesign Entain's LATAM market now has it's own dedicated team who manage Sportingbet.
Reflections
-
It was a privilege to work across the navigation projects for Ladbrokes, Coral, Bwin and Sportingbet Brazil.
-
These projects were complex and they really grew my skills and experience by working alongside Senior Designers, UI Designers and Design Leads.
-
Working through ideations from hand sketches to lo-fidelity prototypes with other UX Designers was immensely enjoyable.
-
A UX and interaction first approach produced better hi-fidelity prototypes.
-
Having a team with mixed skills made prototyping quicker, with UX handing over to the UI team and then both teams reviewing the prototypes daily.
