Designing an eSports Betting Platform

Sharon Wang
Draft · Unlisted

Introduction

I designed the MVP for an eSports betting platform for Outplayed, Inc. with Andrew Aquino.

ESports is an up and coming activity with streams across casual and professional players every day. Like physical sports (football, baseball, etc.), some fans gamble on specific players to win or lose. This is also happening with professional leagues in games like League of Legends (LoL) and PlayerUnknown’sBattleground (PUBG).

There are many products that offer similar betting and gambling experiences like Pinnacle and Loot.bet to catch the intent of gambling with games which are becoming more and more like professional sports. However, they only work with professional teams.

Compared to the average basketball player, an average gamer can still solicit so many views on streaming platforms like Twitch.

Problem

  1. Streamers want more viewers.
  2. Fans want to support their favorite players and teams.
  3. Fans who gamble want to profit based off of what they know about the players.

Expected Outcome

We are looking to impact streamers who are not professional, but do frequent on Twitch. These streamers could play professionally, but do play casually as well. With loyalties built up for these streamers, they can engage viewers by allowing betting in their matches. They can link to these betting websites, and watchers can join and place their bets. After a stream ends, a win would give winners a reward.

Goals

  1. Simple Betting Mechanisms: How might we allow users gambling-proficient and non-gambling-proficient to easily bet on their favorite streamers?
  2. Strong Content Production: How might we entice streamers to vet this platform?

Exploring the Problem

Research

Gambling:

I conducted market research and a SWOT analysis on the gambling industry. Here are my key findings:

Takeaways:

  1. This is where implementing a track record of the player’s wins or losses may be useful, to show transparency to the user.
  2. We should portray the product in a way that will show that users will reap the most benefits- best betting odds, extra security, incentives, rewards, and bonuses, etc.
  3. The most important feature should be the betting slip, where users can place bets easily and securely.

Games and Streaming:

League of Legends

  1. League of Legends is the most played video game in the world, which is why including it in the business model as the largest influence can benefit the product greatly.

PlayerUnknown’sBattleGround

  1. There is a lot of potential for PUBG to become really big, since it is still in its early stages and unreleased as of right now.
  2. It is popular with gamers and streamers because of how tense it is to watch.

Streaming websites

  1. A major reason people watch streams is because of the excitement the uncertainty brings and the feeling of being a part of a bigger social experience.

MVP User Flow- Placing a Bet

The Minimum Viable Product would consist of a live stream of a player on Twitch in which a user would be able to place a bet on whether the player will win or lose. The user can place a bet whenever they want, but the bet will always be placed for the upcoming match (i.e. if a user places a bet when a match has already started, it will be reallocated to the next match).

I started with the overall higher level architecture flow of getting to a stream and placing a bet:

Flow for Higher Level Architecture

I then created a flow for the user placing a bet:

1) User clicks on "Add to Slip" to add a bet to the slip.

Game Detail Page Architecture

I worked on the Game Detail Page first, since this was where all the betting would take place. The Game Detail Page would consist of :

  1. The stream itself
  2. Module where the user can place a bet
  3. Betting Queue
  4. Other features such as Player Stats and Activity Feed

Module 1— Betting Queue

The Betting Queue is where the user would be able to see all of his or her ongoing bets.

Exploration 1 — Expandable Sidebar

I first started with a very basic sidebar that could be hidden if the user desired.

  • Pros: Space efficient, less cluttered
  • Cons: User would have to click out of the queue to see all of the game detail page- queue is not as easily accessible
Betting Queue in Expandable Sidebar Exploration

2. Exploration 2 — Permanent Sidebar

  • Pros: User is able to see ongoing and recent bets at all times
  • Cons: space-consuming
Betting Queue in Permanent Sidebar Exploration

I decided to stick with Exploration 2, since betting is the main function of the platform, users should always be able to access their bets even as they are watching another stream.

Completed bets and bet history can be viewed under “View All”.

Module 2- Bet Cards

I modeled my iteration after the betting flow, making sure to include all the possible betting states the user could encounter.

1st Iteration — Low Fidelity Sketches of different Bet Card States
  1. Exploration 1: 3-component bet cards with two columns
  • Pros: Can switch out each component depending on what state the bet is in.
  • Cons: Not sure how to clearly distinguish each state from another, top component in two columns is confusing because it looks like “Win” is another player, wording is ambiguous (Did the match start at 12:42 or did the user place a bet at 12:42?)
exploring bet card states
exploring wording of Match ID in non-column format

I thought my bet cards looked confusing because of the wording and information hierarchy, so I decided to compare different betting slips from different websites.

Comparing hierarchies for different websites

Based off of these, I decided on an aspired card information hierarchy.

Bet Card Made of 3 components

2) Exploration 2: Entering Stake Amounts and Exploring Shortcuts

There needed to be a different component state for when users will not be able to place bets anymore (locked state). This included buttons with pre-determined amounts, as well as a “bet max” shortcut. I also wanted to explore what the component would look like with currency from different countries, since our primary audience would be in Europe and Asia.

Explorations for different ways stakes could be entered

The Bet Card itself would have 3 components so that each may be switched out to display whatever is needed for the situation at the moment. For example, a betting slip will look like the image on the left, while a bet card that is in progress will look like the image on the right.

Comparison of Bet Card (Left) in the Betting Queue and Betting Slip (Right)

Final Betting Slip and Bet Card Design with Each Possible Bet State

Bet History Page Explorations

  1. Exploration 1 — Table View

2. Exploration 2 — Cards

3. Final Iteration — Combined!!

Final Iteration of Bet History Page

I liked the accessibility of the table view, but I liked how the cards looked more so I decided to create a combined look that would eliminate the displeasing aesthetic of the table but the repetitiveness of the labels in the card view.

Final Design

Changes:

  1. Added a Player Stats Area for users to have a track record of the player’s past 5 wins and losses.
  2. Kept the betting module in a small column format to maximize space.

Style Guide

We built out a Style Guide in tandem to the product itself, focusing on making a library of reusable components for future iterations and versions.

Future Implementations

Since this is the MVP, future iterations will allow the users to bet on multiple streams at once, and we will need to find a way to let users access other streams quickly.

Unlisted