Vetiver was designed to create a safe environment for gamers through its strict reputation and warning systems which are based on updated traits and reviews added by users within the community. This creates an outlet where gamers can confidently find like-minded users to safely game with.
Timeline
August 2022 - November 2022 (8 weeks)
My Role
UX Designer & UX Researcher
Project Type
Individual Capstone Project For BrainStation UX Design Bootcamp
Tools
Figma & Invision
Problem At Hand
Toxicity Within The Online Gaming Environment
Before getting started, if possible, I wanted to ask you to think about some of your favorite hobbies. Got it? Awesome! Now, why are those activities your hobbies in the first place? Is it because it's fun, it brings joy, or maybe it acts as a stress reliever? Whatever your answer may be, imagine something or someone constantly taking those elements away from you and your hobby. This is unfortunately the reality for many gamers who self-identify as women, as they fall victim to online harassment of all kinds while trying to do what brings them joy, and in this case, that would be gaming.
Rationale
Why I Chose This Topic
Being a passionate gamer myself, I know a lot of people, a lot of friends, and even family that have previously expressed their concerns relating to the harassment that they have faced while gaming online. So this isn’t just a random topic that I picked out of the ocean, but rather a subject that sits close to me. Because of this, I used this project as an opportunity to further understand and empathize with gamers who identify as women.
HMW Statement
My Goal
With my personal motivation behind this project, I began this journey in hopes of finding a design solution (in the form of a mobile app) that could help alleviate these gamers’ hardships. Below is my initial how might we statement that helped guide me in the very beginning.
Secondary Research
The Current State of Online Gaming Environments for Women
To understand the scope of the problem and why we need to take more action, let's take a look at a demographic stat.
In 2022, 48% of video game players identify as “females” in the U.S.
Entertainment Software Association (ESA)
Though gaming has been stereotypically seen as a “men’s activity”, you can see that that's far from the truth.
Diverging away from the demographics side of things, lets take a look at what the women population goes through in the online gaming environment.
A study released in 2020 found that out of 2000 gamers who self-identify as women, 76% of them have disguised their gender during gameplay. Of that 76%, 93% of them said it was due to sexual harassment.
Fandom Spot
“How might we create a safe environment for gamers who identify as women in order to increase their enjoyment for gaming when interacting with other players?”
Based on a survey conducted with 900 women gamers in China, the U.S, and Germany, 77% of them have experienced discrimination due to their self-identified sex.
Reach3 Insights
So as you can see, a toxic online environment is capable of degrading a person’s experience to the point where they feel the need to hide their own gender. To further help you understand the severity of the problem at hand, below are two quoted statements that perfectly summarise what’s really going on.
Katie Tarrant, Former Journalism Manager of YGAM stated “What is often a form of escapism or skilled hobby for young women is too frequently ruined by a few words from male gamers”
Primary Research
User Interviews
To understand and empathize with the population of interest, I conducted interviews with 3 gamers who all self-identified as women. With critical insights that I gained directly from their stories and lived experiences, I was able to categorize their pain points, motivations, & behaviors into 3 main themes.
Theme 2: Online Community Experience
Insight: A women’s gaming experience can also be affected by the gaming communities that they are a part of. Having a bad time within an online community can translate into having a bad time while gaming. In contrast, having a good time within an online community can translate into having a good time while gaming.
Theme 3: Social Support
Insight: Women gamers expressed the lack of social support available to them, therefore they heavily rely on their close friends if they are available.
While extracting these themes, and deeply conversing with the users, many of their stories further motivated me on finding a design solution. Below are a few statements from my users that I was given permission to share.
“It's hard to find time to play with “in real life” (IRL) friends cause they have their own schedules that aren’t aligned with mine. ”
“No, I don't (communicate with teammates online), I just mute everybody because the obvious reason is me having a girl's voice. I don't think it's worth it because of the potential of meeting a toxic person.”
“I think I’ve only played alone once or twice, and it was horrible. People were just yelling at me.”
Persona & Experience Map
Who I Designed For
With all the key insights I had gained from my user interviews and prior research, I gathered all the available information and created a persona called Sarah that accurately represents the users I designed for.
With Sarah, I was able to map out her general experience in the gaming environment after a long day of school, as seen below.
Not only did the experience map help me explore areas of design opportunities, but along with Sarah, it further guided me into the ideation phase in a user-centered manner as the whole process should be.
“How might we create a safe environment for gamers who identify as women in order to retain their enjoyment for gaming when interacting with other players?”
User Stories
Viewing or Contributing to Other’s Online Reputation
When beginning to ideate about what my solution will entail in terms of functionality, I created a long list of user stories based on Sarah’s needs and motivations. After organizing the user stories into separate “epics”, I came to a conclusion on focusing on one epic and its user stories, as you can see below.
Now, why did I choose this epic? Well, after reviewing my persona (Sarah), the experience map, and my refined HMW statement, I thought that this epic was the most relevant and it directly tackles one of the opportunities mentioned in the experience map which was “give Sarah a review on the players and give her the ability to view their reputations”. In reviewing others' online reputations, Sarah may grasp a better understanding of the gamer and can rationalize whether or not she would feel safe playing video games with them.
On top of that, I conducted a quick competitive analysis on an existing app that had a similar goal to mine. I came across a mobile app called “thegameHERs”. Their organization wanted to create a safe social community for women gamers. While their app heavily focuses on the social aspect of keeping women gamers safe, there was no function in which you could review any sort of online reputation for a user. What does this tell me? Well, my compass pointed away from focusing on the social functions of my app and went straight to focusing on reviewing gamers’ reputations.
An app that heavily depends on socializing, and its associated functions. There are events, you can request to play with others, and there are groups you can join, but there isn’t any form of user reputation/reviews.
Task Flow
Reviewing a Specific Gamer’s Online Reputation
Based on the chosen epic, I created a task flow that Sarah would go through in order to review a specific gamer’s reputation, to see whether or not she would feel safe playing video games with them. Below is 1. A list of user stories from the epic that were fitted within the main task flow, and 2. The main task flow.
Ideating, Sketching, & Low Fidelity Wireframes
Turning Chosen Solution Sketch Into Low-Fidelity Wireframe
With the task flow all set and done, I was ready for solution sketching! After taking UI inspiration from existing products, I sat down and rapidly sketched out some exploratory screens that hold functions related to completing the main task flow. Once I had chosen my solution sketch, I refined it and converted it into low-fidelity wireframes, ultimately becoming a stiched up first iteration of my prototype. Below are three examples of solutions sketches being converted into a digital grayscaled wireframe.
Usability Testing
Turning to The People I Desgined For to Gain Valuable Feedback
With the first iteration of my prototype, I needed practical, real-time feedback that could be incorporated into improving my design to provide a more optimal experience for my users. How did I get this feedback? You guessed it, I leaned on the people I designed for to provide key insights on what was working, and more importantly what wasn’t working. In the first round of testing, along with several minor issues, two main issues arose that directly caused the users to struggle with the main task flow.
Branding (Color)
Aura & Atmosphere of My App
With both rounds of usability testing done, it was time to add some life and dimension to my prototype. Income my mood board! I based my mood board and my app’s theme and aura on the following adjectives: zen, hopeful, safe, & calm. I felt that these adjectives perfectly describe the feeling a user would get when using my app as it provides a safe environment for gamers who identify as women. With the mood board, I was able to extract relevant colors needed for injection into my grayscale prototype.
Branding (Typography)
Readability Is Vital
The main element I wanted my typeface to have was readability. I didn’t want serif fonts due to their extra pizazz which could sometimes be seen as over complication and therefore hecticness. Instead, I opted for san serif fonts that better communicate simplicity, and calmness (not hectic). This embodies my previously mentioned adjectives and provides users with an easier time while reading. With all this rationale, I decided to go for Lexend Deca as my typeface. The Lexend font family was actually created to improve reading proficiency. This gives me the certainty that the contents of my app will be user-friendly in terms of readability.
Branding (Name)
Vetiver
I’m glad you made it this far into my journey! I'm sure it's been kind of annoying referring to my design solution as “my app”, but here’s where all that changes. How did I decide on my app’s name? Well, I had a few options, but I ended up choosing a name that perfectly summarizes what my app is all about.
Solution
Vetiver in the Form of A Mobile Application
We now arrive at the final prototype where the branding mentioned above was implemented into my grayscaled wireframes (V3). So it is my pleasure to finally introduce to you, my proposed design solution in the form of a mobile application, Vetiver.
Multiplatform Challenge
Rise In PC Gamers
Realistically, Vetiver wouldn’t just be a mobile application as games are played all over different platforms. For example, this includes gaming consoles, tablets, & gaming PCs. There has been a shift towards the PC gaming side of things in the past years, so I thought why not try to draft up a screen for a desktop platform. As this is a challenge, I did “give myself” an hour to do what I can.
Key Learnings
Walking Away With These Things In Mind
It may take a long while if I were to share every single thing I have learned throughout this 8-week journey, so instead, I’m going to share one of the most important “lessons” that I have learned.
During this journey, I hit many roadblocks, and it was frustrating every single time. I was stuck quite often during the beginning and the ideating phase. So I thought to myself, ok, Collin, what was the main theme that has been echoed around the boot camp? Spoiler alert, it was the fact that a good designer needs to ensure that their process is always human-centered. Though this was common sense in a way, sometimes when you’re deep into your own thoughts and methods, it can really fog up what’s most important. And of course, the most important matter within any design journey is the users. After all, we are designing for them. Not only are they the most important they are also your best resource. With these statements engrained into my head, I rushed a lot less, and instead, I took my time with the users. Taking time with the users was a literal action, but they aren’t always available, so I would refer back to their user interview answers, and ultimately the persona.
“(Abuse) It’s just so normalized and there are so many rape threats just casually thrown in there. On top of generally sexist comments, there’s an extra layer where it gets a bit more toxic” - Lisa Kelly expressed her frustration to Young Gamers and Gamblers Education Trust (YGAM), a charity from the U.K.
Theme 1: Targeted Harassment
Insight: Women gamers go through harassment of all forms targeted directly at them during online gaming. This creates the need for women gamers to avoid potential encounters with these types of behaviors by adjusting their gaming habits.
While exploring Sarah and her journey in depth, I realized a mistake I made in my initial HMW statement. Instead of “increase their enjoyment for gaming”, it really should be “retain their enjoyment for gaming”. The goal was to help gamers who identify as women to keep their already existing joy that comes from gaming, rather than trying to increase their enjoyment. It's a very slight difference between the two, but I believe that it speaks of different goals.
Due to the controller icon being too ambiguous and not very intuitive, 4/5 users expressed their struggle in trying to navigate to the “find gamers” screen. To manage this issue, I decided to add relevant labels under all the home navigation icons resulting in a more user-friendly home navigation bar.
Initially, I thought that the reputation bar alone was enough for users to understand that it serves as a button that brings you to the reputation screen, but boy was I wrong. Although 3/5 users were able to navigate onto the reputation screen without too much struggle, they expressed that they simply guessed their way onto the screen. As for the remaining 2 users, I had to let them know that they needed to click on the reputation bar. To help users have an easier time on this specific task, I placed help text under the reputation bar in order for users to realize that the actual reputation bar needs to be pressed in order to move onto the reputation screen.
Alright, time for round 2 of testing with different users! Overall, all tasks within the main task flow were done with ease except for one issue, in which I thought was already fixed.
So clearly, the changes I made from the first round were not significant enough to help guide the users into the reputation screen. This was made clear to me when 2/5 users were struggling to enter the reputation page. It took them a good while before noticing the help text below the bar and expressed that it was still odd that the reputation bar was an “actionable” button. To counter these difficulties, I decided to stop overthinking (like I always do) and add an actual button that would lead to the reputation page.
So with the major changes mentioned above along with several minor changes, I came to the 3rd iteration of my grey-scaled low-fidelity prototype.
The Vetiver herb is known/associated with mental healing from previous trauma that one may have, and on top of that, they are also known to provide protection against any type of negativity.
So I after deciding on the name of my app, it was was time to create a wordmark and application icon. Below you can see the different versions of both the wordmarks and application icons I messed around with.
After showcasing the different iterations to my peers, I chose my finalized wordmark and application icons as seen below.
Wordmark variations in sketches and digital form
Mobile application icon variations in digital form
Before moving on any further, I want to explain how Vetiver tackled our HMW statement specifically from Sarah’s perspective. Sarah would normally have to resort to playing with “randoms” online since her friends are too busy with their schedules, but with Vetiver she’s able to find gamers that she can play with. That alone doesn’t help us with the HMW statement, but it’s the reputation & warning systems that provide that safe environment for Sarah so that her gaming experience doesn’t have to be degraded by toxic and negative individuals. By reviewing others’ online reputations, Sarah will be able to grasp a better understanding of the gamer and can rationalize whether or not she would feel safe playing video games with them.
