GAMER
Gamer is a mobile app designed to include traditional sports and Esports’ fantasy leagues onto one platform.
Overview
Role: UX/UI Designer
Duration: Two Weeks
Tools: Figma
The Problem
There are many fantasy sports apps available on the market, but there are rarely apps available for Esports. This can be caused by the divide between those who consider Esports as sports and those who do not. Is there a reason for why those who enjoy both should use two apps instead of one?
User Research & Topic Research
I conducted user research through interview and survey to understand the users and their needs. The user group had all previously participated in fantasy sports leagues, so I decided to entertain the idea that they had all played video games before and for how long; this validates the need for a platform to include both traditional sports and Esports.
​
In addition to my research, I found that there is a difference of 1.1% between those who participate in golf fantasy leagues than in Esports. I found this very interesting considering the significant difference of viewership between the 2021 Golf Masters Tournament (9.5 million viewers) and 2021 League of Legends World Championship (73.8 million viewers). That being said, my goal is to design a mobile app that increases the fantasy sports league participants in unpopular sports such as Golf and Esports.
Qualitative research
A few sample questions:
​
What was your main problem with [X] app during your time with it?
Can you describe how you would create a league for fantasy football in the current app you use?
- Great, can you describe how you would create a league for fantasy valorant?
[Assuming the answer is along the lines of: "I wouldn't be able to do it here / I would go on the Esports version of the app"]
- What do you think about an app that includes both?
Quantitative research
Gender
Female
Male
How often do you use your phone a day?
.png)
2-3 hours
4-5
hours
How long do you play video games?
.png)
4-5
hours
2-3 hours
6-7
hours
User Personas
User Journey Map
The map contains the details of the important app stages /tasks and thoughts/feelings of the users throughout the course of using the app.
.png)
Digital Wireframes
Easy navigation was a key user need for these designs. After usability testing, I found that some elements were seen as repetitive (i.e. MY TEAMS scroll view and LEAGUE NAME in the third frame).
Key Mockups
High-fidelity Prototype before usability testing
Usability Testing round 2
After the second round of usability testing, I found that the biggest issue was users navigating to the previous page they were on. The icon at the very top sends the user back to the home / landing page. The solution I chose to pursue was setting the view controller to card rather than full screen. This allows the user to swipe down to the previous page instead of using a back button.
​
In addition, another common comment about UI was the three white dots indicating a carousel felt unnecessary to users. It, also, was not consistent with the carousel used in the fourth frame for projections.
High-fidelity Prototype after usability testing
