Unique eSports section
within the betting site
Unique eSports section
within the betting site
Unique eSports section
within the betting site
Role: Product designer (UX/UI)
Role:
Product designer (UX/UI)
Role:
Product designer (UX/UI)
Duration: 3 months
Duration:
3 months
Duration:
3 months
Status: In development
Status:
In development
Status:
In development
Context
ESports section is a part of bigger Sports betting website. This is a startup which I worked on along with two designers and one analyst.
According to statistics, the global eSports audience is 540 million people in 2023. To attract the eSports audience, it was decided to add a new section to the website and app. Visually, it should be different from the section of the site with regular sports.
ESports section is a part of bigger Sports betting website. This is a startup which I worked on along with two designers and one analyst.
According to statistics, the global eSports audience is 540 million people in 2023. To attract the eSports audience, it was decided to add a new section to the website and app. Visually, it should be different from the section of the site with regular sports.
ESports section is a part of bigger Sports betting website. This is a startup which I worked on along with two designers and one analyst.
According to statistics, the global eSports audience is 540 million people in 2023.
To attract the eSports audience, it was decided to add a new section to the website and app. Visually, it should be different from the section of the site with regular sports.
Solution
What I loved most about this project was the creative freedom I had in shaping both design and functionality. I conducted independent competitor research, engaged with users, and even placed bets myself to fully understand what matters to the eSports audience.
The result? A dedicated eSports section with a unique design and enhanced functionality tailored for a seamless betting experience. In fact, many of the features I introduced proved so effective that they were later implemented across the entire application.
What I loved most about this project was the creative freedom I had in shaping both design and functionality. I conducted independent competitor research, engaged with users, and even placed bets myself to fully understand what matters to the eSports audience.
The result? A dedicated eSports section with a unique design and enhanced functionality tailored for a seamless betting experience. In fact, many of the features I introduced proved so effective that they were later implemented across the entire application.
Problems Uncovered
Based on my experience and that of other users, I have identified the following main tasks:
– The section should stand out. The design should immerse you in the gaming atmosphere, more thematic illustrations
– There are no draws in eSports, the match has 2-3 maps and there is no timekeeping
– It is important for the user to see the match stream
– Of course it’s more pleasant to watch the stream in full screen mode
– Easy access to team statistics
– The user has a favorite team that they want to follow. Expand the functionality of favorites
– Pin frequently used markets
– Notification when match starts
Based on my experience and that of other users, I have identified the following main tasks:
– The section should stand out. The design should immerse you in the gaming atmosphere, more thematic illustrations
– There are no draws in eSports, the match has 2-3 maps and there is no timekeeping
– It is important for the user to see the match stream
– Of course it’s more pleasant to watch the stream in full screen mode
– Easy access to team statistics
– The user has a favorite team that they want to follow. Expand the functionality of favorites
– Pin frequently used markets
– Notification when match starts
Based on my experience and that of other users, I have identified the following main tasks:
– The section should stand out. The design should immerse you in the gaming atmosphere, more thematic illustrations
– There are no draws in eSports, the match has 2-3 maps and there is no timekeeping
– It is important for the user to see the match stream
– Of course it’s more pleasant to watch the stream in full screen mode
– Easy access to team statistics
– The user has a favorite team that they want to follow. Expand the functionality of favorites
– Pin frequently used markets
– Notification when match starts
Competitive Analysis
During competitive analysis of leading apps in the same industry I covered the following areas: UX analysis, overall gaming atmosphere, easy access to the stream, other market advantages.
During competitive analysis of leading apps in the same industry I covered the following areas: UX analysis, overall gaming atmosphere, easy access to the stream, other market advantages.
During competitive analysis of leading apps in the same industry I covered the following areas: UX analysis, overall gaming atmosphere, easy access to the stream, other market advantages.
✅ Ability to see betting odds in full screen mode
❌ Extra tap to open stream
❌ Gaming atmosphere
✅ Ability to see betting odds
in full screen mode
❌ Extra tap to open stream
❌ Gaming atmosphere
✅ Ability to see betting odds in full screen mode
❌ Extra tap to open stream
❌ Gaming atmosphere
✅ Gaming atmosphere, unique images
✅ Easily add a team to favorites
❌ Extra swipe to open bets bottom sheet
✅ Gaming atmosphere, unique images
✅ Easily add a team to favorites
❌ Extra swipe to open bets bottom sheet
✅ Gaming atmosphere, unique images
✅ Easily add a team to favorites
❌ Extra swipe to open bets bottom sheet
✅ Gaming atmosphere
❌ 2 extra taps to open stream
❌ No team statistics
✅ Gaming atmosphere
❌ 2 extra taps to open stream
❌ No team statistics
✅ Gaming atmosphere
❌ 2 extra taps to open stream
❌ No team statistics
✅ Gaming atmosphere
❌ Extra tap to open stream
❌ No team logos in the list
✅ Gaming atmosphere
❌ Extra tap to open stream
❌ No team logos in the list
✅ Gaming atmosphere
❌ Extra tap to open stream
❌ No team logos in the list
Our User
Our User
Let's figure out what unites our users:
– More than 60% of e-sports fans are aged between 18 and 35 (much younger than conventional sports fans)
– Plays or has played online, so understands the rules of games
– Wants to preserve the gaming atmosphere when betting on eSports
– Understands teams/players, has favorites, has a favorite team that wants to follow
Let's figure out what unites our users:
– More than 60% of e-sports fans are aged between 18 and 35 (much younger than conventional sports fans)
– Plays or has played online, so understands the rules of games
– Wants to preserve the gaming atmosphere when betting on eSports
– Understands teams/players, has favorites, has a favorite team that wants to follow
Let's figure out what unites our users:
– More than 60% of e-sports fans are aged between 18 and 35 (much younger than conventional sports fans)
– Plays or has played online, so understands the rules of games
– Wants to preserve the gaming atmosphere when betting on eSports
– Understands teams/players, has favorites, has a favorite team that wants to follow
Design Approach
After having uncovered problems
I started with the homepage
After having uncovered problems I started with
the homepage
After having uncovered problems I started with the homepage
Changed the main color to associate with neon lighting
Changed the main color to associate with neon lighting
Changed the main color to associate with neon lighting
Top Events slider themed with an image of the game. It has 2 bright buttons with a backlit effect
Top Events slider themed with an image of the game. It has 2 bright buttons with a backlit effect
Top Events slider themed with an image of the game. It has 2 bright buttons with a backlit effect
An indicator of Live Matches added
An indicator of Live Matches added
An indicator of Live Matches added
By clicking on the All button we get to a list of all matches with the ability to sort by time and game
By clicking on the All button we get to a list of all matches with the ability
to sort by time and game
By clicking on the All button we get to a list of all matches with the ability to sort by time and game
Event timing
Event timing
Event timing
Ability to collapse/expand events of a specific game
Ability to collapse/expand events of a specific game
Ability to collapse/expand events of a specific game
New match cards. Large team logos. League added. It is now possible to add a match to favorites
New match cards. Large team logos. League added. It is now possible to add a match to favorites
New match cards. Large team logos. League added. It is now possible to add a match to favorites
By clicking on the button with the game logo we get to the list of all matches of this game
By clicking on the button with the game logo we get to the list of all matches of this game
By clicking on the button with the game logo we get to the list of all matches of this game
The background image of the game immerses in the game atmosphere
The background image of the game immerses in the game atmosphere
The background image of the game immerses in the game atmosphere
The active game is highlighted and the game name is added
The active game is highlighted and the game name is added
The active game is highlighted and the game name is added
A horizontal league slider for the selected game appears. The card has a Live match indicator
A horizontal league slider for the selected game appears. The card has a Live match indicator
A horizontal league slider for the selected game appears. The card has a Live match indicator
Ability to place a quick bet without going to the match screen
Ability to place a quick bet without going to the match screen
Ability to place a quick bet without going to the match screen
There is a notification icon on the card of the upcoming match. It turns on on a notification about the start of the match
There is a notification icon on the card of the upcoming match. It turns on on a notification about the start of the match
There is a notification icon on the card of the upcoming match. It turns on on a notification about the start of the match
Clicking on the match card takes us to the match screen with a stream and a list of all possible bets
Clicking on the match card takes us to the match screen with a stream and a list of all possible bets
Clicking on the match card takes us to the match screen with a stream and a list of all possible bets
Navbar disappears when scrolling to increase useful space for displaying bets
Navbar disappears when scrolling to increase useful space for displaying bets
Navbar disappears when scrolling to increase useful space for displaying bets
We immediately see the game stream, which catches the eye and immerses us in the game
We immediately see the game stream, which catches the eye and immerses us in the game
We immediately see the game stream, which catches the eye and immerses us in the game
Quick access to teams statistics
Quick access to teams statistics
Quick access to teams statistics
Ability to add both a match and a team to favorites
Ability to add both a match and a team to favorites
Ability to add both a match and a team to favorites
Ability to pin a frequently used bet type or minimize an unnecessary one
Ability to pin a frequently used bet type or minimize an unnecessary one
Ability to pin a frequently used bet type or minimize an unnecessary one
Removing Tabbar to increase useful space for displaying bets
Removing Tabbar to increase useful space for displaying bets
Removing Tabbar to increase useful space for displaying bets
When rotating, the content is automatically rearranged into a horizontal view with a full-screen stream, which allows you to place bets while staying tuned in the game
When rotating, the content is automatically rearranged into a horizontal view with a full-screen stream, which allows you to place bets while staying tuned in the game
When rotating, the content is automatically rearranged into a horizontal view with a full-screen stream, which allows you to place bets while staying tuned in the game
Ability to expand a block with a list of all possible bets
Ability to expand a block with a list of all possible bets
Ability to expand a block with a list of all possible bets
Minimized quick buttons
Minimized quick buttons
Minimized quick buttons
Personally, I'm excited about the ability to place bets while watching a match in full screen. This greatly holds the user's attention. I've never seen such functionality before.
Personally, I'm excited about the ability to place bets while watching a match in full screen. This greatly holds the user's attention. I've never seen such functionality before.
Personally, I'm excited about the ability to place bets while watching a match in full screen. This greatly holds the user's attention. I've never seen such functionality before.
Design System
Design System already existed for the sports section. But with different colors and elements.
New elements and styles were created for the eSports section:
Design System already existed for the sports section. But with different colors and elements.
New elements and styles were created for the eSports section:
Design System already existed for the sports section. But with different colors and elements.
New elements and styles were created for the eSports section:
What’s Next
This section is currently under development. Once it is launched we will have more statistics to analyze and improve.
One of the ideas that I plan to implement is to add a summary page with all the information on the tournament, schedule of events within the tournament, team statistics, etc. Since we know that users are often interested in not just one match but follow all the matches in the tournament, it would be convenient to have all the information in one place.
This section is currently under development. Once it is launched we will have more statistics to analyze and improve.
One of the ideas that I plan to implement is to add a summary page with all the information on the tournament, schedule of events within the tournament, team statistics, etc. Since we know that users are often interested in not just one match but follow all the matches in the tournament, it would be convenient to have all the information in one place.
This section is currently under development. Once it is launched we will have more statistics to analyze and improve.
One of the ideas that I plan to implement is to add a summary page with all the information on the tournament, schedule of events within the tournament, team statistics, etc.
Since we know that users are often interested in not just one match but follow all the matches in the tournament, it would be convenient to have all the information in one place.
