Gaming is the new trend and the number of gamers, both casual and pro, has increased significantly. Casual players would like to seek teammates to play with and Pro players would like to find opportunities in the Esports scene.
Solution
Develop a platform that allow both casual and pro players to interact with each other and to provide them with gaming opportunities that they seek, while on the go.
My role
UI/UX User Research
Goal
Translate a web platform to a mobile platform (6 months)
Core Features
Gamer Profile 🎮
Users are able to showcase stats and highlight clips from their favorite games. Pro players will be able to display their esports career and PC setup so that they can gain traction from both fans and esports organizations.
Bounties 💵
Users complete Bounties that are organized by games or organizations to gain MAINCARD points, which allow them to redeem prizes.
Tournament Tool 🏆
Users will be able to host their own game tournaments with built-in tournament brackets on MAINCARD, rewarding participants with MAINCARD points or real life prizes.
Discover Players 🔍
After setting up their profile, players will be able to discover each other and group up for games. Esports organizations will be able to seek players through specific filters.
Research
In order to determine how to help gamers feel seen in the community, I had to conduct research with MAINCARD's community through Discord and gaming events during the Beta launch (Web).
Topic Research
This platform will target gamers in Singapore and Malaysia, which accounts for roughly 10% of gamers in Southeast Asia.
5% of MAINCARD users are pro gamers looking for teams to play for. 27% of MAINCARD users are talents in the VALORANT community in SGMY that are looking for opportunities in upcoming events.
68% of MAINCARD users are casual gamers that wish to group up and find new friends to play with.
Subject Matter Expert Interview
Interviewing two VALORANT pro players and a few loyal MAINCARD testers has allowed me to gain a more intimate understanding of their pain points while using the platform and how the platform can be further improved on.
Career First
The pro players do not see a need for bounties to take up so much space on their profile as their main objective for using the platform was to find a team/organization that they can play on professionally.
Tedious tasks, low reward Both pro players and testers gave up halfway while setting up their profile showcase as it was a tedious process with zero reward.
Less communication, more information
Users felt that there was no need for a news feed to interact with other users and instead, the space can be used to display more things that will help them gain traction from other gamers and organizations.
What User Wants
After completing my subject matter expert interview, I realized that it was important to analyze what the users actually want on their profile and thus, a survey was conducted. The following features were what users prefer to have on their profile that we do not have in the Beta.
1. About Section 2. Featured Links/ Montages 3. Gaming Career 4. PC Setup 5. Gaming Stats
In conclusion, the web version of MAINCARD lacked customization/ personalization for users and the entire process was too tedious with no incentives at all.
Web Component of Profile Customization which required users to fill in their gaming information manually due to the lack of APIs
Competitive Analysis
To get a sense of who are in the current market, I signed up for gaming profile websites and apps. I was able to pinpoint their strengths and weaknesses:
konect
STRENGTHS • Pro Career Resume • Achievements Showcase • Gaming Setup Showcase • Social Media Links • In-game Configuration Settings WEAKNESSES • Bloated UI • Broken features
Steam
STRENGTHS • Game Stats API • Achievements Showcase • In-game item Showcase • Plenty of customizations • Huge userbase • Very good UI/UX WEAKNESSES • Not for competitive players
Identify Goal
The conclusion of the research helped me to focus on the real problems that the users are facing. I also identified the goal of making profile creation intuitive and to allow users to be discovered after spending effort and time to fill up their showcase, so that there will be an increase in engagement and enthusiasm of the users. Solutions for these pain points will be covered in the Final Designs section.
Interaction Design
User Flow
I was able to identify the features that users desire from the Beta and created a new user flow below. The new flow has the addition of the Discover page for users to find gamers alike or pro players. The Communities feature from the web version has been temporarily removed from the flow as it does not serve as much purpose as the other features.
Wireframing
After identifying the new features and changes, I wireframed the screens out to gain a rough understanding of key screens and their layouts.
Simplifying setting up of profile using a step-by-step onboarding process
Removed the player news feed and shifted the showcase as the main focus of the profile
UI Design
Style Guide
In order to ensure that designs are consistent, I have created a style guide for myself.
Design System
To maintain consistency and ensure efficient design to developer handover, I developed a modular design system based on reusable components and their states, such as cards and buttons. Every component can be rearranged and combined with others while maintaining design consistency.
Final Designs
Onboarding
In order to make filling up of the profile easy and frictionless for the users, I simplified it and shifted it to the onboarding process to make sure that users will fill up their profile no matter what so that they can be discovered by others.
Profile
The profile showcase is the main focus of the screen, which allow users to feel that their profile is unique. The news feed has been shifted below the showcase as it was the least used feature on the profile page during Beta.
Discover Feature
One other problem users brought up was that they do not feel rewarded after filling up their profile. The Discover page is a feature designed so that users will enter the discover queue once they fill up their profile. This feature solely focuses on enabling gamers to find groups and to empower pro players in the esports scene.
Main Screens
The following are the key features designed according to Beta feedback, which can be accessed from the bottom navigation bar
MVP Launch
Results
32%
more users completely filled up their profile and is in the discovery queue.
24%
of testers feel that the setting up of profile is intuitive
Summary of Project
1. Removed redundant elements on profile page to allow users to feel that their profile is unique and customizable. 2. Guide users to set up their profile during onboarding so that it is more efficient and intuitive. 3. Motivate users by featuring them on the Discover page after they have completed setting up their profile.
Reflection
This project allowed me to interact with people that are passionate about gaming, some of them making a career out of it. Since I have direct access to my target group thanks to the events held by my company, I was able to dive deep into user research with them, which enabled me to know what MAINCARD users want.
Key Takeaways
1. Spend more time on the design system to streamline the design process. 2. Use UX terms and design language that users are already used to, instead of creating new ones. 3. The incentive given to users should equate to the amount of effort that they have placed in doing their task.
.png)
