Web Platform for theScore Bet & ESPN Bet

At theScore, I designed and shipped our web platform from 0-to-1 to complement our native mobile gaming apps in Canada and the US. I worked closely with product and engineering to ship in just over a year. From strategy to design systems to design QA, this project spanned the entire end-to-end design process. Check the live web platform now below!

Platforms
Web

Year
Shipped Early 2023

Role
Product Designer

Objective & Problem

When I first joined the team in 2021, theScore BET existed only on iOS and Android where patrons looking to bet on their desktop devices were met with a prompt to download the app on their phones. In such a competitive industry, we were lacking the web-based platform that our direct competitors like Fanduel, DraftKings, and Bet365 already have.

Importantly, in a post-covid landscape, many people started working from home and thus had more free-time to bet on their desktop during work hours.

thescore.bet in 2021, pre-web platform

Opportunities

However, since we were building something net new, we had the chance to build something that not only tailored to desktop bettors but also the hybrid user in a seamless ecosystem. This in turn got us thinking…

Are there any differences between the needs of mobile bettors versus desktop bettors?

Design Strategy

We spent the first months brainstorming the design and delivery strategy of the web platform alongside the product and engineering teams. Our plan included:

Research & Design Discovery

We planned a user survey to discover the nuances of what a web desktop bettor needs and the pain points that existed when using competitors sites. We also interviewed our product leaders to establish the vision.

Roadmapping

Create a roadmap that outlines the design milestones and to determine what problems are the most important to solve for.

Sprint Planning

Building an entire web sportsbook & casino cannot be tackled all at once. We broke down what designs to work on in a sprint to sprint basis to make the work more focused and to stay on track.

Post-Launch Evaluation

As a net new product, we needed to validate that what we build was effective. We took measures to plan for beta testing, a/b testing, and markers for analytics.

Research

In our survey, we sought to answer some key research questions that would guide our designs later on:

  1. What are the touchpoints between web and mobile?

  2. What part of the experience is preferred or more valuable on web?

Users prefer to use desktop for browsing because there’s more real estate and it’s easier to navigate

Key Findings

Users want a one-stop shop for research and betting.

Users primarily use desktop for financial management and transactions.

Users who primarily bet on desktop skew older than most mobile bettors.

Advanced bettors are more likely to use desktop.

Using our research we were able to define opportunities and painpoints through a summarizing journey map and started design roadmapping and sprint planning.

Journeymapping

Sprint planning and roadmap

Design Process

Over the span of 6 months, I slowly chipped away on the designs where each sprint targeted a specific page or experience. As an example, I’ll show you how the homepage was created, which included many individual components like the navigation bar, bet selectors, and betslip.

We started each design by looking at what our competitors are doing. In betting there is little discrepancy in how things are laid out despite how complicated it may seem due to the expansive information and options that are provided. In an effort to try to improve on some of these design paradigms, we also looked at other products that solve for similar problems in potentially more innovative ways.

In addition, we had to keep in our own mobile patterns in mind to create a seamless experience that translates across platforms. We used examples from Tidal, Barstool Sportsbook, Youtube and Stake to get inspiration on how to design for a sports menu in the side navigation.

Competitive Research

Competitive research on sidebar navigation of the sports menu

Design Stages

The process was iterative starting from rough low-fi and mid-fi wireframes to hi-fi which were reviewed with design and product leaders to approve of the direction. Usability testing was also conducted as needed. Designs started broad with many different ideas before distilling into a single solution with a polished UI and all the interactions defined.

Navigation iterations

Bet selector iterations

Final Designs

After repeating this process for the rest of theScore BET’s website, we wrapped up designs after roughly 6 months and had it reviewed by the executive team. From there, it was just about ready for design handoff to devs. Here are some examples of those designs.

If you’d like to see more, please visit thescore.bet or espnbet.com

Homepage

Matchup page

My Bets page

Design Systems

During the design phase, we were building out individual components which were repeated for the hundreds of pages that had all the different market options a patron could bet on.

At theScore, we already had a design system for iOS and Android components called Alley-Oop. We added it’s final piece of the puzzle with all the web components to create a uniform design language and ecosystem, taking into account all the meticulous edge cases that exist in betting. Documentation was added alongside components for clarity when communicating to product and devs, including the properties of the animations and interactions etc.

Today, the atomic web design system is used by more than 30+ designers and is managed by a dedicated team.

Components of the betslip in the web design library

Design Handoff

Post-design complete, I worked closely with the web development team to oversee the handoff of designs. Tickets were created in Jira by the product team for assigned devs to complete. Once they completed their first draft, I did QA on the staging site and provided feedback for design polish.

Launch & Next Steps

Since launch, work has been ongoing to improve the website and to add new features alongside all the releases on iOS and Android. The team closely monitors feedback through CX and data analytics to increase retention. TheScore focuses on an ecosystem and omnichannel not only between platforms, but also with PENN’s in-person casinos and theScore media app, which acts as a companion for bettors and sports fans to stay up-to-date on all their sporting news. The seamlessness of handoff is constantly being fine-tuned to become a one-stop shop for all the patrons’ needs.

TheScore BET was later re-skinned into ESPN BET for the American audience. Today, the theScore BET and ESPN BET is visited by more than 100000+ bettors and has since seen the addition of many new features like Featured Parlays, Hot Props, and casino.