Betting App
The betting app with a more engaging and addictive gaming experience
Realization period
Mar 2022 - Jul 2023
Companies involved
Applica, Lottomatica, Double77
Design toolkit
Adobe XD, Adobe Illustrator, Figma, Whimsical, User interview
Design process
Introduction
The name of this project cannot yet be disclosed, for the rest of this case study it will be known as BA. BA is a web and mobile betting (sports and casino) client app, developed for the American public. The app was born shortly after we completed the redesign of the platform's back office.
Problem
With 19 million sports bettors in 2022 alone, the United States has enormous potential in the online betting market. However, the competition is very fierce and tries to attract the public with constant news and updates. How can you stand out from the crowd and appeal a large number of players who normally use competing apps? This is the problem we are trying to solve with BA.
My role
For this project I played both the role of UX designer, in which I collaborated with various figures on the ideation and execution of the design strategy (study of user flows, interactions and new innovative components), and that of UI designer in which I took care of the visual design and the design system. Throughout the project I held several sprints and calls with the developers and managers. Given the size of the app I split the work with my UX partner so I mainly dealt with the betslip and casino part.
The team
1X SVP
2x Project Manager
1x R&D Manager
1x Full-Stack Developer
2x Back-end Developer
2x Front-end Developer
1x Lead Designer
2x UX/UI Designer
1x Software Analyst
Project goals
A world of possibilities just a few clicks away
The BA goals we were designing revolved around the users who would bet their money on the app, essentially sports and casino bettors.
Goal #1
Create an intuitive component for quickly viewing possible winnings and bonuses
Goal #2
Find a layout and methodology adaptable to the various types of bets
Goal #3
Simplify navigation within the bet slip
Goal #4
Design the Casino section and manage its internal navigation
User research and competitive analysis
Know your rivals and their secrets
In the first calls, the SVP and managers gave us an overview of the old web app which was online at the time, the reason for the renewal and the choice to develop a mobile client app, as well as the first analysis data they had collected.
To integrate the information they provided us and reach the target numbers of this project, my Software Analyst colleague and I collected data from bettors and competitors.
PRO: User-friendly, good UX, same game parlays and odds boosts available for most games
CONS: Lack of a loyalty rewards program and option to cancel your bet before event starts
PRO: Sleek functionality, player-friendly juice on fixed-odds wagers, competitive promos offered routinely
CONS: Not great customer support options, sometimes limit users who win often during short time frame
PRO: Great betting experience, player-friendly odds, good UI, great promotional bets
CONS: Conservative welcome offers, some pages do not yet follow the new UI, geolocation issues
PRO: Easy to use app that offers live betting, live streaming service of any sportsbook, extensive markets
CONS: Not ideal for professionals, promotions can be presented better, geolocation and ID verification issues
Key insights from user research
Who will primarily use BA?
To better understand the various types of people who will use BA to play and bet, I studied the data previously collected by English and American colleagues and sent a survey to a targeted group of users to find out some other information that was missing from the documentation I had already.
I then reported and analyzed the answers through a card sorting exercise to find common themes among the interviewees that would later be useful in the decision-making phase.
Insight #1
A more complete and intuitive betslip
The apps usually used by those interviewed manage simple, parlay and round robin games quite differently, and not always optimally. Furthermore, some information, such as bonuses and balance, are non-existent or poorly highlighted.
Result: to provide a better user experience, the app had to provide the user with a more powerful and versatile Bet slip section in which they could navigate with double navigation (between bet history and their types) and give a more complete view of their balance
Insight #2
A labyrinth of sports and championships
Users were unable to quickly navigate to match sections. The pages that host the championships of the various sports are very dense and nested and are extremely important for playing.
Result: bettors should be able to move more quickly between leagues and matches so BA should have provided smoother and more intuitive navigation, aided not only by time filters but also by shortcuts such as the Favorites option
Insight #3
How many games have I bet on?
Some users have expressed difficulty in knowing most of the useful information about their bets, without having to enter the Betslip section every time.
Result: As a solution to this problem, the app had to provide bettors with a useful, fast and compact tool in which to see the number of bets, possible winnings and information on the bonuses used
The path of a bet
The first details are starting to be defined
In order to have a clear 360° idea of the functionality of the Bet slip and the components connected to it, I decided, in this part of the research phase, to understand how searching for a match and adding a bet would work from the point of view of the player.
Constructing the solution
Sketches come to life
Having reached this point, so with all the research completed and the solutions ready to be created, I began to build the Bet slip and Casino sections of the app.
Helping myself with some preliminary drawings made on Whimsical, I brought to life the first ideas that my team and I developed in the previous weeks. We discussed and exchanged feedback both in person and on FigJam and then I realized the final ideas on Adobe XD (and partly on Figma).
User Testing
Do our ideas work?
With the creation of the first drawings we wanted to carry out twenty user testing sessions to verify the progress of the app from the bettor's point of view. In these sessions, users also underwent tree testing to confirm the effectiveness of complex navigations such as those in the Markets and Bet slip sections.
Change #1
A more immediate FAB
During the investigation on the dynamic FAB dedicated to the Betting Act we discovered that 70% of the testers would not be able to immediately understand the meaning of the 2 numbers present on the external part of the component, and that some information present inside, such as "Amount" and "Bet", would seem to be superfluous in that position.
From these findings, and following new research, the data outside the FAB has been made more understandable, as well as inside, where a new feature related to bonuses has also been added.
Change #2
Adjustments for more precise hierarchy
The lines with the matches inside the Bet slip (in the "Straights" section) were updated when it was found some confusion in the testers' understanding.
The remove command has been moved from left to right to make room for the selection checkboxes. Furthermore, the colors of the odds and vigs have been slightly modified (in the case of spread betting and if there are variations in probability) to create a better hierarchy.
Creation of tablet and desktop versions
An app suitable for all sizes
An important part of this project was the adaptation of BA for tablet and desktop devices. The components we designed and created were modular and ductile, so it was quite simple and quick to complete this task. Very few components were created specifically for these two versions. These elements, and those of the mobile version, have been incorporated into a design system that we created from scratch.
Interaction Design
A few steps from reality
After my UX partner and I completed and subsequently updated the mid-fidelity prototypes, I took care of their animation to make their use easier (for managers and testers), better understand their behavior and verify correct functioning of navigation.
Looking for the match
The search in the Pre-match section
Searching for a match in a betting app, which is notoriously intricate and nested, can sometimes be long, so I decided to make life easier for the user by keeping the identification of the championship on a single page through the use of accordion and tab. Searching is made even easier with the use of the Search and Favorites tools.
Betting markets
A sea of results available
The event page can also be very complex, so we decided to make the search for the type of result desired simpler and more intuitive by using horizontally scrollable tabs that give access to a particular market. All without ever losing sight of the most important information regarding the two challenging teams (or players).
Bet placement
All in one simple bottom sheet
A bottom sheet was used as a method of interaction with the bet slip to avoid the user entering another page which could have complicated navigation. In this section, in addition to the results added by the player, great importance has also been given to the balance, the types of bets to choose and the bonuses, fundamental elements of placing a bet.
Current and settled bets
The essentials in a few tabs
The bottom sheet has not finished its work, in fact it also contains current and settled bets which can be consulted thanks to tabs. In both sections it is possible to see the betting cards, similar to accordions, which can be opened to consult more information. In the Settled section, other tabs are activated which divide the won and lost bets.
Success metrics & result
Encouraging data for development
This was the last project I worked on at Applica, as soon as I finished the final prototype I left the company, so I wasn't able to follow the whole part regarding measuring the success of the software that was planned. However, I decided to leave the data relating to the second session of the qualitative test to measure the effectiveness of the changes adopted after the first session.
Final thoughts
All's well that ends well
In conclusion, the SVP and the managers, who often participated in meetings on Teams, were very satisfied with the work we created (300 screens for the mobile version only) and with how the app, evolving over the months, has followed a path that positively differentiates it from the competition.
The project gave me the opportunity to work with an important American client through the Agile method. After my departure, the app underwent some small improvements following the latest user testing and the final Adobe XD files passed into the hands of the developers.
