Role
UI|UX Designer
Year
2021
Industry
Esports Gaming

Client brief.

As more people are becoming aware of Esports, the industry is taking off. Research shows that from just 2019 to 2021 there has been a 77 Million jump in audience size worldwide; starting in 2019 with 397.8 millions to 474 million in 2021. With this being said, a lot of users are finding it difficult to progress in the game without it matching their skill level. Users are trying to hop into competitive games and getting destroyed by players who have been playing the game longer, have honed their skills, and have better game sense. There is also the issue of players not having teams to play with or knowing how to find them. Users get very discouraged by these factors and lose motivation. Tournify aims to solve these frustrations by creating a customizable matchmaking experience based on your availability, skill level, and play styles. This mobile app was created using Miro for researching purposes and Figma, Lookback, and Zeplin for wireframing, prototyping, and engineer handoff.

Project presentation.

Research and Analysis

All my research has been curated onto a Miro board in order to work collaboratively with a team if need be and can be found here along with my research plan that includes all my interview and survey questions. The survey utilized google forms that were sent to participant's emails. The idea for this project originated through observations of individuals close to me who were experiencing these issues. From there, the main thing was understanding the target user. After finding the target users, I moved into interviewing roughly 5 or 6 people to identify if this was actually an issue. The interview notes were combined into an affinity wall in order to view all of the repeated themes and opportunities.

Results From the Survey

Survey showed that 42.9% of users play about once per day and the rest of the users at least 3 times per week. 42.9% of users also played at least one tournament in the month the survey was taken. 71.4% of the users reported that their games have been difficult and of that percentage 85.7% believe that tournaments based on experience would be helpful. In addition to this, 71.4% of users would like to be able to easily find and team up with other similar players. This data helped decide the main parts of the app.

Feature Prioritization

After obtaining all of the notes from the users, I started identifying any features, good and bad, that could possibly help with the info discussed. A feature list was created and from there a feature priority graph to help find what features are important and would be helpful to add. I determined the best course of action would be to create an app that focuses on allowing users to find other gamers that correspond with their play style and availability. The features included are customizable profiles based around rankings, play style, and in-game roles. Users can also find teams to apply to that fit their personal needs.

Crazy 8's Process and Sketches

Ideation began with a few rounds of Crazy 8’s. These are 8, 1 minute interval sketches that help to ideate without complexity. Through this process, I was able to generate a variety of sketches that lead to the wireframe process for the key features of the app.

Low-Fi Wireframes - Ideation 1

Using the wireframe sketches, I created my first round of low fidelity mockups in Figma. These low fidelity mockups were used to test users with the Journey Map Method. This method helped to pinpoint any possible frustrations or confusions with this app. From there, many iterations and tests were constructed and carried out until all problems were solved.

Customer Journey Map - Iteration 1

By running a usability study with the Journey Map Method, I found that users were experiencing issues with selecting their ranks in the profile creation page, and that it could be easier to pull from an API and have users connect to their platforms. There were also issues with text not being comprehendible on the team selection page.

First Iteration Based on Findings
Second Iteration Based on Findings

Above you can see the different iterations made based off of the findings during the usability studies. Before I made these changes, users had to enter their ranks. However, this meant that users needed to think of every single game they wanted to add while scrolling through all the ranks to make a selection. After the option to connect to platforms was added, users could automatically find their ranks for each game they wish to play. Users also found the transition from the application page to the team selection page jarring. The team selection page now has text that reads "available teams" rather than just "teams".

Logo Ideation

Before moving into the high fidelity stage, I wanted to come up with a logo for this app. I ran another Crazy 8's for the logo creation and then had a group of three people rate which logo they enjoyed the most. Based off of proper design practices, I choose the best of the logos and vectorized it in Adobe Illustrator.

Style Guide - Tournify
Pattern Library - Tournify
Final High Fidelity Screens

The final solution allowed for the user to create a personalized profile based specifically on their based on their availability, skill level, and play styles. Users are also able to find tournaments based off of their skill level, and if they do not yet have a team, this product will allow them to find a team based off of their personal needs. This solution offers a more user-friendly environment and offers a new way to communicate across a large spectrum of gamers. If you are interested in viewing my Figma file for this project click here.

Prototype

Contact.

Have a project that could use some help? Get in touch!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Other projects.

Previous projects for other clients.

See more examples
Arrow that points to project examples