GG

How do you...

provide gamers with a safe platform to find each other?

My Role
Visual Design
Research
User Flows
Prototyping
Testing
Design System
Tools Used
Figma

View Prototype

Landing Page

Context

Competitive gaming has always been a huge part of my life. I played a lot of online multiplayer games growing up. But as a woman, I often felt a sense of anxiety while playing - I knew that I was in the minority, and that the gaming community could be less than welcoming to people like me.

That's why I decided to create GG - a project that was inspired by my love of gaming, and my desire to make the community more inclusive and welcoming for everyone.

The Problem

Women and gender minorities are more likely to face some sort of gender-based discrimination or harassment while gaming. This includes being gatekept, receiving patronizing or unsolicited comments from users. As a result, many are forced to resort to using methods to disguise or hide their identity while online.

So how might we provide players with an easy and accessible way to pair up with other players without having to mask themselves and deal with stress?

Understanding the users

Secondary Research

Through secondary research, I learned that 77% of women1 responded dealing with at least some sort of frustration when gaming because of their gender.

Judgements of skills, (70%), gatekeeping (65%) and patronizing comments (50%) were the most reported types of comments women gamers said they received while gaming online.

In addition, 44% of women gamer respondents have received unsolicited relationship asks while gaming.

1. Source: Reach3 Insights

Primary Research

I conducted 5 interviews and sent out an online survey to identify pain points, unique user journeys, and the gaming habits of my target user base (women, assigned-female-at-birth (AFAB), or non-binary individuals). Out of 35+ responses and 5 interviews, lack of self-confidence and having to hide their true selves were reoccurring themes.

While using platforms like Discord and Reddit, users feel like their messages get lost easily.

"If people find out I am female, they treat me like I'm special or become jealous of other friendships."

"It felt like I had to work even harder for them to see me as an equal player; even then it felt like I wasn't welcome in the game."

The Market Space

I conducted a competitive analysis of 5 different mobile apps within the same market I was targeting. I took notes of their onboarding process, safety features, how they approach connecting players with one another, and identifying gaps my product could fill.

Competitive analysis of four mobile apps in a similar market space.
Click to enlarge.

Ideation

Personas & User Stories

Based on the insights from my research, I created two personas that represented the interests and pain points of my target user base.

In addition, I wrote down several user stories that provided me with a concise idea that I should follow throughout the design process, keeping user-centricity in mind:

"As a female gamer, I want to have a safe space surrounded by like-minded individuals who share the same love of games as me, so I can create meaningful bonds."

- User Story 1

"As an anxious individual, I want to find a group of people I can open up to and socialize with without feeling afraid of messing up, so I can enjoy multiplayer games once again."

- User Story 2

Ideate

Design Goals

With the problem defined, and having a better understanding of my users, I established several design goals to keep in mind while moving forward.

The app's design should feel accessible for a user regardless of their background or identification.

The app should steer clear of promoting gatekeeping or hyper-competitiveness that might pressure users into feeling the need to overperform.

The app should implement robust safety and moderation policies, reward good behavior, and provide users with tools for reporting and blocking.

Concept Validation

I utilized the Crazy 8’s method to quickly ideate concepts and features that could help address the issues my survey participants faced. The concepts were inspired by a number of sources, including competitor’s apps, popular online multiplayer games, and gaming platforms such as Steam and EA Play.

I then ranked these features to see which ones were the most feasible within my timeframe.

AirTable showing features, descriptions, and priority
Click to enlarge.

User Flow

I created a user flow using Tilo as my user. Doing this allowed me to garner a better idea of how the sign up and group creation processes would play out.

Click to enlarge.

Sitemap

The information architecture of the site. Dotted lines indicate optional paths.

Click to enlarge.

Exploration

Initial Sketches & Wireframing

I began by creating rough sketches of the app's main screens - this included the onboarding process, game lobbies, chat, and shop feature.

The sketches were then turned into wireframes with increased fidelity. Some design decisions I made included how to display the community guidelines. The original design included a page where the user would have to check off each rule before being allowed to complete the sign up. This was later changed into a card swipe design to help improve legibility.

Testing

How're things going?

After finishing the first prototype, it was time to put it to the test in an unmoderated usability study. Participants were asked to complete a few tasks including the onboarding process, creating a lobby, and finding the shop.

Users were encouraged to narrate whatever came to mind and write down what they liked, disliked, or found confusing about each process.

The Good

  • "I like it, it seems like a mix of Discord and Instagram. I am curious how the end product will look, especially the customization part and how the app will look."
  • "If the responsiveness is just as good as the test app and the functionality is there, I’d use it."
  • "The endorsement system is cool, I like having rewards as an incentive for good behavior."

The Bad

  1. Users couldn't identify where the shop feature was located. (4/5 Users)
  2. Scheduled groups and group chats were hidden beneath Active Groups and Individual Chats, respectively, and weren't easily scalable.  (2/5 Users)
  3. Some text sizes were too small and other elements too big. (2/5 Users)

Design Changes

Users now can endorse specific players or all players at once. Descriptions were added to describe endorsement types. A confirmation screen was added, which also showed users what reward they earned.

The navigation bar now includes Store access. Active Lobbies and Scheduled Lobbies were turned into tabs to allow easy access and better scalability. The buttons to switch games were also increased in size for accessibility.

Before and After of All Lobbies Screen

The toolbar was moved to the bottom, allowing better accessibility for both left handed and right handed users. The player number and "Join" button were moved to increase scanability. The "Flag" option was separated into Kick and Report.

Before and After of Lobby Screen

High Fidelity

Showcase

Click on a lobby to view it. Joining enables features such as lobby chat, endorse players, and reporting functions.

When creating your own lobby, add specifics like Region, Platform, Description, and Require Approval.

Earn points for displaying good behaviors and endorsing other players. Spend points on customizations options.

Looking for a dedicated community for a specific game? Check out guilds of other like-minded players.

Designing for Multiple Platforms

While mobile was my primary focus, I adapted the design further for desktop and tablets. I also designed a landing page to help inform users about the mobile app and showcase the app's features.

Desktop version of site
Landing page design
Tablet version of site

This is GG.

Presenting GG, an app providing gamers with a safe platform to pair up with each other.

For the Future

Events & Tournaments

I would love to flesh out the design further to add support for community events. For example, tournaments targeted towards unrepresented groups in eSports and offer exclusive prizes to the winners and participants.

Further Rewards

For users who consistently showcase good behavior and obtain high levels, their accounts could be rewarded with non-cosmetic features such as the ability to promote their group, or even moderation tools.

Learnings

Sticking to familiar design patterns

Sometimes it's worth going with the safe option when designing specific flows. Familiar design patterns have evolved over time to accommodate a wide range of users, including those with disabilities. Trying to redesign these patterns can inadvertently overcomplicate a task and dissuade users from using an app.

While trying to design features, we don't want to fall into the trap of reinventing the wheel - rather the time can be reallocated into perfecting other core features.