Mingda Tang
Digital Product Designer
shadow-mockup.png

YourGamePal - Video Game Tracking Mobile App

Designing a mobile experience that allows gamers to track their video game library and progress in the palm of their hands.

 

YourGamePal - Video Game Tracking Mobile Application

 
 
Down-Arrow-PNG.png
 
 
 

Video games have become arguably the most popular form of digital entertainment. There are now countless games in a variety of genres and platforms that gamers can enjoy, but it has become increasingly overwhelming for them to track their games and their progress individually.

I have designed a centralized mobile app that would allow gamers to automatically and manually import their complete game library and track their progress in each game right in the palm of their hands.

 
 
 
Down-Arrow-PNG.png
 
 
 
 
 

Real-World Problem

From personal experience and frequent discussions with friends, I realized that some dedicated gamers want a centralized application to keep track of their video game libraries and statistics.

These gamers juggle between multiple games at once and/or have a growing backlog of games, which frustrates them as new games release.

 

Design Solution

My main goal is to design a mobile app to supplement many gamers' needs, including being able to track game-play hours, allow them to compete and compare themselves with friends, and manage hours spent on each game. This app would improve the quality of gamers' user experience because they can manage their game library and progress more easily than before.

 

My Roles

User Experience Designer and Researcher

School project -> expanded to personal project

Tools

  • InVision

  • Sketch

  • Adobe Illustrator

  • Principle

 
 
 

Competitive Analysis

Before designing the app, I wanted to identify the competitors that already exist in this market. I researched five other products that offer related and similar features for gamers, which allows me to pinpoint the features that my app should include.

 
How Long To Beat - HLTB Completionator The Backloggery Grouvee My Game Collection Mobile App
Account/Profile Yes. Required, but website still can be used without logging in. Users can view the games in their backlog and set playthroughs for specific games. Yes. Required, but website still can be used without logging in. Users can view the games in their backlog and set playthroughs and missions for specific games. There is also a chat feature on user profiles where other users can leave comments. Yes. Required to use any features. Users can create unique profiles and showcase their gaming backlogs. Yes. Required, but website still can be used without logging in. No need to create an account. Data is saved on the device.
Forum/Community Yes. There is an active forum with members discussing specific video games and giving site feedback. There is also an off-topic section. Yes. There is an active forum with members discussing video games in general, video game collecting, and giving site feedback. There is also an off-topic section. No. Yes. There is an active forum with members discussing specific video games in their backlog and Grouvee's own gaming podcast. There is also an off-topic section. Yes, but the app links to a Reddit subreddit for any discussions.
Browse Games Yes. Users can search through thousands of games from different platforms with different search parameters. Users can also search for their Steam Profile to see how long it would take to beat their game collection. Yes. Users can search through games with search parameters. Users cannot search through games. They only can manually add their games by typing in the title and choosing the platform. Yes, but users cannot search with specific search parameters. Yes. Users can search through a collection of games and are able to import their game backlog from their Steam profile, PlayStation 4 account, Xbox One account, and more.
Friends and Leaderboards Yes. Users can add community users as friends and view users' and friends' stats. Yes. Users can add community users as friends and view users' and friends' stats. Yes. Users can use the Multitap feature to stay updated on friends' progress on games. However, there are no leaderboards. Yes.. Users can add community users as friends and view users' and friends' stats. Yes, but users must manually add friends by first/last names, location. This friends list is primarily used to keep track of game and hardware loans from friends.
Specific Game Information Yes. Each game has an overview that describes what the game is, its developer, publisher, and the length of the game and its DLCs and expansions. Yes. Similar compared to HLTB, plus user's progress can be compared with other users and friends. No by default. Each game is manually added so no information is available except for the game's platform. Yes. Each game has an overview that describes what the game is, its developer, publisher, and users can submit reviews of the game for others to read. None.
Advertisement/Premium Version No advertisements and no premium version. Can donate. No ads and no premium version. Nowhere to donate. No ads and no premium version. Nowhere to donate, but there is a contact form. There are banner ads and there is also a Grouvee Gold membership that removes those ads, access to giveaways, and other benefits. $10 a year. There are ads along with a premium version that removes ads, allow for Dropbox and Google Drive support, and more features.
 
 

Conducting User Interviews

 
 

To design an app that would actually solve these real-world problems that many gamers face, I interviewed 10 individuals who I consider as dedicated gamers. Most of the interviewees are my close connections. The interviews are semi-structured and lasted for about 20 to 30 minutes.

 
 
 

Designing User Personas

Through analyzing my interview notes, I noticed two distinct categories of interviewees that cover most of the use cases for the app, which I used to create the user personas below.

 
 
pexels-photo-415829.jpeg
 

James, 20, College Junior

Bio

James is a third-year college student at the University of Michigan majoring in Computer Science. He owns over 200 games on PC, PlayStation 4, and Xbox One and currently has over 130 unfinished games that he plans to complete in the near future. Unfortunately, he has no concrete or efficient plan to do so.

Goals

  1. Seeks a methodical plan in completing his currently in-progress games on multiple platforms.

  2. Hopes to find a way to easily track completion rate and achievements in each game and use walk-through videos all in one place to complete the games in a shorter amount of time.

 
pexels-photo-415829.jpeg
 

Scarlett, 22, Recent College Graduate

Bio

Scarlett is a recent graduate of the University of Michigan School of Information. Having secured a well-suited job in Ann Arbor, she now has more free time to explore potential pastimes. Her younger brother is an avid gamer, which has peaked her curiosity in video games. She is very unorganized and has a hard time deciding which game to play in her growing game library on PC, PlayStation 4, and Switch.

Goals

  1. Wants to get into video games but is looking for a more efficient way to track her own progress through multiple games

  2. Wants a way to track game progress while not gaming (ex: while on her way back home from work)

 

 
 

Wireframing and Prototyping

Based on patterns I noticed in my research, I wireframed out a few ideas using Sketch.

I also created a interaction map diagram to understand what I need to include in my application design.

 
 
 
 
 
 
 

To build upon the wireframe, I created higher visual-quality mockups.

 
 
 

Iteration and Feedback

One of the largest issues with my first round of high fidelity mockups was with having too many unnecessary screens, options, and inconsistent organization that would have been confusing for users.

 
 
 

Based on the feedback I received, my prototype went through a few more iterations.

 
 
 

Style Guide

 

Roboto
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz

Heading level one 18
Heading level two 16
Body text 14

 #F0F0F0

#F0F0F0

13.png

Boxes/circle shadow - X 0.5, Y 0.5, blur 1

Font Style - Regular / Font Sizes 14, 16

 Search Bar / Font Style - Regular / Font Sizes 24

Search Bar / Font Style - Regular / Font Sizes 24

 Two-tab Segmented Control  Font Style - Regular / Font Size 18

Two-tab Segmented Control

Font Style - Regular / Font Size 18

 #D6ABAB

#D6ABAB

Font Style - Regular and Thin / Font Sizes 16, 18

 Flat button - no shadow

Flat button - no shadow

 Font Style - Regular / Font Size 14

Font Style - Regular / Font Size 14

 Two-tab Segmented Control  Font Style - Regular / Font Size 15

Two-tab Segmented Control

Font Style - Regular / Font Size 15

 
 
 
 

Final Deliverable

The final visual theme ended up integrating a monochromatic color scheme with black and white text, giving off a playful vibe.

 
 
 
 
 
 

When users first log in to their new account, they are asked which gaming systems they play on. Theoretically, it would automatically link their game library information from those systems to this app.

A picture of Hideo Kojima, the acclaimed video game designer of the Metal Gear Solid series, is used on the right screen. His photo is used to bring a sense of familiarity to gamers, as he is very recognizable by them.

 
 
 
 
 
 

They can then view lists of games they are currently playing or have already completed. The scrolling animation is created using Principle.

There are four tabs available for a specific game that tailor to users' needs:

  1. Overview with basic information about the game, including release date and Metacritic scores.

  2. Awards and achievements for that game (Ex: Trophies for PlayStation 4)

  3. Guides if they get stuck on a particular mission.

  4. Statistics of their in-game progress.

 
 
 
 

In the main menu, users can:

  • Message friends via the friends list

  • View their own profile

  • View the most popular/played games on the leaderboards

  • Search games and friends

  • Adjust application settings

They can also log out if they'd like.

 
 
 

Interactive Prototype

Click below to begin!

What I Learned

Sometimes, assumptions have to be made when designing.

Hypothetically, this mobile app would have to earn the approval of many companies, including Microsoft, Sony, and Nintendo, in order to be officially developed and released to market. Access to users’ game library and statistics would have to be given to the app. Without this assumption, however, this app would not be possible.

This made me realize that assumptions would sometimes have to made in a design project because many aspects may be uncertain for a period of time, including approval from developers or a project lead for some design decisions.