Betslip
GR8 Tech
Summary: It was difficult for players on the GR8 Tech platform to place bets due to an uncomfortable betslip—an electronic ticket that houses all your bet information. Thanks to the redesign, the process has become faster and easier, which caused a successful bet conversion rate increase.
What is betslip
A betslip is a place where the player forms his bet before making it. In the betslip, you can see all your bet information: who you want to bet on and with what outcome, as well as bet total and possible winnings. It's like an online shopping cart but in betting; see how it works on Parimatch.
The betslip is the hardest part of the user journey as a hundred different errors may occur at this stage. It is crucial that the player bets as quickly as possible, without bumping into obstacles, and at the same time, understands what they are betting on. Therefore, we have designed a new betslip that facilitates the betting process.
We focused on the following metrics:
increase successful bet conversion rate;
increase the number of parlay bets;
shorten the flow of making a bet.
Basic flows
To begin with, we have collected basic flows—all possible cases of using the betslip.
Let's go back to the shopping cart example. You can buy one product and pay for it—that's the whole flow. Or you can buy two products from different sellers, for which you have to pay separately. This flow is somewhat different. In our case, there were various flows. We collected them and identified problems in each one. For example, when placing a single bet, the player couldn't complete their bet if they weren't logged in or didn't have enough money for the minimum bet.
Hypotheses validation
To confirm our hypotheses, we reached out to the data analysts. As a result, quantitative data helped us with the redesign and simplified communication with stakeholders.
The analysts helped us understand which features are not needed by players. For example, in the old betslip, the player could make several single, independent bets and bet a different sum on each. We thought this feature was reasoned and convenient, but the data showed that players hardly use it. So we got rid of it. This decision also allowed us to design a unified form of cards for different bets and put more information there.
Wireframes
The wireframe design took most of the time. Before that, our team has already conducted qualitative research. So at this stage, my task was to consider all the issues and transfer the research results to wireframes.
Solution
The betslip now takes up less screen space. This was the main requirement of the Indian stakeholders. In this region, the previous betslip couldn't fit on the screen. So I changed its structure: I emphasized the critical information for the player and removed the unnecessary. There are also new features that make it easier to use the betslip.
Preset bet amounts
With the old design, players could only enter the bet amount manually. Now they can also choose from three essential amounts. These are the most popular bet sums among players — we've seen this in analytics. Preset bet amounts to speed up the whole process and make it possible to decide on the bet amount quickly. Although casinos often use this technique, this is a fundamentally new feature in betting.
We also added the ability to place a maximum bet. Why is it important?
The point is that the max bet for each event will be different. For example, let's say you can bet a maximum of $200 on a Manchester United vs Barcelona match and $500 on a McGregor vs Khabib match. In addition, the max bet may change if the event is happening.
Previously, players could only find the maximum bet size in the way, which was extremely inconvenient. If you wanted to bet the maximum on McGregor, you had to enter any amount, click on the "Place Bet" button… and see an error as the amount you entered exceeds $500. This is how you learned the max bet amount from the error description. It was critical for hardcore players who usually bet on maximum.
Tooltips and statuses
I added tooltips and statuses to guide users through the interface and explain how to use it. A typical situation: for a parlay bet, you need to select at least two events or three for a system bet. If the player adds only one event to the betslip, they can't pick a parlay or system bet — these tabs are inactive. The players didn't understand why they couldn't choose another type of bet. When clicking on an inactive tab in the new design, the player sees a tooltip that suggests selecting one more event.
Winnings under the button
I moved the possible winnings directly under the "Place Bet" button. Before that, the winnings were located under the bet amount box. The new solution is more noticeable and attractive for users: by clicking on the button, the player seems to be one step closer to winning.
More room for the event outcomes
In betting, event outcomes are often long and complex. For example, Manchester United is playing against Barcelona, and you are betting that Manchester will score more goals than their opponents in the first 15 minutes of the match. Unfortunately, there was little room to describe the bet in the old design, and the critical part was cut off. So I redesigned the label to make the text fit and be easy to read.
The box for entering the bet amount has also increased. It's convenient for players from countries with a minimum of 5–6 characters.
Custom keyboard
Yeah, but isn't the native OS keyboard the best solution? Not always. Many our users have smartphones with minimal screen resolution. When entering the bet amount, the keyboard covers the entire interface. So we added our keyboard, which is more compact.
Clear error copy
When the player makes a bet, a hundred different errors may occur. These errors were described in technical language, so the players didn't understand what happened and how to fix it. So I set the task to a copywriter, and we rewrote the copy to make it clear to everyone.
Ability to remove inactive bets
While we were rewriting the error copy, we came up with another UX solution, for which the players thanked us later.
Let's say you are betting on a live event, and the match has just ended. You have this event in your betslip, but it is no longer active. Previously, in this case, the entire betslip also became inactive so that you couldn't place a bet. Imagine that you made a parlay bet on 20 events simultaneously, and now you have to manually search for which event to delete — as often happened with hardcore players.
I solved the problem simply by adding the "Leave Active" button to the betslip (by the way, we had 40 options for the button copy!) It automatically deletes all events in the betslip that can no longer be bet on.
Result
We have achieved all our goals. Both the successful bet conversion rate and the number of parlay bets increased. We also reduced the number of clicks before placing a bet.
In addition, the number of registered users has grown. It's all about the betslip mechanics — you can form a bet without logging in, but you are asked to sign up or login when you want to place it.
One more achievement: thanks to preset bet amounts, we increased the most popular bet amount within just the first month.
Also, read the case overview (in Russian) by Aleksey Stiques, Head of Product Design at GR8 Tech.