Yahoo Sportsbook

🔮

Yahoo Sportsbook

iphone 12 screenshot of sportsbook home. shows several games with odds listed in a six-button grid

I worked with three other designers to launch Yahoo Sportsbook. While my senior teammate laid the groundwork for much of our betting design system, I soon joined her to expand and officially launch Yahoo Sportsbook.

My primary projects consisted of creating an odds tab on various pages, designing and animating the betslip on the Sports app and desktop, and leading design for data visualizations for bettors.

Timeline

Jan 2020- present

Credits

Talia Knobel, Dawen Zheng, Mika Jiang

A sportsbook for newcomers and pros alike.

With sports betting getting legalized in more and more states, the Yahoo Sports team decided to get ahead of the curve and partner with BetMGM to offer sports betting on our platforms. Although many sportsbooks already exist, they are often a separate entity from sports news and scores platforms and can be too complicated to maneuver for beginning bettors. By integrating betting features into our native products, we sought to minimize the friction between keeping up with sports and the betting experience. Our goal is to give casual sports bettors a fun and safe place to start their sports betting journey and come back to follow the action.

Background

All your odds in one place.

The odds tab houses all bets related to a specific event such as individual games, players, leagues, and tournaments. We needed a simple yet intuitive design for users to see the bet types they were looking for. On top of that, the design system for this tab had to be flexible enough for not only all the aforementioned use cases but for different sports, different types of bets, and different bet statuses (whether a bet is live, closed, or if a user has won on a bet they have placed).

League odds

Users can see daily upcoming, live, and closed odds under each league. They can also bet on futures such as league championships.

Game odds

Before and during a game, users can go to the odds tab and quickly find all the available bets for that game and immediately place bets on the action.

iphone 12 screenshot of the odds tab for the 49ers v rams game. there are three "six packs" (a grouping of six different odds options for one bet) on the screen

Post-game odds

Even after a game is over, users can go to the odds tab to see which bets hit. This can be useful information for users who plan to bet on those teams in the future.

iphone 12 screenshot of the odds tab for the bucks v cavaliers game in a post-game state. there are green checks by the bets that hit

Prop bets

Prop bets are bets unrelated to the final outcome of the game. While there can be dozens of prop bets per game, users can navigate them easily in our grouped lists.

Edge cases

Some sports don’t fall neatly into the six-pack. It was crucial for us to accommodate edge cases such as draws in soccer or non-team sports like golf and tennis.

Background

Designing a clear and concise betslip.

The betslip is the shopping cart of Sportsbook Home. Once a user selects a bet, they can edit their bet amount, add more bets, or customize their bet type in the betslip. The design of the betslip went through rigorous testing so users could know exactly what they’re putting their money on. Once a user is ready to place their bet, they are taken to our book partner BetMGM to complete the payment process.

Placing bets

Once a user taps on a bet, they can modify either the bet amount or potential winnings to the desired amount. They are then taken to our partner BetMGM to complete payment.

iphone 12 gif of a user placing a bet. the user clicks on the lakers point spread bet which opens a drawer where they can determine how much money to place on a bet. they are then taken to bet mgm to complete the payment process and are redirected back to yahoo sports.

Change in value

Odds can change very frequently and suddenly. To accommodate for this, we added a warning animation when the value of an odd changes in the betslip.

iphone 12 gif of a user attempting to place a $10 bet on the rams point spread. the potential winnings and odds flash green because the odds updated in live time to be more favorable

Multiple bets

Our V2 of the betslip will allow users to place multiple individual bets or parlays. This will allow them to shop around the Sports app and place all their bets at once when they’re ready.

Using line movement to read the room.

In sports betting, “line movement” refers to when the odds for a bet change leading up to the game. For example, if Steph Curry got injured the day before the Warriors/Jazz game and as a result bettors decided to place more money on the Jazz, the Warriors’ money line would trend downward as the Jazz become the favored team. In a sense, analyzing line movement can be akin to reading the vibes at a party. Figuring out how to interpret line movement charts can be the difference between cashing or trashing a betslip.

Precise dates

The exact date and time of line movement updates as users scrub through the chart. This will help them narrow down the events that could’ve caused the line to move.

iphone 12 gif of the warriors v lakers in a pre game state. a user is scrubbing through the line movement chart and the dates and odds are updating respectively

Toggling teams

Users can toggle between both teams to understand each team’s line movement and find any correlations between the two.

iphone 12 gif of a user switching the line movement chart from the warriors to the lakers by tapping the filter button and selecting the team from a drawer

Showing favorites

When a user scrubs through the chart, the point in which a team flips from favored to unfavored (or vice versa) will briefly flash in red to emphasize the moment’s significance to users.

iphone 12 screenshot of the line movement chart for the warriors and lakers game. the user is scrubbing through the chart and the axis line is flashing red as the warriors team goes from favored to unfavored

Helping bettors beat the odds (lol).

Public bet and money percentages refer to the number of bets and amount of money placed on one side of a wager. Following public betting trends and percentages can help inform bettors on how to place their bets. Many of our competitors paywall betting data that normally only seasoned bettors would be interested in, but we decided to offer them to all our users so we could pique the interest of casual bettors and lower the barrier to entry for new bettors.

Bet and money %

Users can toggle between bet and money percentages to compare them and find discrepancies. This helps them find where the pro bettors are placing their money.

iphone 12 gif of a user toggling between the public bet percentage and the public money percentage of the nuggets and warriors game

Betting insights

Insights such as team records and implied final scores are also surfaced to give bettors even more context when placing bets.

iphone 12 screenshot of the nuggets v warriors game. the odds module shows the public bet percentage along with the implied final score and the nuggets v warriors record

League trends

Users can also see bet percentages of several games at once on a league level. This can give them a quick snapshot of which teams in the league are currently favored by bettors.

iphone 12 screenshot of sportsbook home on the mlb tab. shows completed games, the odds that hit, and the public bet percentage for each game

High stakes, high rewards.

We are constantly looking for ways to improve Sportsbook so we have our UXR team frequently running studies and sending surveys. Users frequently comment on how nice the betting design is and how easy it is to maneuver. However, one major piece of feedback we are implementing in the future is hiding betting content. We are adding an option to disable betting content in the Sports app for people who are not interested in betting or, more seriously, for those who are attempting to control a gambling addiction.
‍
Working on the launch of Sportsbook has been my most challenging project to date. On top of diving into a very technical subject I knew absolutely nothing about (aside from watching Uncut Gems), I had to work with many legal restraints and creating a seamless experience across not just our product but BetMGM’s as well. One of my biggest takeaways from this project has been to be explicit and show prototypes when communicating your vision. When there’s money and tons of technical terms constantly being thrown around, it never hurts to clarify.

Article

Article pages also received a massive refresh during the redesign. The old Newsroom design felt cluttered and distracted users from the contents of the article. We took the time to make articles more readable, more accessible, and more focused on the news itself.