UI/UX
Figma
Jan-May 24
"Everything is designed. Few things are designed well." Brian Reed
Overview
Esports is a rising field amongst gamers and gaming in general has risen in popularity amongst all age groups. Esports World is a way to bring an ESPN-like experience to the niche of Esports.
Objective
Right now, people who want to consume esports of different genres have to go to the games specific website. We want to make everything in one place and or a handy assistant for all of your esports information. With this app the goal is to Expand esports, Accessibility, Making friends in the esports space.
Outcome
Esports world now has a more intuitive and user friendly design. Gamers, Esports fans, and influencers see potential for further developments of this app.
The Start
As a fan of esports myself I identified what problems were in already existing traditional sports apps. I utilized a user-friendly design approach which allowed me to highlight the issues that needed to be addressed. I referenced the 5 steps of design thinking to come up with a good approach
I asked myself
Who is the target audience
What specifics are missing from already established apps in the niche
What types of apps to potential competitors have
What features and quality of life are necessary for a frictionless user experience
Empathize
Define
Ideate
Prototype
Test
Empathize
During the Empathize phase, I surveyed potential users of esports world varying from gamers to already existing esports fans. I conducted this survey to determine what quality of life needed to be added and what are the pain points of the graphical style of the app, the user interface of the app, and the features of the app.
Points of emphasis
1
2
3
Social aspects
Competitive gaming
Stats and standings
Competition
It was important to look at the competition to see what elements there apps have that could benefit the design and what features of the app could draw inspiration from other apps and websites in the sports and esports niche.
Modern UI UX Design
Esports focused
User Interviews
Social / community oriented
Mobile app
Points of emphasis
1
2
3
4
In order to conduct research as to what my design was lacking to improve UX I polled users on what they thought the app was missing and or what they app could improve upon. This was critical in understanding the already existing user base. With an understanding of the user base, I could get a sense of direction on where to start in the redesign.
“I cant navigate through my profile”
“The information feels overwhelming”
“There are a lot of things happening at once”
“I wish the lessons were more intuitive”
Define
During this phase, I looked at my research in order to understand the points of emphasis. In order to do so, I defined pain points for my design to address, made user personas to pinpoint the target audience, and created user stories to put the changes into perspective.
Common Pain Points
There is no way to favorite your favorite teams and players
No “view more” button for parts with lengthy body copy
Lack of team logos
Lack of interactivity
User Interviews
In order to conduct research as to what I could use to improve the design and functionality, I asked potential users of the app questions to see if they would even want another interactive content driven app on esports and how to balance content with statistics. I also wanted to know problems with the app aligned with my own to see if there were other problems that I may have overlooked or have not yet encountered. This was critical for a solid foundation in the design process. The questions I decided to ask were about the features that cause too much friction between the user and the app.
Questions
Do you feel a lack of consistent design language
What is one thing you dislike the most about esports world
How would you compartmentalize content on the app
What features would you like to see on a future update
Mid-fidelity wireframes
Common Answers
The consistency of the overall design is good
There is no way to follow teams or players, only which tournaments and leagues
How will influencers use this to grow?
What does this app have over twitch or YouTube
There is no “view more” button on certain parts of the app
Ideate
In order to conduct research as to what my design was lacking to improve UX I polled users on what they thought the app was missing and or what they app could improve upon. This was critical in understanding the already existing user base. With an understanding of the user base, I could get a sense of direction on where to start in the redesign.
UI Kit
Prototype
High-fidelity wireframes
Test
I conducted a second round of user testing to see how people interacted with the updated design and adjusted the final product to fix all the issues and incorporate all of the feedback that was given.
Rules of the testing
I asked a group of potential users and a new group of individuals to go through the app without my guidance. This was done to see the real issues that are not intuitive enough. Users might not be completely honest so they will not come off as rude so this was a great way to see what needed to be changed.
Feedback
The type is too big
Add more visuals
The navigation bar doesn't have text under the icons
Clean up the white background when scrolling up or down
Overall outcomes
The interactive app parts of the app (comment section, live streaming) are comprehensive
The follow button was added to increase interactivity and engagement with the community
Navigation bar was made bigger and slightly lightened to add contrast
Team representation was improved upon
RETROSPECTIVE
Working on the esports world app design was a very fun experience and I learned a lot about the overall experience of designing for mobile. I want to do my part in changing the world through making more intuitive and accessible designs for apps. As someone who enjoys video games and sees a future where competitive play can become more mainstream, it was enjoyable making a version of an ESPN app dedicated to E-sports.. I wish I could have worked on it more, however due to the time constraints of being a full time graphic design student I did the best I could. I would love to give this another shot because I know I can do better. I have always improved in everything I've done the more I've done it and as a first attempt at developing an app, I am proud of what I was able to do.