THESCORE (PENN ENTERTAINMENT)
THESCORE (PENN ENTERTAINMENT)
Resetting the Betslip
Resetting the Betslip
Creating a seamless and personalized experience for the number one transactional touchpoint on our app.
Creating a seamless and personalized experience for the number one transactional touchpoint on our app.
INTRODUCTION
INTRODUCTION
The betslip is the number one transactional touchpoint.
The betslip is the number one transactional touchpoint.
A betslip is where patrons can add and place their bets essentially like a shopping cart for bets. The betslip is the single most valuable conversion surface in a sportsbook with many of our competitors treating the betslip as a strategic asset and iterating on it constantly. theScore Bet's betslip has not been updated in many years and with it being the number one transactional touchpoint, some major improvements are needed.
A betslip is where patrons can add and place their bets essentially like a shopping cart for bets. The betslip is the single most valuable conversion surface in a sportsbook with many of our competitors treating the betslip as a strategic asset and iterating on it constantly. theScore Bet's betslip has not been updated in many years and with it being the number one transactional touchpoint, some major improvements are needed.
As one of the product designers on this team, I led the conceptualization and ideation of the error surfacing on the minimized betslip and the betslip settings page along with conducting user research, stakeholder presentations, creating high-fidelity designs and prototyping.
As one of the product designers on this team, I led the conceptualization and ideation of the error surfacing on the minimized betslip and the betslip settings page along with conducting user research, stakeholder presentations, creating high-fidelity designs and prototyping.
ROLE
ROLE
Product Designer
Product Designer
TIMELINE
TIMELINE
August 2025 - Present
August 2025 - Present
TEAM
TEAM
4 Designers, 1 PM, Director of Product
4 Designers, 1 PM, Director of Product
IMPACT
IMPACT
15,663% Increase in Total Usage
15,663% Increase in Total Usage
Within one month from launch, 137,613 Auto Accept "Toggled On" events have been recorded across iOS and Android. This represents a massive shift from the previous timeframe comparison: only 873 "Toggled On" events.
Within one month from launch, 137,613 Auto Accept "Toggled On" events have been recorded across iOS and Android. This represents a massive shift from the previous timeframe comparison: only 873 "Toggled On" events.
13% Increase in Bet Placement
13% Increase in Bet Placement
Led end-to-end design and deployment of the auto-accept odds feature on the number one transactional touchpoint, contributing to a 13% increase in bet placement rate and a sustained 33.6% re-engagement rate.
Led end-to-end design and deployment of the auto-accept odds feature on the number one transactional touchpoint, contributing to a 13% increase in bet placement rate and a sustained 33.6% re-engagement rate.
6,150% Increase in Conversions
6,150% Increase in Conversions
Within one month from launch, 12.5% of logged-in users enabled Auto Accept Odds Changes compared to the previous timeframe, only 0.2% of logged-in users enabled Auto Accept Odds Changes.
Within one month from launch, 12.5% of logged-in users enabled Auto Accept Odds Changes compared to the previous timeframe, only 0.2% of logged-in users enabled Auto Accept Odds Changes.
OVERVIEW
OVERVIEW
The betslip hasn't received much love in the past years.
The betslip hasn't received much love in the past years.
The betslip is the single most valuable conversion surface in the sports book, yet today it suffers from incremental, disconnected changes that add unnecessary complexity and wasted space in a highly constrained UI. Through a strategic overhaul of the betslip, we aim to reduce friction, improve clarity, and maximize conversion.
The betslip is the single most valuable conversion surface in the sports book, yet today it suffers from incremental, disconnected changes that add unnecessary complexity and wasted space in a highly constrained UI. Through a strategic overhaul of the betslip, we aim to reduce friction, improve clarity, and maximize conversion.
CURRENT BETSLIP / EMPTY SPACE
CURRENT BETSLIP / EMPTY SPACE
By reducing friction in our betslip, we can decrease the abandonment of bets by fixing inefficiencies which can slow bet placement and reduce live betting uptake. When errors are hidden or require multiple steps to resolve, users lose trust. By incrementally upgrading our betslip, we can help improve clarity, speed, and consistency in our betting experience.
By reducing friction in our betslip, we can decrease the abandonment of bets by fixing inefficiencies which can slow bet placement and reduce live betting uptake. When errors are hidden or require multiple steps to resolve, users lose trust. By incrementally upgrading our betslip, we can help improve clarity, speed, and consistency in our betting experience.
PROBLEM STATEMENT
PROBLEM STATEMENT
How can we leverage our betslip's limited user interface to streamline the bet confirmation experience without adding unnecessary complexity.
How can we leverage our betslip's limited user interface to streamline the bet confirmation experience without adding unnecessary complexity.
FINAL DESIGNS
FINAL DESIGNS
Our new and improved betslip with two new features.
Our new and improved betslip with two new features.
Introducing the minimized betslip and the betslip settings page where users can personalize their betslip while also having more information to make better and more educated bets.
Introducing the minimized betslip and the betslip settings page where users can personalize their betslip while also having more information to make better and more educated bets.
FINAL DESIGNS
FINAL DESIGNS
Easy error resolution.
Easy error resolution.
Even when your betslip is minimized, patrons can easily see what error is impacting their betslip and quickly make a change.
Even when your betslip is minimized, patrons can easily see what error is impacting their betslip and quickly make a change.
CORE FLOW 1 / MINIMIZED ERRORS
CORE FLOW 1 / MINIMIZED ERRORS
FINAL DESIGNS
FINAL DESIGNS
Fine-tune your betslip.
Fine-tune your betslip.
Open the new bet preferences page to change your odds behavior, quick amounts, and same stake amount.
Open the new bet preferences page to change your odds behavior, quick amounts, and same stake amount.
CORE FLOW 2 / ENTRY POINT
CORE FLOW 2 / ENTRY POINT
FINAL DESIGNS
FINAL DESIGNS
Accepting Odds Changes
Accepting Odds Changes
Patrons can change the way they accept odds to create a more seamless and quicker betting experience based on their risk tolerance.
Patrons can change the way they accept odds to create a more seamless and quicker betting experience based on their risk tolerance.
BETSLIP SETTING / ACCEPTING ODDS CHANGES
BETSLIP SETTING / ACCEPTING ODDS CHANGES
FINAL DESIGNS
FINAL DESIGNS
Quick Amounts
Quick Amounts
Quick Amounts Preferences allow users to change their quick amount values to set their bet amount instantly with the press of a button.
Quick Amounts Preferences allow users to change their quick amount values to set their bet amount instantly with the press of a button.
BETSLIP SETTINGS / QUICK AMOUNTS
BETSLIP SETTINGS / QUICK AMOUNTS
FINAL DESIGNS
FINAL DESIGNS
Same Stake
Same Stake
Same Stake helps you speed through your bets by automatically setting your stake to a fixed amount. It’s perfect if you like consistency, as it cuts out the extra clicks and lets you place bets instantly.
Same Stake helps you speed through your bets by automatically setting your stake to a fixed amount. It’s perfect if you like consistency, as it cuts out the extra clicks and lets you place bets instantly.
BETSLIP SETTINGS / SAME STAKE
BETSLIP SETTINGS / SAME STAKE
COMPETITOR ANALYSIS
COMPETITOR ANALYSIS
We are falling behind our competitors.
We are falling behind our competitors.
Looking at some of our competitors, we can tell that theScore is falling behind. Other competitors are treating the betslip as a strategic asset with many having dedicated teams iterating on it constantly.
Looking at some of our competitors, we can tell that theScore is falling behind. Other competitors are treating the betslip as a strategic asset with many having dedicated teams iterating on it constantly.
COMPETITOR ANALYSIS / DRAFTKINGS & FANDUEL
COMPETITOR ANALYSIS / DRAFTKINGS & FANDUEL
After reviewing competitors like DraftKings, FanDuel, and Caesars, we found that most include auto-accept odds toggles and payout previews in their minimized betslips. Notably, DraftKings and Fanatics go a step further by offering Quick Wager customization and richer odds data in that same space.
By spotting these patterns across DraftKings and FanDuel, we saw a clear chance to level up our betslip experience, by keeping up with competitors and streamlining the bet placement experience.
After reviewing competitors like DraftKings, FanDuel, and Caesars, we found that most include auto-accept odds toggles and payout previews in their minimized betslips. Notably, DraftKings and Fanatics go a step further by offering Quick Wager customization and richer odds data in that same space.
By spotting these patterns across DraftKings and FanDuel, we saw a clear chance to level up our betslip experience, by keeping up with competitors and streamlining the bet placement experience.
USER RESEARCH
USER RESEARCH
What do users want?
What do users want?
Looking through previous UX research reports developed by our research team through 9 user interviews and over 400 users surveyed, we pinpointed three main wants: users want odds shown as payout, they want an instructional-style of messaging and they want new features.
Looking through previous UX research reports developed by our research team through 9 user interviews and over 400 users surveyed, we pinpointed three main wants: users want odds shown as payout, they want an instructional-style of messaging and they want new features.
Showing Payout
Showing Payout
36% of users said odds shown as payout would boost their confidence (Bet $5 to win $10).
36% of users said odds shown as payout would boost their confidence (Bet $5 to win $10).
Risk Aversion: Preliminary UXR Findings
July 2025
Risk Aversion: Preliminary UXR Findings
July 2025
Instructions
Instructions
31% of users want an instructional-style of messaging.
31% of users want an instructional-style of messaging.
Risk Aversion: Preliminary UXR Findings
July 2025
Risk Aversion: Preliminary UXR Findings
July 2025
Top Features
Top Features
Users ranked "Apply same stake" and "Auto-accept all odds" as their top two wanted features.
Users ranked "Apply same stake" and "Auto-accept all odds" as their top two wanted features.
Betslip 2.0 Survey Insights, November 2025
Betslip 2.0 Survey Insights, November 2025
With these research insights, I was put on two priority feature: error resolution on the minimized betslip and a betslip settings page where users can toggle their bet preferences.
With these research insights, I was put on two priority feature: error resolution on the minimized betslip and a betslip settings page where users can toggle their bet preferences.
PROCESS
PROCESS
Understanding and categorizing our errors.
Understanding and categorizing our errors.
To understand more about what I was working with, I started to map out all of the errors and categorized them into special categories. After working with my PM, we came up with 8 unique error states.
To understand more about what I was working with, I started to map out all of the errors and categorized them into special categories. After working with my PM, we came up with 8 unique error states.
ELLIGIBLE BETSLIP ERRORS / CATEGORIZING ERRORS
ELLIGIBLE BETSLIP ERRORS / CATEGORIZING ERRORS
By mapping out the errors, I could understand each error state before starting to map out the designs. As for all other generic betslip errors, we decided on "Issues Detected" as the message to be displayed to patrons.
By mapping out the errors, I could understand each error state before starting to map out the designs. As for all other generic betslip errors, we decided on "Issues Detected" as the message to be displayed to patrons.
PROCESS
PROCESS
North Star Design Principles
North Star Design Principles
We can start by defining success through establishing guiding principles for this redesign.
We can start by defining success through establishing guiding principles for this redesign.
Build Around What Matters Most
Build Around What Matters Most
Most of our business happens on mobile so focusing on iOS/Android constraints before web is a priority. With a goal to increase parlays, we want to focus on the parlay experience as well.
Most of our business happens on mobile so focusing on iOS/Android constraints before web is a priority. With a goal to increase parlays, we want to focus on the parlay experience as well.
Information With Intent
Information With Intent
Every pixel in the slip earns its keep as there is no room for redundant or oversized elements. We want to focus on clarity and visibility, showing only the essential info and never hiding errors behind a collapsed betslip.
Every pixel in the slip earns its keep as there is no room for redundant or oversized elements. We want to focus on clarity and visibility, showing only the essential info and never hiding errors behind a collapsed betslip.
Scalability
Scalability
Designs should be scalable and able to be taken out of context for future iterations and explorations.
Designs should be scalable and able to be taken out of context for future iterations and explorations.
DESIGN DECISIONS - MINIMIZED BETSLIP
DESIGN DECISIONS - MINIMIZED BETSLIP
Adding additional information onto the minimized state.
Adding additional information onto the minimized state.
When considering how to display more data on the minimized betslip, we chose to utilize the available space on the right side of the page for important information such as odds, payout, and bet-type.
When considering how to display more data on the minimized betslip, we chose to utilize the available space on the right side of the page for important information such as odds, payout, and bet-type.
MINIMIZED BETSLIP / DESIGN DECISIONS
MINIMIZED BETSLIP / DESIGN DECISIONS
1.0
By introducing bet-type, patrons can see what kind of bet is in their betslip. This is especially useful when patrons add multiple bets to their betslip turning it into a parlay.
By introducing bet-type, patrons can see what kind of bet is in their betslip. This is especially useful when patrons add multiple bets to their betslip turning it into a parlay.
2.0
Having odds on the minimized betslip lets patrons track their potential payout and price changes at a glance. It helps them quickly judge the risk without having to open the full view.
Having odds on the minimized betslip lets patrons track their potential payout and price changes at a glance. It helps them quickly judge the risk without having to open the full view.
3.0
Since 36% of users feel more confident seeing odds as a potential payout, we added a clear "Bet $5 to win $10" summary to the minimized state. This gives patrons an instant, tangible look at their return without any extra math.
Since 36% of users feel more confident seeing odds as a potential payout, we added a clear "Bet $5 to win $10" summary to the minimized state. This gives patrons an instant, tangible look at their return without any extra math.
DESIGN DECISIONS - MINIMIZED BETSLIP
DESIGN DECISIONS - MINIMIZED BETSLIP
Updating the patron on their bet-type.
Updating the patron on their bet-type.
After revisiting our minimized betslip, we noticed that we could leverage the space on the left of the betslip as well.
After revisiting our minimized betslip, we noticed that we could leverage the space on the left of the betslip as well.
OPTION 1: MINIMIZED BETSLIP / BET-TYPE ON THE RIGHT
OPTION 1: MINIMIZED BETSLIP / BET-TYPE ON THE RIGHT
Additional helpful information that patrons want such as odds and payout.
Additional helpful information that patrons want such as odds and payout.
Most patrons know that this is a betslip so having the word betslip can be redundant.
Most patrons know that this is a betslip so having the word betslip can be redundant.
OPTION 2: MINIMIZED BETSLIP / BET-TYPE ON THE RIGHT
OPTION 2: MINIMIZED BETSLIP / BET-TYPE ON THE RIGHT
Additional helpful information that patrons want such as odds and payout.
Additional helpful information that patrons want such as odds and payout.
Identifying text stating this is a betslip is lost which could impact more newer users.
Identifying text stating this is a betslip is lost which could impact more newer users.
Upon further review, we determined that the 'Betslip' label was redundant, as the context is clear to most patrons. To maximize space, we replaced it with the specific bet-type currently selected.
Upon further review, we determined that the 'Betslip' label was redundant, as the context is clear to most patrons. To maximize space, we replaced it with the specific bet-type currently selected.
DESIGN DECISIONS - MINIMIZED BETSLIP
DESIGN DECISIONS - MINIMIZED BETSLIP
Surfacing errors on the minimized state.
Surfacing errors on the minimized state.
When designing the bet placement process, a critical design decision came up involving a choice between utilizing the current betslip workflow or enabling direct betting through the AI interface.
When designing the bet placement process, a critical design decision came up involving a choice between utilizing the current betslip workflow or enabling direct betting through the AI interface.
OPTION 1:MINIMIZED BETSLIP / DISPLAYING ERRORS
OPTION 1:MINIMIZED BETSLIP / DISPLAYING ERRORS
Red colour and iconography immediately calls attention to error(s).
Red colour and iconography immediately calls attention to error(s).
The icon takes up a lot of real estate.
The icon takes up a lot of real estate.
OPTION 2: MINIMIZED BETSLIP / DISPLAYING ERRORS
OPTION 2: MINIMIZED BETSLIP / DISPLAYING ERRORS
Icon is on the left to maximize the small real estate for text on the right especially for smaller devices.
Icon is on the left to maximize the small real estate for text on the right especially for smaller devices.
Errors are not as immediately noticeable.
Errors are not as immediately noticeable.
However, after further iteration, I noticed some flaws with both these options. After many revisions, I finally came up with the final version show below as option 3.
However, after further iteration, I noticed some flaws with both these options. After many revisions, I finally came up with the final version show below as option 3.
OPTION 3: MINIMIZED BETSLIP / DISPLAYING ERRORS
OPTION 3: MINIMIZED BETSLIP / DISPLAYING ERRORS
1.0
To avoid patrons from associating the color with errors, I removed the colour. For example, if a user sees a red circle with the number three, they may assume they have three errors.
To avoid patrons from associating the color with errors, I removed the colour. For example, if a user sees a red circle with the number three, they may assume they have three errors.
2.0
Since odds are irrelevant for ineligible bets, we replaced them with a "Closed" header and an error icon. This saves space while making the bet's status even more obvious to the user.
Since odds are irrelevant for ineligible bets, we replaced them with a "Closed" header and an error icon. This saves space while making the bet's status even more obvious to the user.
3.0
Short messaging on the bottom such as 'Remove Picks,' helps provide guidance to the patron on what next steps they need to do to resolve their current errors.
Short messaging on the bottom such as 'Remove Picks,' helps provide guidance to the patron on what next steps they need to do to resolve their current errors.
DESIGN DECISIONS - MINIMIZED BETSLIP
DESIGN DECISIONS - MINIMIZED BETSLIP
What if there are multiple errors?
What if there are multiple errors?
A major question of contention was what message should we surface when there are multiple errors? I had created two options, one where we should rank errors by severity and show the highest priority error versus an option with a more generic message for multiple errors.
A major question of contention was what message should we surface when there are multiple errors? I had created two options, one where we should rank errors by severity and show the highest priority error versus an option with a more generic message for multiple errors.
OPTION 1:MULTIPLE ERRORS / PRIORITIZING BY SEVERITY
OPTION 1:MULTIPLE ERRORS / PRIORITIZING BY SEVERITY
Brings more clarity to the most severe error.
Brings more clarity to the most severe error.
The user does not know they have more than one error which could bring confusion.
The user does not know they have more than one error which could bring confusion.
OPTION 2: MULTIPLE ERRORS / PRIORITIZING BY SEVERITY
OPTION 2: MULTIPLE ERRORS / PRIORITIZING BY SEVERITY
User knows that there a multiple errors with their betslip.
User knows that there a multiple errors with their betslip.
Users do not know the specific errors to resolve.
Users do not know the specific errors to resolve.
The confusion and complexity created from the prioritization of errors did not outweigh the benefits so I decided to go with a generic error message.
The confusion and complexity created from the prioritization of errors did not outweigh the benefits so I decided to go with a generic error message.
DESIGN DECISIONS - MINIMIZED BETSLIP
DESIGN DECISIONS - MINIMIZED BETSLIP
There was a unique error called the suspended pick.
There was a unique error called the suspended pick.
Since suspended picks can become active again, they need a unique treatment compared to permanent errors. We kept the odds visible but styled them differently to show they're temporarily unavailable while still highlighting the potential for a future bet.
Since suspended picks can become active again, they need a unique treatment compared to permanent errors. We kept the odds visible but styled them differently to show they're temporarily unavailable while still highlighting the potential for a future bet.
ERROR MESSAGE / SUSPENDED
ERROR MESSAGE / SUSPENDED
1.0
I used a caution-themed icon and color palette to separate suspended picks from permanent errors. This signals a temporary state rather than a dead end, helping users understand that the bet might become available again soon.
I used a caution-themed icon and color palette to separate suspended picks from permanent errors. This signals a temporary state rather than a dead end, helping users understand that the bet might become available again soon.
2.0
To alert the user further, we added the text 'Odds refreshing,' to let the user know that the bet is suspended and updating in real time.
To alert the user further, we added the text 'Odds refreshing,' to let the user know that the bet is suspended and updating in real time.
DESIGN DECISIONS - BETSLIP SETTINGS PAGE
DESIGN DECISIONS - BETSLIP SETTINGS PAGE
Designing the entry point.
Designing the entry point.
When designing the entry point of the bet preferences page, I had to decide between an overflow menu versus a gear icon.
When designing the entry point of the bet preferences page, I had to decide between an overflow menu versus a gear icon.
OPTION 1: BETSLIP SETTINGS / OVERFLOW MENU
OPTION 1: BETSLIP SETTINGS / OVERFLOW MENU
Stores features currently on the betslip into an overflow menu decluttering our betslip.
Stores features currently on the betslip into an overflow menu decluttering our betslip.
Allows for new features directly related to the betslip such as a 'Share' feature.
Allows for new features directly related to the betslip such as a 'Share' feature.
User needs more clicks to access the 'Bet Preferences' page.
User needs more clicks to access the 'Bet Preferences' page.
Does not represent a settings page as clearly.
Does not represent a settings page as clearly.
OPTION 2: BETSLIP SETTINGS / GEAR ICON
OPTION 2: BETSLIP SETTINGS / GEAR ICON
One less click to get to the bet preferences page saving time for users.
One less click to get to the bet preferences page saving time for users.
The gear icon is more recognizable and provides a clearer visual cue for the settings page.
The gear icon is more recognizable and provides a clearer visual cue for the settings page.
Loss opportunity to declutter betslip by moving features into the overflow menu.
Loss opportunity to declutter betslip by moving features into the overflow menu.
Requires a new gear icon to be made.
Requires a new gear icon to be made.
While decluttering the betslip seemed beneficial, hiding features risked reducing engagement. I ultimately chose the gear icon because it clearly signals 'Settings' and provides a more direct path to the preferences page with fewer clicks.
While decluttering the betslip seemed beneficial, hiding features risked reducing engagement. I ultimately chose the gear icon because it clearly signals 'Settings' and provides a more direct path to the preferences page with fewer clicks.
DESIGN DECISIONS - BETSLIP SETTINGS PAGE
DESIGN DECISIONS - BETSLIP SETTINGS PAGE
Using progressive disclosure to educate users on a new feature.
Using progressive disclosure to educate users on a new feature.
When designing the betslip settings page, I iterated many versions. Throughout this process, I had to balance efficiency versus clarity.
When designing the betslip settings page, I iterated many versions. Throughout this process, I had to balance efficiency versus clarity.
OPTION 1: BETSLIP SETTINGS / MENU
OPTION 1: BETSLIP SETTINGS / MENU
Saves space and less clutter keeping it future-proof for additional features.
Saves space and less clutter keeping it future-proof for additional features.
No additional information about what odd changes are.
No additional information about what odd changes are.
OPTION 2: BETSLIP SETTINGS / ALL IN ONE SHEET
OPTION 2: BETSLIP SETTINGS / ALL IN ONE SHEET
Provides all the information on one sheet needing less clicks.
Provides all the information on one sheet needing less clicks.
Takes up a lot of room and requires a big cognitive load especially when more features are added.
Takes up a lot of room and requires a big cognitive load especially when more features are added.
Although It would be ideal to use the bottom sheet which is a design system component, it wouldn't create the ideal user experience. As such, I opted to use progressive disclosure to not only save space but to also future-proof the design and provide additional contextual information especially since this was a new feature to our app and because we just launched in new states like Missouri where betting was only recently legalized so we'd have many rookie bettors.
Although It would be ideal to use the bottom sheet which is a design system component, it wouldn't create the ideal user experience. As such, I opted to use progressive disclosure to not only save space but to also future-proof the design and provide additional contextual information especially since this was a new feature to our app and because we just launched in new states like Missouri where betting was only recently legalized so we'd have many rookie bettors.
OPTION 3: BETSLIP SETTINGS / PROGRESSIVE DISCLOSURE
OPTION 3: BETSLIP SETTINGS / PROGRESSIVE DISCLOSURE
Saves space and less clutter keeping it future-proof for additional futures.
Saves space and less clutter keeping it future-proof for additional futures.
Uses progressive disclosure to provide more contextual information.
Uses progressive disclosure to provide more contextual information.
Does not use one of our design system components.
Does not use one of our design system components.
Requires more clicks and pages which takes more time for users to perform their changes.
Requires more clicks and pages which takes more time for users to perform their changes.
DESIGN DECISIONS - BETSLIP SETTINGS PAGE
DESIGN DECISIONS - BETSLIP SETTINGS PAGE
Which preferences will users use the most?
Which preferences will users use the most?
When deciding the layout of the bet preferences page, I had to think about which settings would users change the most and decided the layout based on higher usage.
When deciding the layout of the bet preferences page, I had to think about which settings would users change the most and decided the layout based on higher usage.
OPTION 1:BET PREFERENCES / ODDS FIRST
OPTION 1:BET PREFERENCES / ODDS FIRST
OPTION 2: BET PREFERENCES / BETSLIP FIRST
OPTION 2: BET PREFERENCES / BETSLIP FIRST
As such, I decided to put the betslip preferences on top as users would change those more often than the preferences related to odds.
As such, I decided to put the betslip preferences on top as users would change those more often than the preferences related to odds.
DESIGN DECISIONS - BETSLIP SETTINGS PAGE
DESIGN DECISIONS - BETSLIP SETTINGS PAGE
Changing our starting quick amounts.
Changing our starting quick amounts.
After looking at some of our data, I noticed that our most commonly placed bets are in the range of $7-$15. However, our current quick-select amounts ($20, $50, $100, and Max) are set too high and are rarely being used.
After looking at some of our data, I noticed that our most commonly placed bets are in the range of $7-$15. However, our current quick-select amounts ($20, $50, $100, and Max) are set too high and are rarely being used.
OPTION 1: QUICK AMOUNTS / CURRENT
OPTION 1: QUICK AMOUNTS / CURRENT
OPTION 2: QUICK AMOUNTS / COMMON BET AMOUNTS
OPTION 2: QUICK AMOUNTS / COMMON BET AMOUNTS
As such, I decided to change the quick amounts from the high amounts that are currently not getting much usage to the lower amounts which are commonly bet.
As such, I decided to change the quick amounts from the high amounts that are currently not getting much usage to the lower amounts which are commonly bet.
SUCCESS
SUCCESS
Solving a lot of our problems and starting a broader conversation.
Solving a lot of our problems and starting a broader conversation.
During the design and review process of this betslip reset, I noticed many different issues with our current betslip and design system - some of which I got to fix!
During the design and review process of this betslip reset, I noticed many different issues with our current betslip and design system - some of which I got to fix!
Inconsistent Color Tokens
Inconsistent Color Tokens
Our app uses a light betslip in Canada and a dark one in the US. Since some colors didn't exist for both, with many colours not following accessibility guidelines on the light betslip. I flagged the gap and helped create unique color tokens for our warning states. This also brought a bigger conversation of unifying our betslip colors.
Our app uses a light betslip in Canada and a dark one in the US. Since some colors didn't exist for both, with many colours not following accessibility guidelines on the light betslip. I flagged the gap and helped create unique color tokens for our warning states. This also brought a bigger conversation of unifying our betslip colors.
Revisiting Our Settings
Revisiting Our Settings
We originally had an idea of redirecting our patrons to our current settings page which flagged questions of needing to re-do our information architecture. As such, I got the opportunity to start on a settings revamp.
We originally had an idea of redirecting our patrons to our current settings page which flagged questions of needing to re-do our information architecture. As such, I got the opportunity to start on a settings revamp.
Fixing A Design System Component
Fixing A Design System Component
Our current design system has a menu component but it has never been used as a context menu. As such, it did not have the proper padding for that use case which is now fixed.
Our current design system has a menu component but it has never been used as a context menu. As such, it did not have the proper padding for that use case which is now fixed.
Missing Icons
Missing Icons
Although our design system has up and down chevron icons, it did not have them together. With this, I got the opportunity to add two new icon to our system.
Although our design system has up and down chevron icons, it did not have them together. With this, I got the opportunity to add two new icon to our system.
SUCCESS
SUCCESS
What was our impact?
What was our impact?
So far, we've only rolled out the 'Auto-accept favorable odds' feature as an MVP but the insights from that feature alone speak for itself.
So far, we've only rolled out the 'Auto-accept favorable odds' feature as an MVP but the insights from that feature alone speak for itself.
15,663% Increase in Total Usage
15,663% Increase in Total Usage
Within one month from launch, 137,613 Auto Accept "Toggled On" events have been recorded across iOS and Android. This represents a massive shift from the previous timeframe comparison: only 873 "Toggled On" events.
Within one month from launch, 137,613 Auto Accept "Toggled On" events have been recorded across iOS and Android. This represents a massive shift from the previous timeframe comparison: only 873 "Toggled On" events.
13% Increase in Bet Placement
13% Increase in Bet Placement
Led end-to-end design and deployment of the auto-accept odds feature on the number one transactional touchpoint, contributing to a 13% increase in bet placement rate and a sustained 33.6% re-engagement rate.
Led end-to-end design and deployment of the auto-accept odds feature on the number one transactional touchpoint, contributing to a 13% increase in bet placement rate and a sustained 33.6% re-engagement rate.
6,150% Increase in Conversions
6,150% Increase in Conversions
Within one month from launch, 12.5% of logged-in users enabled Auto Accept Odds Changes compared to the previous timeframe, only 0.2% of logged-in users enabled Auto Accept Odds Changes.
Within one month from launch, 12.5% of logged-in users enabled Auto Accept Odds Changes compared to the previous timeframe, only 0.2% of logged-in users enabled Auto Accept Odds Changes.
TAKEAWAYS
TAKEAWAYS
What did I learn?
What did I learn?
1.0
Every Pixel Counts
Every Pixel Counts
Working on such a small canvas such as the minimized betslip really helped me learn how to make the best use of my space. When every single pixel counts, design decisions matter and redundancy should always be avoided.
Working on such a small canvas such as the minimized betslip really helped me learn how to make the best use of my space. When every single pixel counts, design decisions matter and redundancy should always be avoided.
2.0
Leveraging Copy Writing
Leveraging Copy Writing
Language plays a huge part in the design process. Copy writing can help provide clearer context to users but it can also save space and precious pixels by being concise.
Language plays a huge part in the design process. Copy writing can help provide clearer context to users but it can also save space and precious pixels by being concise.
3.0
Collaboration Is Essential
Collaboration Is Essential
As I progressed through this project, I started to gain more confidence in speaking up. By voicing my design decision even to my Principal Designer, we were able to spit-ball back and forth to come up with designs we would have never been able to by ourselves.
As I progressed through this project, I started to gain more confidence in speaking up. By voicing my design decision even to my Principal Designer, we were able to spit-ball back and forth to come up with designs we would have never been able to by ourselves.
4.0
Putting Yourself In The User's Shoes
Putting Yourself In The User's Shoes
Whenever I encountered a problem, I always found putting myself in the user's shoes to be incredibly helpful. Although, it is obvious, when you start to look at design from a user's perspective instead of yours, you can uncover a lot of insights and pain points that you may have missed.
Whenever I encountered a problem, I always found putting myself in the user's shoes to be incredibly helpful. Although, it is obvious, when you start to look at design from a user's perspective instead of yours, you can uncover a lot of insights and pain points that you may have missed.
Made in Toronto with lots of Ninja Creami Protein Ice Creams.
© Selected Works / Ryan Wong
2026
Made in Toronto with lots of Ninja Creami Protein Ice Creams.
© Selected Works / Ryan Wong
2026