the gaming scene is rising. but...
All mainstream platforms are failing to welcome underrepresentation in the gaming sphere.
Players in marginalized groups are constantly encountering toxic teammates and are often met with discriminatory remarks. They are afraid to speak and play with toxic teammates.
So we created Kapi.
Kapi is the first social platform for underrepresented communities! Kapi personalizes the user’s interest to allows them to find others with similar interests, backgrounds, and game interests.
and this is my role.
I am the Product Design Lead at Kapi and designed a social platform welcoming underrepresentation in the gaming community.
I lead the onboarding, party-finder tool, and community pages that personalize and emphasize user diversity and inclusion.
Time:
Role:
Skills:
October 2022 - Current
Product Designer
Design Thinking Process, Atomic Methodology System, WCAG Accessibility, Component Library
Jump to Solution
safe & non-toxic spaces
I designed a Party Finder Feature where users can find others with similar interests to play with each other.
Personalization matters.
Onboarding questions include identity-based questions for diversity and inclusion. This allows users to find others with similar interests and background
.png)
.png)
discover diversity in different forms
I designed a landing page where users can discover communities and talented artists. Users can feel inspired to join communities of their interest
game in safe & inclusive spaces
I designed party-finder and open lobby features creating safe spaces for gamers to play with others.
Personalization matters.
Onboarding questions include identity-based questions for diversity and inclusion. This allows users to find others with similar interests and background
safe & inclusive spaces
I designed party-finder and open lobby features creating safe spaces for gamers to play with others.
It begins with user research.
I needed to understand the current situation for gamers identifying in underrepresented backgrounds. People are unique in their own way, and its our priority to educate and empathize with their current experiences in this problem space.
Here are our main questions to answer in our research.
Here are our main questions to answer in our research.
GOAL 1:
How do we make sure that our goals are remain authentic to underrepresentation?
GOAL 2:
Do people value their identity in games a lot? Or are they more looking at communities
GOAL 1:
How are people currently communicating, or how are they solving them?
USER RESEARCH
Literature Review-
It started with researching current experiences, data, and solutions. There were previous social experiments and data revealing the horrific experiences to those in minority groups.
USER RESEARCH
Competitive analysis
What are current popular platforms doing to fix this problem? You’d be surprise to see how mainstream platforms such as Twitch, Reddit, and even Discord do not have the best representation for diversity and inclusion in their services.
Our research is very thorough. Click here to view the full analysis chart
Our research is very thorough. Click here to view the full analysis chart
View Full Analysis Chart
USER RESEARCH
User Surveys
We designed our surveys to include free responses and general choices. For this project, we paid close attention in reading their responses because it’s an opportunity to read their voices that may have been silenced.
Our surveys wanted to understand how the topics of ethnography, gender & sexual identity, and disability, affect their gaming experiences
Our surveys wanted to understand how the topics of ethnography, gender & sexual identity, and disability, affect their gaming experiences
Total Responses:
Source:
40
Reddit (Girls who Game, POC Gamers, Gamers with Disability, Gay-mers, Looking for Gamers, etc), Discord Channels
79%
of users admire art and entertainment culture of games
63%
of users find it difficult to find online communities celebrating their identity
40%
of users have experienced discrimination based on gender and sexual identity
Below are a compilation of real experiences and anecdotes from users who responded in the free-response section. Please me mindful and read with an open-mind.
Viewers discretion advised.
Viewers discretion advised.
< Swipe Left/Right >
USER RESEARCH
User interviews
Like mentioned earlier- everyone’s story and experiences are different. We conducted user interviews to empathize and have an opportunity for the user’s voices. Their identity will be protected and remain anonymous.
Number of Interviewees:
4
We had a wonderful opportunity to interview people with different experiences a gamer. The interview questions all relate to the concept: “How important is your representation in gaming?”
Then, we synthesize our research
We collected so many rich anecdotal data capturing experiences of real people. Diversity and inclusion needs to be highlighted throughout our platform. So, we need to synthesize our findings into a cohesive focus and have a framework for our platform.
These are the themes that we found in the user research.
These are the themes that we found in the user research.
Communication
Bullying & Harassment
Diversity & Inclusion
Empowerment
Damage Control
Damage Prevention
SYNTHESIS
HOW MIGHT WE?
With a lot of data, we also had a lot of questions. We wrote it in a form of HMW’s and placed them in their respective categories.
Click here to view all of the questions
Click here to view all of the questions
View All HMW's
We placed our top-voted HMW’s into our defined categories. After, we created several defined HMW’s as our primary focus for the platform.
.svg)
So thats what created our problem statement.
“How might we facilitate a social platform for underrepresented gamers to socialize and find the right community for them?”
Next, I ideate possible solutions.
I have a general idea of what our product would be. We ideated possible solutions through sketches and user-task flows. My team and I collaborated and discussed our ideas. Together, we combined, changed, and built from one idea to another.
IDEATE
USER TASK FLOWS
I had a general idea of what the pages would look like. Then, I connected the dots and created a user-flow to see how they would navigate through out product.
IDEATE
SKETCHES
We sketched a lot of different ideas... a lot. So, my team and I discussed our individual sketches and wrote questions, feedback, & concerns for each of our sketches.
We categorized our sketches into to pages and starting points for the user flow. The circle stickers allows to make sure that these features all respond to the user’s needs.
We categorized our sketches into to pages and starting points for the user flow. The circle stickers allows to make sure that these features all respond to the user’s needs.
.svg)
< Swipe Left/Right >
Afterwards, I designed the wireframes.
Now that I have a general idea of how the pages will flow together, I designed wireframes and created a basic user flow. This allows me to see how the features can work on the platform.
WIREFRAMES
mid FIDELITY WIREFRAMES
There are a lot of wireframes that are created. However, I will only show the ones that have significantly impacted and defined our platform.
This is our general idea: our platform will personalize the user’s interest which will allow the users to find other players, communities, and content for them.
This is our general idea: our platform will personalize the user’s interest which will allow the users to find other players, communities, and content for them.
WIREFRAMES
High Fidelity Mockups
At this point, we did not have a design system to follow. Meaning, we had no guidelines, components, color styles, or even typography to follow.
We took the time in this step to experiment with different colors and typography. We also focused on ensuring visual accessibility and intuition.
Through user-testing and feedback, we were able to narrow down specific high-fidelity designs to have a clearer picture for the platform. Here is a sample of our changes.
We took the time in this step to experiment with different colors and typography. We also focused on ensuring visual accessibility and intuition.
Through user-testing and feedback, we were able to narrow down specific high-fidelity designs to have a clearer picture for the platform. Here is a sample of our changes.
.svg)
I want to introduce the Atomic Design Methodology
I created a design system following this framework to improve consistency, efficiency, and organization. Following this framework affects how I prototype and create the design system.
FRAMEWORK
ATOMIC DESIGN METHODOLOGY
A powerful methodology that helped us organize our design system. This is a sample of how we assembled Atoms to Molecules to Organisms, and lastly, Pages.
Doing this allows me to efficiently make new chances at an atomic level, which will affect the rest of the pages using these microorganisms. Cool right?
Doing this allows me to efficiently make new chances at an atomic level, which will affect the rest of the pages using these microorganisms. Cool right?
PROTOTYPING GOT EASIER WITH COMPONENTS
We increased our efficiency in prototyping through prototyping atomic components to have different hover states and interactions. This allows us to make interactions across all pages using these components.
PROTOTYPE
microinteractions
This is a sample of how I prototyped micro-interactions on smaller atoms. This allows us to provide more context behind user interactions for the developers.
Atom / Nav Item
Prototype
Atlas, the Final Designs
At this point, the Design System is completed. We took this time to assemble our components. This lead us to our final designs for version 1.0 of the platform.
safe & non-toxic spaces
I designed a Party Finder Feature where users can find others with similar interests to play with each other.
Personalization matters.
Onboarding questions include identity-based questions for diversity and inclusion. This allows users to find others with similar interests and background
discover diversity in different forms
I designed a landing page where users can discover communities and talented artists. Users can feel inspired to join communities of their interest
game in safe & inclusive spaces
Players can now join safe spaces where they can form their own parties to join before entering a game
Personalization matters.
Players can now personalize their interest through identity-based questions. This allows users to find others with similar interests and background
Discover diversity in different forms
Players can discover different communities and art- all empowering diversity and inclusion.
Our neat design system
The heart behind all the consistencies and cohesion of the platform.
DESIGN SYSTEM
COLOR STYLES & TYPOGRAPHY
You should notice that the primary colors all represent and belong on a spectrum of diversity. Each of our pages are color coded respectively to the primary colors
DESIGN SYSTEM
AUTOLAYOUT & GRIDS
I strictly use Autolayout and Grids for every component. This allows me to ensure consistency, and responsiveness across all dimensions.
This also helps me create detailed handoffs to developers.
This also helps me create detailed handoffs to developers.
DESIGN SYSTEM
COMPONENT LIBRARY
I designed the component library and created different properties for the components. This allows everyone to prototype micro-interactions more efficiently, and for the developers to create the component properties.
Here is a sample of how I organized components with their properties.
Here is a sample of how I organized components with their properties.
The end? No, theres more to do.
REFLECTION
WHAT ARE THE NEXT STEPS?
You may have noticed that we haven’t done user testing. There are a couple of features such as the “Spotlight” and “Report System” that have not been finalized yet.
You may have also noticed that we haven’t tested our product yet. All of our pages work together, and cannot survive on its own. So, we needed to make sure that we have all general layouts first before we can test. Our next step is to conduct beta tests to ensure that our concept is ready before launching live.
You may have also noticed that we haven’t tested our product yet. All of our pages work together, and cannot survive on its own. So, we needed to make sure that we have all general layouts first before we can test. Our next step is to conduct beta tests to ensure that our concept is ready before launching live.
REFLECTION
FINAL THOUGHTS
To reiterate, this originally was a one-man project by me. I was planning to enter Riot Games, “Design for Digital Thriving” four-week competition. I felt that four-weeks was not enough for me to fully create a solution to welcome representation in the gaming community.
This is a topic that I am truly passionate about, and its still ongoing! I recruited a larger team to help work on this project, and it has been an incredible experience sharing different perspectives on how to make the gaming space more inclusive.
I hope this case study will open your eyes to the current problem in the gaming community. This is only the first step in my mission to welcome people from different backgrounds in the gaming community.
This is a topic that I am truly passionate about, and its still ongoing! I recruited a larger team to help work on this project, and it has been an incredible experience sharing different perspectives on how to make the gaming space more inclusive.
I hope this case study will open your eyes to the current problem in the gaming community. This is only the first step in my mission to welcome people from different backgrounds in the gaming community.
Check out my other work
.png)
Golf Guru
2022
Boosting mental strength in audio features, rewards systems, and onboarding process on the mobile app
.png)
Messenger Redesign
2022
Reimagining Meta's Messenger App to centralize focus on Marketplace, Video Calls, & Chats.
