Services Provided

Interaction Design
UX Design
UI Design

Tools

Adobe Illustrator
Figma

Live Product

Project overview

In my role at Beasley, I had the opportunity to work as a UX designer with DraftKings on a custom sports-betting widget that would live across all Beasley sports talk station sites and apps. This project was done in collaboration with fellow designer, Colin Hazelton, and developer, Kevin Gilper. DraftKings came to our team with the goal to generate awareness and drive traffic to their newly established Sportsbook website.

Our solution was to build a responsive widget that allowed users to experience the DK sports-betting product directly from our station sites, and incentivize users to navigate to and sign up for DraftKings Sportsbook.

A Responsive experience

Our first challenge in this project was that this widget would span across all of Beasley's owned-and-operated digital platforms, from an in-browser desktop experience to mobile apps, so responsiveness was vital to the UX. We utilized cards in horizontal lists, Flexbox to shrink and expand our cards, and a user-initiated expanded state on mobile, all to strengthen the responsiveness and richness of the experience no matter what size of screen our users interacted through.

The decision to add a tab feature that filters between sports was made knowing that our sites were trafficked by all types of sports fans with interests in different sports. This allowed users to get a sense of the breadth of what they could bet on before ever committing to leaving our station sites.

New Challenges to solve

Throughout the process, we came to the conclusion that presenting the call-to-action, "Bet Now," across every game card (specifically on desktop where more cards are present) was redundant. We felt that it was competing with the content of the widget and causing unnecessary cognitive load on an experience already required a lot of data for a user to digest on the screen at one time.

We had to find a way to show the user that they could bet on any individual game without having a button across every card. The solution: a hover effect that revealed the the "Bet Now" button as you scrolled across the card you found interest in. Without interacting it defaulted to the first card. This choice also added a subtle emphasis to the call-to-action, incentivizing users to navigate to the DK site more effectively than presenting a static button.

Additionally, midway through the design phase, we were asked by the DraftKings team to include a sign-up promotion within the UI of our new widget. The challenge was in how to present the promotion and terms for it, without diminishing the overall widget UX or needing to pull more screen real estate from the station site experience.

We made the decision to place the promotion and necessary disclaimer/links within a card itself. This design choice helped us in multiple ways:

One, we didn't need to increase the height of the widget to accommodate for the extra information. Two, we didn't add to cognitive load of the widget, and three, this gave the DraftKings team control in when and how frequent they wanted to present a promotion.

The Result

The sports-betting widget has had an average of 1.5 million users interact with it per month over the last year, and continues to increase traffic to their Sportsbook site today.

DraftKings Sportsbook Widget

The #1 sports-betting app with 10+ million registered users