INDIVIDUAL PROJECT
GamCom.: Social Community for Gamers
OVERVIEW
Background
GamCom. is a part of a passion project I worked on over the summer. As both a gamer and a designer, it felt like
the perfect next fun venture for me to help me tap into the gaming industry. GamCom. introduces a fresh communication platform tailored for gamers, facilitating connections with fellow gamers and providing updates
on favorite games and streamers. Beyond mere networking, it expands the standard app for gamers to a bigger platform such as finding new players for competitive or casual gaming pursuits.
The Challenge
How can we facilitate connections among gamers beyond video gaming platforms, while also creating a versatile platform that accommodates the varied interests of gamers?
DURATION
3.5 Weeks Design Challenge
MY ROLE
User & Competitive Research
Experience Design
Prototype
Branding
TOOLS USED
Figma
Adobe Photoshop
Project Goals
-
Create features that enable gamers to connect and communicate with each other beyond gaming sessions.
-
Develop a platform that offers a range of functionalities catering to different gaming interests.
-
Ensure that the platform is user-friendly and intuitive, making it easy for gamers to navigate, communicate, and access relevant information.
Design Process
To address the challenge at hand, I structured my design process into five detailed steps.
Research
Solution
Ideate
Design
Test
Competitive research and user research / CJM.
The outcome derived from comprehensive research, including a UJM.
Branding and initial sketches of the UI direction.
UI development of the product, including low & high fi wires.
Create a prototype and gather input from users.
RESEARCH
Competitor Analysis
To start this project off, I researched existing communication and social networking apps, along with those designed specifically for gamers. Through this research, I aimed to pinpoint the strengths and weaknesses of these apps and assess their overall effectiveness.
GamerLink, E-Pal, Discord, Twitch, Reddit
In today's gaming landscape, the experience extends beyond simple gameplay. It's evolved into a social, commercial, and competitive aspiration. Gamers now rely on communication apps to connect with one another, stay informed, and discuss their favorite games.
Evaluating the Pros and Cons
Pros
-
Clear means of communication.
-
Convenient way to create or join servers.
-
Option to privately message & group message.
-
Offer security features.
Cons
-
Some of these apps present user limits, such as chat room limitations.
-
Discord - safety issues in large servers.
-
Reddit - overflowing with content, too distracting.
-
GamerLink / E-Pal - limited features.
Discord App
Reddit App
Twitch App
GamerLink App
E-Pal App
User Reseach
I conducted a survey with 15 participants to gain a direct insight on the targeted audience. Utilizing the gathered data, I created a user persona and journey map to depict the needs, aspirations, and motivations of gamers seeking a dedicated communication app.
Focus Questions ⬇️
1. How much time do you spend playing video games per week?
2. Would you like to have an online platform to communicate and connect with other gamers?
3. What is your primary motivation for using an online communication platform tailored for gamers?
4. Would you like to be able to create teams / groups to play your favorite video games with?
Let's take a look at the results
Now, Let's Define the User...
After collecting data from user research, I created a user persona with a supporting case scenario
Use Case
Johnny wants to create a new team to play World of Warcraft with and find dungeons. He uses the "Find Players" feature under the Teams tab and creates a new post searching for two new players who would want to join his and his friend's guild. When he creates this new post, he is able to select the region and platform for the video game.
To develop features that would satisfy the user...
I created a user journey map to depict the user's experience in this scenario, aiming to understand how they would engage with the application and its features.
SOLUTION
Final Solution
The decision was to create a mobile app that offers various interactive and discovery features tailored to gamers who enjoy making new friendships through gaming and are actively
seeking like-minded gaming partners.
This concept centers around the following key focuses:
-
Facilitate simple communication and interaction within the application.
-
Offer a discovery and feed function enabling users to stay informed on pertinent updates.
-
Design a visually intuitive section where users can readily discover new gaming partners.
-
Maintain a consistent layout to ensure a user-friendly experience.
Establishing the Foundation
Once the user's needs and solutions were identified, I created a user flowchart to visualize the experience.
Design Principles
Below are three design principles I chose to follow, based on my research, to make this project successful:
01
02
03
Building
Structure
Design
for Flexibility
Uncluttered
Sophisticated
Helping the users understand
by designing with clarity and
and consistency in mind
throughout the entire app.
Design to accommodate for differences among users and their preferences. This allows for various contexts of use.
The experience should be fun and relieving. Therefore, the information and design should be neat, clear, and concise.
IDEATE
Developing the Identity
This style guide establishes the groundwork for the UI of the app. The color palette is carefully chosen to enhance reliability and personalization: during my research phase, I observed that many gaming apps suffer from clutter and excessive advertising.
To do so, I used color psychology:
-
Shades of blue as the main background colors - known for its trust and dependability.
-
White and Grey for text - for simplicity, also representing completion and purity.
-
Shade of bright purple as the accent color - commonly known for its imagination and loyalty.
Primary
#181F2B
#2B3348
#32447D
#D1D3D4
#F1F0F0
Accent
#6C84D4
Iconography
Typography
DESIGN
Laying the Groundwork
Keeping my research findings in mind, I began visualizing the product and brainstorming the potential solutions outlined earlier. Beginning with pen-and-paper sketches, I transitioned to crafting low-fidelity wireframes, refining them based on user input.
I envisioned the interface in dark mode—inspired by my user survey indicating that most individuals spend over 10 hours weekly playing video games. Given their prolonged screen exposure, defaulting to dark mode enhances visual ergonomics, reducing eye strain.
FINAL EXPERIENCE
Introducing Gam.Com: Community for Gamers
Onboarding and Logging In
The onboarding screens feature a user-friendly design, fostering a warm and personal ambiance. Each header is complemented by clear call-to-action buttons, while images vividly showcase the app's offerings to prospective users.
The login screen maintains a minimalistic approach for swift user access. With two input fields for name and password, a confirmation button, and a highlighted "Help with Logging In" option, ensuring a straightforward navigation.
The primary navigation bar features four main tab options:
Feed Dynamic news feed displaying user-selected updates.
Teams Can manage existing teams, form new ones, or find new players.
Messages Chat with friends and join voice channels for group calls.
Stream Explore, follow, and discover global streamer content.
Feed
This page is centered around dynamic content generation, providing user-selected news and information based on collected user data and is neatly structured for easy navigation. Sections help users digest updates efficiently, while tabs offer quick content switching. The selected tab is highlighted for clarity.
Recapping Solutions:
-
Clear navigation system throughout the page.
-
A simple, yet informative, layout design to enhance experience.
-
Declutter information by separating content.
-
Hamburger menu for accessing additional features.
Teams and Find Players
The Teams page displays user teams and their match history. Users can easily toggle between teams and the find players page using the tab navigation. Content is organized in colored containers for ease of distinguishing important / relevant details, solving for the issue of cluttered information display.
Recapping Solutions:
-
Tab navigation selection buttons allow for easy navigation.
-
Content divided into containers to highlight key details and streamline the page.
-
Layout design accommodates the amount of information displayed on each page.
Messages and Notifications
The Messages section allows for convenient communication. Based on competitive research, apps like Discord are often used when gaming because they provide an easy way to communicate during or after games. Users can preview messages before opening them, and I included a voice channel feature which enable players to join group call rooms while playing.
Notifications are centralized for convenience, adopting a notification center model to accommodate all alerts in one place.
Recapping Solutions:
-
Convenient way to communicate within the app.
-
Messages show key info. - previewing messages before opening.
-
Clean and user-friendly layout design.
-
Notification center model for further convenience.
Livestream
This page adopts a layout similar to the feed page, ensuring consistency for a sense of control and familiarity. By incorporating both horizontal and vertical scrolling, it introduces dynamism to the visual journey, preventing long, excessive, scrolling . On the live stream video page, users can watch videos alongside comments, enhancing engagement with both the content and other GamCom users.
Recapping Solutions:
-
Consistent layout and spacing for user-friendly experience.
-
Dynamic visual journey guiding the user from point A to point B.
-
Promotes engagement with other users of the app.
Use Case Prototype: Searching for Players
Based on user research responses, the Find Players page was created to address the need for an easy and intuitive way for users to discover and connect with other players. This page, along with others in the app, maintains a consistent layout design to facilitate user interaction and enhance visual cues. By organizing content into segmented sections,
the page promotes readability and prioritizes information hierarchy.
Give the prototype a try! ⬇️
REFLECTION
Final Thoughts and Learnings
This was a passion project inspired by my own needs as a gamer. Drawing inspiration from platforms like Discord, Twitch, and GamerLink, I aimed to elevate the user experience with a new application. Given the project's accelerated pace, I prioritized efficiency in both research and development phases. I effectively crafted and followed a strategy, enabling me to adapt to faster timelines while maintaining productivity.
One major lesson learned from this project was the importance of designing for clarity and simplicity. Through competitive research, it became evident that many gaming apps tend to overwhelm users with excessive information and cluttered interfaces. Therefore, a primary focus of this project was to create a clean, streamlined design that remained informative, supportive, and user-friendly. This involved maintaining a consistent layout across all pages, using grids, and ensuring proper spacing and grouping of elements. The outcome was encouraging, as potential users expressed positive feedback and indicated their interest in the app.
