Mobile App Design

PlayerMatch

Connecting FPS gamers with teammates of similar skill levels to enhance competitive gaming experiences

Mobile App UX Research Gaming Social Platform

Project Details

My Role

UX/UI Designer, Researcher

Platform

Mobile (iOS & Android)

Tools

Figma, Teams, Microsoft Forms, Discord

Abstract

PLAYERMATCH is a mobile application designed to connect FPS game players with one another, facilitating the formation of teams with players of similar skill levels and interests. This app aims to enhance the gaming experience by solving common issues such as mismatched ranks, communication barriers, and toxicity in the gaming community.

The Challenge

23M

Monthly active Valorant players (2023)

60%

Players face uncooperative teammates

Common Player Issues:

  • Encountering "smurfs" (higher-ranked players in lower ranks)
  • Communication issues during gameplay
  • Toxic behavior and poor team coordination

Problem Statement

Player Needs

  • Connect with teammates interested in competitive matches
  • Play with teammates of similar skill levels
  • Reliable voice chat without frequent disruptions

Our Solution

  • Connect and discuss interests in the game
  • Competitive matches with similarly ranked teammates
  • Effective voice chat and communication features

Project Objectives

💬

Efficient Communication

Facilitate seamless communication among players

👤

Detailed Profiles

Provide comprehensive player profiles for better matchmaking

Profile Verification

Ensure genuine profiles through verification features

🎮

Gamification

Reward system to encourage positive behavior

Research & Discovery

Competitive Analysis

G33k Dating

Gaming-focused dating app with matchmaking

Customized profiles
Swipe-based matching

Badoo

Social discovery platform with verification

Real photo verification
Extensive customization

Discord

Communication platform for gaming communities

Voice/video/text chat
Community building

Interview Questions & Insights

In-depth interviews with experienced Valorant players revealed key motivations and expectations:

1. What factors would motivate you to use this application?

"The ability to ensure secure gameplay, such as verifying player ranks, and connecting with reliable, skilled players."

2. What features are you expecting from this application?

"I would prefer the application to be free to use, with essential features available at no cost."

3. Have you experienced any issues with voice chat while playing games?

"Problems with communication, chat logs, or team coordination."

4. If you could use this application in-game, what would be its primary purpose for you?

"I would use it to view player profiles, check recent game history, and assess the skill level or performance of other players."

5. What specific statistics would you want to track in this application?

"In-game performance metrics like K/D ratio or match history."

6. Do you believe PLAYERMATCH will help solve this issue?

"Well, as long as I connect to the right people. I believe people who take the game seriously will definitely use it for that."

Quantitative Research

Survey results from 5 participants (each with 50+ hours of Valorant playtime):

80%

Prefer Discord for communication

80%

Prefer competitive game modes

60%

Struggle with uncooperative teammates

60%

Have encountered smurfs

User Journey Maps

A

Andrew's Journey

The Social Connector

🎯 Goal

Connect with other players to enhance his gaming experience in Valorant

⚡ Key Actions
  • • Installs app and creates profile
  • • Sets up location sharing
  • • Searches by skill level and preferences
  • • Joins events or tournaments
💭 Feelings

Initially excited about connections but frustrated when struggling to find suitable teammates

💡 Suggested Improvements
  • • Customize notifications for player activities
  • • Enhance ability to comment on player profiles
R

Rob's Journey

The Casual Player

🎯 Goal

Connecting for casual games with like-minded players

⚡ Key Actions
  • • Installs app and creates profile
  • • Browses for casual match players
  • • Uses social features for engagement
  • • Sets up casual matches
💭 Feelings

Enjoys casual gameplay but finds coordination with teammates challenging

💡 Suggested Improvements
  • • Calendar feature to schedule gaming sessions
  • • Enhanced communication tools for planning
T

Tony's Journey

The Competitive Climber

🎯 Goal

Connect with skilled players for ranked games to climb the ranks

⚡ Key Actions
  • • Sets up detailed profile
  • • Filters by rank and skill level
  • • Views available ranked players
  • • Joins voice chat for communication
💭 Feelings

Motivated to improve but discouraged by unskilled teammates in ranked

💡 Suggested Improvements
  • • Matchmaking based on performance history
  • • Teammate feedback system for accountability

User Personas

A

Andrew

The Social Connector

Goal:

Connect with other players to enhance gaming experience in Valorant

Key Actions:
  • • Creates detailed profile
  • • Sets up location sharing
  • • Joins events and tournaments
Pain Points:

Frustrated when struggling to find suitable teammates

R

Rob

The Casual Player

Goal:

Connect with players for casual, fun gaming sessions

Key Actions:
  • • Browses for casual players
  • • Uses social features
  • • Sets up casual matches
Pain Points:

Difficulty coordinating with casual teammates

T

Tony

The Competitive Climber

Goal:

Connect with skilled players for ranked games to climb the ranks

Key Actions:
  • • Filters by rank and skill
  • • Uses voice chat features
  • • Views performance metrics
Pain Points:

Gets discouraged by unskilled teammates in ranked matches

Design Process

Flow Chart

Action/Process
Decision Point
Start/End
Open App

User launches the application

Signup Method

Select authentication provider

Confirm Info

Verify Google/Apple account details

Enter Name

User provides display name

Reason?
Connect: Find gaming partners
Chat: Social interaction only
Enter Birthday

Age verification requirement

Photo Notice

Inform about profile picture requirement

Photo Permission?
Allow: Access camera/gallery
Deny: Skip for now
Add Picture

Upload or capture profile photo

Email Login

Create account credentials

Take Quiz?
Yes: Complete gaming personality quiz
No: Skip to manual entry
Riot Login

Connect gaming account (optional)

Riot Verification

Validate gaming credentials

Voice Chat?
Yes: Enable voice communication
No: Text chat only
Add Interests

Select games and preferences

Verify Account

Email/phone confirmation

Choose Picture

Finalize profile photo

Agree & Submit

Accept terms and conditions

Write Bio

Create profile description

Home Page

Access main dashboard

Connect & Chat

Begin finding teammates

End

Onboarding complete

Wireframes

Get Started Screen

Get Started

Birthday Screen

Birthday

Gender Selection 1

Gender 1

Gender Selection 2

Gender 2

Profile Picture Selection

Profile Picture

Quiz Screen

Quiz

Verified Photo Screen

Verified Photo

Verify Photo Screen

Verify Photo

Verified Screen

Verified

Voice Chat Screen

Voice Chat

Chat Screen

Chat

Chat Option Screen

Chat Option

Chat Details Screen

Chat Details

Interest Selection

Interest

Name Input Screen

Name

Not Verified Screen

Not Verified

Profile Screen

Profile

Profile Menu Screen

Profile Menu

Email Password Screen

Email Password

Connect Menu 1

Connect Menu 1

Connect Menu 2

Connect Menu 2

Design System

PlayerMatch Design System

Buttons

Primary Actions:

• Get Started

• Continue with Google (Blue)

• Continue with Apple (Black)

Secondary Actions:

• Continue (Dark Gray)

• White/Outlined variants

Input Fields:

• Date inputs (DD/MM/YYYY)

• Text inputs with placeholders

Navigation & Menus

Bottom Navigation:

• 3-icon layout

• User profile, Connections, Chat

• Dark background with white icons

Menu Overlays:

• In Game Stats

• Interests/Gender/Voice

• Camera access

• Reason selector (Connect or)

Icons & Text Type

Icon Set:

• Google, Apple, Social icons

• Action icons (camera, lock, search)

• Communication icons (chat, voice)

• UI elements (checkmarks, arrows)

Font Family:

• Open Sans (Primary)

• Sans-serif typeface

Font Styles

Light Open Sans 18-23
Regular Open Sans 18-23
Medium Open Sans 18-23
Semi Bold Open Sans 18-23
Bold Open Sans 18-23
Extra Bold Open Sans 18-23

Colors

Menu and Buttons:

Black - Primary
White - Secondary

Status Colors:

Progress - Navy Blue
Stats Highlight - Yellow
Alert - Red

Characters & Logo

Visual Assets:

• Gemini 7 AI-generated characters

• Gaming-themed avatars

• Character illustrations for profiles

Brand Elements:

• PlayerMatch logo

• Character mascots

• Consistent visual style