-Background-Navigation-Feed-Article-Customization-Design System-Analysis
Yahoo Sportsbook
iphone 12 screenshot of yahoo sportsbook showing the line movement chart of the warriors v lakers game
iphone 12 screenshot of sportsbook home. shows several games with odds listed in a six-button grid
iphone 12 screenshot of yahoo sportsbook showing the public bet percentage of the utah jazz v dallas mavericks game
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.
Jan 2020- present
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.
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.
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.
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.
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.
iphone 12 screenshot of a future betslip iteration where users can add multiple bets to their betslip. here a user has a bet on the rams point spread and the 49ers moneyline
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 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.