Top
Esports Community Hub with three small phone images, with each phone showing a different interface of the app.

Esports Community Hub is a multi-modal mobile app for gamers, esports fans, and event coordinators.

For gamers, the app allows them to find esports teams, communities, events, and allows for text and voice communication.

For event coordinators, it allows them to create events, manage financials, and communicate with event teams and vendors.

I worked on this as a solo designer for my capstone project in my Master of Science in User-Centered Design program at Brandeis University.

This was the breakdown of the work to complete the project:

1. Background
‍
2. Research
‍
3. Artifact Creation (Design Aids)
‍
4. Research Insights into Actionable Items

5. Design Concept

6. Low Fidelity Wireframes

7. User Testing

8. Iterating Wireframes

9. User Testing

10. Iterating, High Fidelity

---------------------------------------------------------
‍
Background

Why make this?

Esports is a flourishing yet young industry. Projections estimate that it will generate 1.8 billion dollars in 2022, [1] with individual players earning million dollar purses from single tournaments alone. [2]

With this comes a surprising lack of an all-in-one solution for esports players to find other players, teams, events, communities, and for esports event hosts to manage, and promote events. While some products have tried to manage some of these needs, like Steam and Discord, none have covered all of these needs successfully. [3] [4]

---------------------------------------------------------
‍
Initial Research

To start the process of creating this technology, I first determined if there was a need for something like this, and if the initial design functions would actually be solving any needs.

This initial research was a multifaceted approach, where I surveyed 25 participants in the target populations (gamers, esport fans, people who worked in the gaming event industry) to understand things like their current needs and problem areas when interacting with technology, and how they current use technology in conjunction with esports. I also conducted long form, open-ended interviews with both gamers and event coordinators.

Results showed the following:
‍‍

A circular pie chart graph that shows 84% of the pie in dark blue and 16% in a salmon color. There is text above the graph that reads "84% of participants felt that they had to use too many different platforms for socializing in gaming communities".

- All surveyed gamers liked to use technology to aid them with friend and team interactions (like searching for others and communicating), but 84% reported that they felt they had to use too many different platforms

A circular pie chart graph, showing 92% of the chart in a dark blue, and 8% in a salmon color. Above the chart reads "92% of participants reported that events were too hard to find and that no single service existed to solve this need."


- Of Esports fans and gamers who attend in-person events, 92% polled said that events were too hard to find and they reported that there wasn't a single service that solved this need
‍
- Esports Industry personnel (Event Coordinators) that were polled reported that technology was often a barrier to getting event information directly to gamers / fans / spectators / esports teams and brands
‍
After the generative phase of research was completed, I created a project proposal to share with my peers. You can check out the proposal document here.


Common quotes from Esports Players and ways to ensure success:

1. “I would not play with someone else if they are not serious about the game, and have a difference in skill level” → early designs incorporate player profiles that will include all of these variables.

2. “I don’t like having too many different apps or clients to use to communicate with my gaming friends.” → designs will focus on covering a wide amount of needs and compartmentalize within one app

3. “I’m not sure of a consistent way to search for LAN events.”, “There’s not an aggregate site or anything, it’s definitely not easy.”→ designs will make the LAN event search a predominant feature and focus on simplicity for the user

4. “It would be handy to move between functions quickly, like team searching to chatting to event browsing.” → designs will emphasize primary navigation and not go too deep in screens to get to basic functions. that way users don't have to waste too much time going through a branching web of screens

Common quotes from Event Coordinators and ways to ensure success:

1.  “Frequently we have had issues with walk-up ticket buyers and people not buying tickets ahead of time, as this can change the outlook and the logistics of an event.” “Selling tickets inside of the app would be great.”→ designs can implement ticket purchasing inside of event pages, and this can be a highlighted CTA.

2. “We use too many ways to communicate; Slack, Whatsapp, email, text, phone calls…”→ designs will include a myriad of communication channels, including teams like event management, vendors, promoters, and brands, and allowing for voice and text chat channels

3. “Our shared gmail calendars are very important. We would need an app that can sync with that.” “Organization with our calendars is the glue that keeps the industry together and running right. LAN’s would never happen without organization”→ designs will place an emphasis on connectivity with outside-app calendars

----------------------------------------------------------

Artifact Creation

After analyzing the initial research results, I moved on to creating design aids, or artifacts. They allowed me to get in the heads of our target populations, to visualize experiences without committing to design choices, and they are valuable, tangible references to return to at any point in the design process.

A persona empathy map artifact. In the center is "Esports Ethan" with an image of a game controller. Outside of that is segmented areas of this persona's thoughts, such as "goals, think, feel, tasks / jobs to be done, say, do, pain points."
A persona empathy map artifact. In the center is "Event Coordinator Cathy" with an image of a trophy. Outside of that is segmented areas of this persona's thoughts, such as "goals, think, feel, tasks / jobs to be done, say, do, pain points."
A design artifact - a User Task Flow. This image has the title "User Task Flow. Esports Ethan joins a team, plays a local event." After the title are small boxes that display tasks that a user would move through towards accomplishing their goal. Some examples shown are "Registers Account", "Creates a Profile" "Connects personal calendar to profile".
A design artifact - a User Task Flow. This image has the title "User Task Flow. Event Coordinator Cathy hosts a LAN event." After the title are small boxes that display tasks that a user would move through towards accomplishing their goal. Some examples shown are "Registers Host Account", "Connects app to work calendars."

‍
---------------------------------------------------------

Design Concept
‍
Next I created a Design Concept. This is a document that visualizes a user interacting with a design in a basic manner, with flows and tasks further shown to simulate the experience without having to commit to wireframe designs.

User Insights focused on while creating the design concept:
‍
🧑🏻🤝🧑🏾Variables like demographics, schedule, skill level, seriousness of play, and location are important for players when searching for other players, teams, and communities.
‍
💬Text & Voice chat are important. Users want both channels

🧭Primary Navigation is of paramount importance. Users want speed and ease

📍Finding LAN (in-person) events are currently a pain point a proposed design solution should highlight this

The first set of wireframes. These are basic layouts and consist of four screens. The left most screen has a primary navigation bar on the bottom (which consists of a home icon, a social icon, a chat icon, a profile icon, and a settings icon), and also a primary thumbnail - type rest of the screen that reads "Esports Community Hub", "Top News Stories", "League Standings", and "Live Scores". The next screen has the same primary navigation and top banner, but now has three buttons that read as "Find a team" "Create a team" and "Find LAN events". The third screen is all white and empty except for text that reads "Finding teams that match your profile...", and the final screen has the same primary navigation on the bottom, and now a title that reads "Find a team", and a card that displays example team information, such as team name, seriousness of play, schedule, roster."

First Wireframes

Now, with a substantial amount of feedback gleaned from initial research, and design aids at hand, I began to create low fidelity wireframes with the following basic goals in mind:

- Creating a basic home page layout
- Creating and testing a primary navigation

The first set of wireframes. These are basic layouts and consist of four screens. The left most screen has a primary navigation bar on the bottom (which consists of a home icon, a social icon, a chat icon, a profile icon, and a settings icon), and also a primary thumbnail - type rest of the screen that reads "Esports Community Hub", "Top News Stories", "League Standings", and "Live Scores". The next screen has the same primary navigation and top banner, but now has three buttons that read as "Find a team" "Create a team" and "Find LAN events". The third screen is all white and empty except for text that reads "Finding teams that match your profile...", and the final screen has the same primary navigation on the bottom, and now a title that reads "Find a team", and a card that displays example team information, such as team name, seriousness of play, schedule, roster."
The first set of wireframes. These are basic layouts and consist of four screens. The left most screen has a primary navigation bar on the bottom (which consists of a home icon, a social icon, a chat icon, a profile icon, and a settings icon), and also a primary thumbnail - type rest of the screen that reads "Esports Community Hub", "Top News Stories", "League Standings", and "Live Scores". The next screen has the same primary navigation and top banner, but now has three buttons that read as "Find a team" "Create a team" and "Find LAN events". The third screen is all white and empty except for text that reads "Finding teams that match your profile...", and the final screen has the same primary navigation on the bottom, and now a title that reads "Find a team", and a card that displays example team information, such as team name, seriousness of play, schedule, roster."

Testing
‍
Before moving forward with designing more of the experience, I wanted to run a few short usability tests to ensure my trajectory was on a user-centered path. I tested two participants who were gamers that had interest in Esports and tasked them with going through the process of finding a team using the app.

Both participants were successful, and both reported that they clearly understood the primary navigation; thus validating this initial iteration of designs.

Second Iteration

Next came designing the onboarding process, including first login screens, registering, and creating a gamer profile type.

Two wireframe screens. Both are part of the onboarding process. The left screen reads "Esports Community Hub" as a type of logo, with username and password input areas, two buttons that read "Register" and "Login", and then three login buttons underneath- one that is a Google logo, one for Facebook, and one for Apple. The next screen reads "Create Account", with user input fields for: First Name, Last Name, Username, Email, Password, Re-enter password, and then two buttons that read "Back" and "Create".
An animated gif of a mobile screen design. It reads "What describes you?" then in lighter grey text "This can be changed later. Select multiple if necessary." Then it has two large buttons that highlight in a green color when tapped on. They read "Gamer, Play games, find teams, find communities, find events", with a game controller icon, and a circle that becomes a check mark when tapped on. Then the second reads "Event Coordinator, host events, manage financials, communicate with vendors, promote and market", with a calendar icon and the same circle to checkmark interaction. Underneath is two buttons, one reads "Back" and the other "Next".
An animated gif of a mobile screen design. It shows boxes that have the text inside of them "AM" "Mid" and "PM", and reads above "Weekly Availability (Select Multiple). The gif is of a user tapping on the boxes which turns them green, and then double taps on them to turn them red. Underneath the boxes is a toggle button that reads "Private Profile?", and then two buttons on the bottom that read "Back" and "Next".

Another round of usability testing was conducted to ensure that the addition of this new onboarding section did not hinder the process of a gamer finding a team.
‍
- Four gamers were tested and completed the task successfully, reporting that the process was intuitive
- Suggestions were made by the gamers to highlight two elements to be iterated on
‍

Third Iteration

The goals for this iteration were the following:
- Expand on the designs and more features, like "Find an Event", "Create A Team", Calendar, and Settings areas
- Incorporate user suggestions from previous round of testing.

An image of four mobile design wireframes. The left-most screen is a blank white with black text that reads "Finding local LAN events..." the next screen has the same primary navigation on the bottom, and has a title that reads "Local Events" and a card that displays example event information. The next two screens are for the Create-A-Team process, with one titled "Create a Team" and listing input fields for "Team name" "abbreviation" "primary game" "team leader" "time zone" and a button that reads "Create Team". The final screen reads "Team "Team Name" has been created." with a button under it that reads "Home."
Three mobile screen wireframes. The left most one is a calendar that reads "Calendar" "May 2022" with small grey boxes for each day of the month. There is a primary navigation on the bottom, and some boxes for the days of the month are highlighted with a green color. The next two screens are notification/overlays of the calendar. The middle one reads "May 7th 2022, Team Tryout: Snakemen 7:00pm", with a button that reads "Back". The last screen is the same as the middle but reads "May 17th, 2022, Event: Event A, 7:00pm." with the same "Back" button.
An image of three mobile screen wireframes. They all have the same primary navigation on the bottom, and the left most one shows a rectangular card that reads "Friend Chats" "Online" "friend 1" "friend 2" "Friend 3", "Offline" "friend 1", "friend 2", "friend 3". There is a "swipe" bar on the bottom of the card. On the top of the screen reads "Play1 Online" "In Game Counter-strike". The next screen reads "Profile" with a button under it "Change profile mode to : Event Coordinator". Then it displays a box that shows the player profile with input fields that read "Name" "Gamertag" "Primary Platform" "Primary Game.". The final screen has a title "Settings", with a toggle for "Push Notifications On", and buttons that read "Player Profile" "Account Settings" "Privacy" "Gaming Safety", and "Log Out".

Here more of the experience was designed, along with suggestions iterated upon from the user testing. The users reported that the "you are here" navigation icon highlights afforded them the opportunity now to understand where they were in the app, along with contrast highlights created in the "swipe" elements to better display the interactions to users.

Fourth Iteration

The focus of this iteration was to create a process for Event Coordinators to utilize the technology.

An image showing two mobile wireframe screens. The left one has the same primary navigation as earlier iterations, now with a different screen layout as this is for the Event Coordinator profile. From top to bottom it reads "Esports Community Hub" with a horizontal scrolling banner of small circles that inside of them read "friend 1, friend 2, etc", then "Top News Stores", with a few example stories, then "Upcoming Events" with some example events. The next screen reads "Create an Event" with a logo of some building blocks, then some user input fields that read "Event name" "Location" "address" "date", then two buttons that read "Save Draft" and "Launch".
An image of two wireframe screens, they have the same primary navigation as prior, and the left screen reads "Event "Challenger Series X" has been launched." with a button under it that reads "Home". The next screen reads "Event Challenger Series X" draft has been saved." with a button under that reads "Home".

In this fourth and final round of usability testing, the following insights were uncovered from both gamers and event coordinators:

- Users felt that finding when finding a team, there should be an opportunity for an initial communication to start between the player and the team leader, and not only the adding-event-to-calendar option.

- Events and Team Tryouts / Practices on the calendar could be easier to read if they were color coordinated; if there were many events for a gamer in one month it could be confusing to quickly glance and delineate them from each other.

- Chat page iterated, participants wanted a vertical scroll instead of the horizontal card scroll – they found it too similar to the find-a-team and find-an-event functions

- Initial loading screen could have a “What is Esports Community Hub?” element that simply explains the app before any registration occurs.

- Initial Event Coordinator goal of creating an event was successful through testing
‍

Final Iteration

The objective of this final iteration was to solve the remaining user needs, and triangulate all improvements, suggestions, and ideas into one final version.

- Users suggested an initial information element to tell what the app does right from the home screen before any kind of onboarding

An animated gif of the high fidelity initial login screen. It reads "Esports Community Hub" with a subtitle: "Converge. Communicate. Dominate." Then under that is a horizontal scrollable element and in the gif the user is scrolling through and it reads "What is Esports Community Hub?" "It's a meeting place for gamers to find teams, events, and communities" "... and a central hub for event coordinators to host events, manage financials, and communicate with teams and vendors." Under that element is the username and password input fields, two buttons "Register" and "Login", and then three other login options: a Google Icon, a Facebook Icon, and an Apple icon.

-Users also wanted a way to open a communication with the leader of the team they want to try out for, alongside with adding tryout dates to their calendar

An image of a mobile screen in high fidelity. It is an overlay pop-up that has four buttons. Two read "Tap to add Tryout Dates to Calendar", "Open a Chat With Team Leader", and then two navigation ones that read "Back" and Done".

- Users also suggested color coordination of the teams, events, and calendar items

An animated gif of a scrolling "Find a Team" screen. It is showing three different cards, one for each team that resulted from the "find a team" search.
Similar to the previous image, this is a scrolling animated gif but this one is for "Local Events" and lists three cards of local events resulting from the "find an event" screen.
A calendar screen for the mobile app.

-The chat page was also iterated, as users felt more comfortable with a familiar vertical scroll

An image of two designed screens for a gamer. They are both chat screens.

- The home screens are iterated

An image of three designed mobile home screens for a gamer.

-The Event Coordinator screens were improved, with unnecessary elements removed thanks to user feedback

An image of four mobile screens. The left most one is a home screen for an Event Coordinator, the next screen displays input fields for Creating an Event, and the next two screens are notifications for a saved draft of the event or confirming that it was created.
An image of three screens of high fidelity wireframes. The left-most screen is an event management screen, the middle screen has buttons for increasing and decreasing prices, and the right-most screen is a chat screen.

Brand & Style Update

A login screen, with user input fields and login and register buttons.
A home screen interface for Esports Community Hub, showing some friends faces, a primary navigation bar, news, scores, and standings articles.
A "find a team" screen, with a roster shown, with time availabilities, and a team logo of a mariner and nautical type tehem.

Final Thoughts & Lessons Learned

This was incredibly fruitful for me in seeing a project through from initial ideas all the way to a final, high fidelity solution.

Staying grounded with user check-ins highlighted the importance of user-centered design and allowed my work to continue on a path that was in tune with user needs, and also let me ideate and design without having to backtrack too often. This user-centered work was essentially "measuring twice and cutting once".

To continue the project, I would look towards testing larger populations, creating a synchronous web solution, and exploring integrations with the actual games. I imagine that the experience could be improved with more insights from larger populations that could look at new features and systems that weren't initially uncovered in this ten week time period.

‍

‍

‍

References:
[1] Ashley, J. (2022). Esports Net Worth: The Billion Dollar Opportunity of Esports. Esports.net. Retrieved 20 April 2022, from https://www.esports.net/news/the-billion-dollar-opportunity-of-esports/. 
‍
[2] Heath, J. (2022). The 10 Highest Earning Esports Players in the World. Dot Esports. Retrieved 9 April 2022, from https://dotesports.com/general/news/top-earning-esports-players-21870.
‍
[3] Ucciferri, F. (2020). Parents' Ultimate Guide to Steam. Common Sense Media. Retrieved 30 April 2022, from https://www.commonsensemedia.org/articles/parents-ultimate-guide-to-steam.  
‍
[4] Minor, J. (2020). What Is Discord and How Do You Use It?. PCMAG. Retrieved 12 April 2022, from https://www.pcmag.com/how-to/what-is-discord-and-how-do-you-use-it.