Modernising the Bet Card & Solving the Most Common User Error
The Bet Card - What it is and why it’s so important
The bet card is a crucial component of the user experience of an online sportsbook. It is the interface that allows users to place their bets on various sports events and markets, and to see their potential winnings and outcomes. A good bet card should be easy to use, intuitive, and responsive. A bad bet card can frustrate users, cause errors, and reduce their trust and brand loyalty.
Over the 8 years I worked at Avid I have designed and optimised the bet card several times across different projects. When I started with the company the bet card was considerably basic compared to today. Users were able to place a single bet or, if they added more than 1 runner, a parlay bet or round robin (multiple set of bets).
My first challenge:
Make the Bet Card more visually appealing while still obvious where to find after selecting a bet
The bright orange was the brand accent colour for Sports Interaction and the thinking behind having the bet card in that colour was to make it stand out against the rest of navy site. A user who had made a selection would know where to find the shopping cart, so to speak. However, the bright colour did not make for aesthetically appealing UI to work with, and I knew there was a better way to help guide users down their desired path. Using motion, we could direct the user’s focus to certain part of the UI after an action like selecting a bet.
Motion can solve user problems
On desktop the bet card was always visible, even when it was empty. On mobile, space is much more limited so the bet card was a button permanently displayed in the header. What I proposed was a contextual bet card that only appeared after a user had made a selection, and we used motion to capture the users’ attention.
On mobile, most sportsbooks had positioned their bet card in the header at the top of the screen. Since opening the bet card was the most frequently taken action on the sportsbook after selecting a bet, positioning it in the header made it awkward for the majority of users. Using UX principles for how people use their phones (below) I proposed that our bet card would be far better positioned for repeated clicks at the bottom of the screen, making it easier to reach.
85% of users interact with their screen with a single thumb (ref: Medium)
Bet card button awkwardly positioned in header, not ideal for repeated clicks
Bet card button shows contextually at the bottom of the screen
Result:
The aesthetic-usability effect & added motion increased bet conversion + bet conversion
The aesthetic-usability effect describes a phenomenon in which people perceive more-aesthetic designs as easier to use than less-aesthetic designs.
Aesthetic designs, in general, look easier to use and have a higher probability of being used, whether or not they actually are easier to use. Whereas more usable but less-aesthetic designs may suffer a lack of acceptance that renders issues of usability debates
We found that after the redesigned bet card was released, user engagement increased and bet conversion was faster than ever before, especially on mobile. However, one thing I learned was that releasing 2 substantial changes at the same time was not a good idea. It meant that it was difficult to figure out which change (the new aesthetics or the more obvious and easier to reach bet card location) had had the bigger impact.
My next challenge:
The most commonly produced error message
My next mission was to go deeper. The company had recently hired a Google Analytics (GA) and Tag Manager expert who had been setting up new tags all over the site to capture events. Messages triggered in relation to the bet card was one of these and within 2 months I had more than enough data to make some assumptions. There was one message in particular that was presented to users over and over again, 150 thousand unique events in 3 months, according to GA:
The single most commonly viewed error message on Sports Interaction
What is a related bet?
A related bet is where one or more selections in a multiple bet directly effects another selection in the same multiple. For example, you couldn't bet on being stuck in traffic one day, doubled with arriving late for work that same day. That's because if you are stuck in traffic, it decreases the chance of you arriving at your destination on time.
The data from GA had shown that users were attempting to add related selections to their bet card, more frequently than anyone would have thought. One thing was clear to me though - error messages popping up while users were compiling their bet was something we needed to change.
I began researching and found that competitors handled related bets in different ways. One such method was to allow any selections to be added and restrict multiple options directly on the bet card. For example, allowing both teams in a match to be added and not offering any multiples.
This approach removes the error modal entirely and solves our issue with the current flow. The user could add related selections and no multiple options were offered.
However, there was still plenty more to do here. Our bet card was setup to allow only one stake per transaction, so adding a stake field to each selection was the easy solution here but introduced a lot of UX complexity behind the scenes. Another feature of our bet card was the tabs, and the sportsbook manager was keen to keep the tabs since it meant there was no change to the user flow for multiples - the most profitable bet type for Sports Interaction. I argued that removing the tabs would declutter the bet card, giving the user with more flexible betting options and potentially increasing overall take. Looking at the data revealed that on average 12% of users had made a subsequent bet within 5 mins of making their first bet. Removing the tabs would mean the ability to place single bets and multiples simultaneously, ultimately saving the user time and effort.
A/B Test to decide the best path
To test this theory, we split the active user base into 2 groups. Group A would continue using a bet card with tabs, but with the new ability to place single bets concurrently. This user group would still have to place multiples and singles separately.
Group A bet card
Group B would see a bet card with no tabs, meaning they would be able to place singles and multiples in the same transaction. The test would run for 1 month, after which we would look at which approach had been more successful, both for the business financially and for player experience.
Group B bet card
Result of the A/B test:
Group B - with no tabs - was the clear winner. Overall take was higher (users had indeed placed more singles than Group A), bet conversion rate had increased, and the number and total amount of multiples placed was on par with Group A, calming any fears about removing the tabs. Customer service had no negative feedback from either group and a few positive remarks from users in Group A about the new bet card design. Win win.