MEGA BATTLES
At-a-Glance
Mega Battles is a premiere Esports website that showcases gaming tournaments happening across the globe. Join a tournament or simply create your own and invite your friends for ultimate bragging rights!
My Role
UX/UI Designer
Timeline
Three weeks
Tools
Figma, Mirro, GitHub, Netlify, VSC, Trello
Collaborators
Christian Weidle, Kyle Hatch, Stetson Strokes
Problem
As young gamers look to start making money doing what they love they are faced with the difficult task of navigating tournaments. There are hidden fees, large skill gaps and limited prize pools that cause stress and confusion for young gamers.
Solution
Create an easy to use tournament website for all types of gamers.
Making Gaming Easier.
Process
Industry Analysis
The gaming industry is ever-booming, and more people than ever are interested in exploring Esports.
...it's estimated that the number of those who play games via PC, consoles, tablets, and smartphones will surpass 3 billion this year and amount to 3.32 billion by 2024 - Marketer, Newzoo
Research Data
I started out exploring other websites that offer similar services to find out what users liked and disliked about the platform, and what they wished was available. I conducted a survey, grouped & sorted the data, and prioritized tasks that would be the most impactful
User Insights
After gathering quantitative results from our survey, we interviewed a mixed bag of gamers, some former and current Esports players. They provided further insights about their opinions on Esports and on competetive gaming.
Sorting Data
We first gathered all our research together from our surveys and interviews. We then grouped like items to help further visualize what items our user wants. Lastly we generated ideas based and evaluated what we could implement to satisfy our user.
User Persona
Journey Map
After gathering our research and learning more about our users, we then put together and journey map of a typical user’s experience from the moment they come on our website to when they register for a tournament. This was a great way to walk in the users’ shoes and empathize with thier emotional states during their journey.
User Flow
Tyler wants to register for a local ‘Smah Bros’ tournament. He would prefer a tournament with a prize pool and wonders if there are any available this month.
Low-Fi Designs
We brought our ideas back into a interactive digital low-fidelity prototype and brought it out to five potential users for feedback.
User Testing & Iterating
We focused our user testing on refining the tournament cards. This included the design of the cards, placement of buttons, and the information included on the cards.
We also focued on refining our nav and drop-down menus. We wanted to further simplfy the process of finding games and tournaments.
The Leaderboards section was added to give gamers more reasons to use our services and compete.
High-Fidelity Prototypes
The high-fidelity designs show our homepage, current tournament page for ‘Super Smash Bros’, and the light/dark mode along with the mobile version of the app.
We also built out this design in code, and is currently being hosted online. While programming this website we kept Responsive Web design in mind, so it's accessible on mobile, tablet, and desktop
Final Designs
The website is responsive on all platforms.
Future Plans
Add a larger selection of games to choose from.
Include a player ranking system within MEGABATTLES.
Create your OWN tournaments to host online and invite friends for free.
What We Learned
There is large and growing market for Esports.
Most gamers look for certain items to build trust with a website
Make mistakes early and often and learn from those mistakes to makes the best experience possible.