PROJECTS
ABOUT
RESUME

The Gaming Scene is rising. but...

Mainstream platforms are failing to welcome underrepresentation in the gaming sphere.

Players in marginalized groups are 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.

Timeline:

October 2022 - July 2024

Role:

Product Designer & Founder

Skills

Atomic Design Methodology, Design System, Design Thinking Process

Overview:

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.

Game in Safe & Inclusive Spaces.

I designed a Party Finder Feature where users can find others with similar interests to play with each other.

Personalization Matters

There are ways on the platform for more self-expression, including identity based questions relating to diversity and inclusion

Discover Communities

Players now have more accessible ways to discover communities that they can join to make friends or share common interests.

DISCOVERY

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.

DISCOVERY

Literature Reviews

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.

DISCOVERY

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

View Full Analysis Chart

DISCOVERY

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

Total Responses:

40

Source:

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.

DISCOVERY

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.

Total Responses:

40

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?”

SYNTHESIS

I discovered so many themes in this space.

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.

Communication
Bullying & Harassment
Diversity & Inclusion
Empowerment
Damage Control
Damage Prevention

SYNTHESIS

How Might We (HMW)...?

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

View all HMW's

DEFINE

Questions turned to Key Insights & Painpoints

DEFINE

Key Insights

From the HMW's, there were several key insights that provided me a great breadth of what inclusivity means to others. This helped me understand how the solution can address those problems.

Key Insight #1

Users feel safer playing with others who have similar backgrounds or interests

Key Insight #2

Users enjoy playing games to admire art and culture from various creators

Key Insight #3

Many users faced extreme discrimination due to their gender and sexual identity

Key Insight #4

Games exploit LGBTQ+ experiences for marketing purposes

DEFINE

Pain Points

From conducting interviews with people around the world, I listened to a lot of personal and external pain points from the users themselves.

Pain Point #1

There are few opportunities for self expression and empowerment

Pain Point #2

Users retain negative experiences even after harm was committed

Painpoint #3

There is difficulty in finding online communities for people in marginalized backgrounds

Problem Statement

“How might we facilitate a social platform for underrepresented gamers to socialize and find the right community for them?”

IDEATE

Now I can ideate confidently

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

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.

Communication
Bullying & Harassment
Diversity & Inclusion
Empowerment
Damage Control
Damage Prevention

PAINPOINT #1

Lack of Personalization

There are few opportunities for self expression and empowerment

PAINPOINT #2

Few opportunities to find the right party for users

Users retain negative experiences even after harm was committed

PAINPOINT #3

Lack of discovery tools

There is difficulty in finding online communities for people in marginalized backgrounds

TEST

Before we move on, we need to test.

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.

FEEDBACK #1

WCAG Compliancy

I ended up changing a lot of the colors since they were not accessible at all. I used the contrast checker to help create these changes.

FEEDBACK #2

Stress Testing

There were situations where information would stretch or break components. So, I designed dynamic tilings to maintain the structure of components.

FEEDBACK #3

Less is More

I realized that it's better to simplify processes for users. This required separating processes that are digestible and removing unnecessary decorative designs.

FINAL

This created the first iteration of Kapi

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.

Game in Safe & Inclusive Spaces.

I designed a Party Finder Feature where users can find others with similar interests to play with each other.

Personalization Matters

There are ways on the platform for more self-expression, including identity based questions relating to diversity and inclusion

Discover Communities

Players now have more accessible ways to discover communities that they can join to make friends or share common interests.

DESIGN SYSTEM

My Favorite Process, the Design System

The heart behind all the consistencies and cohesion of the platform.

DESIGN SYSTEM

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?

DESIGN SYSTEM

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

DESIGN SYSTEM

Foundations

Created Tokens for Color & Typography for developers to reference.

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

Autolayouts & 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.

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.

NEXT STEPS

Fin? No, theres more to do

 As a reminder, this is only version 1.0 of the platform. There are a couple of features such as the “Spotlight” and “Report System” that have not been finalized 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.

We started laying out priority charts for our next steps after our usability tests.

REFLECTION

One of my favorite projects, ever.

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.

Thank you for reading, it is always my pleasure.

Contact

codydmak@gmail.com

Connect

www.linkedin.com/in/cody-mak/

@2024 Cody Mak

Content

Project Overview

Discovery

Synthesis

Key Insights &
Painpoints

Ideate

User Testing

Final Designs

Design System

Next Steps

Reflection

Loading