GamePad: Game Inventory App

  • UX
  • UI
  • HTML
  • CSS
  • jQuery
  • Responsive
GamePad

View Live GitHub Repo

Games have always been an integral part of our culture, but video games have only recently attracted the accolades and scrutiny of their traditional media counterparts. As games have come of age, I've amassed a large collection spanning multiple generations and devices. Managing my collection has become a challenge.

Defining the Problem

With no centralized and easily accessible resources available, gamers are often overwhelmed by the manual, repetitive task of cataloging and organizing a growing collection. This can lead to problems like duplicate purchases, lost games, and paralysis when selecting a game to buy or play.

GamePad solves these problems by reducing the complexity of managing a game collection, offering automation and customizability through an intuitive and attractive user interface.

Discovering the Solution

With just two weeks to design the product, I had to get to work fast. As an avid gamer, I already have a number of insights into my users, their needs, and expectations. However, gaming attracts people of all ages and walks of life, so I was intent on doing some research.

User Research

I reached out to collectors within my sphere of influence via Twitter to ask which products they use to manage an inventory of their game collection. I selected individuals with large collections, especially those spanning multiple consoles. Next, I invited them for casual conversations via Skype about what they liked most about the products they chose, and how they would improve them if they could. Their responses would in turn frame my competitive analysis.

Competitive Analysis

Many of the same products were reported, but most were not tailored specifically to the task of managing a collection, bogged down by extraneous functionality and confusing interfaces. Most gamers lamented the lack of mobility these products offered, which further complicated their inventory process.

Strengths Weaknesses
Spreadsheet
  • Ubiquitous.
  • Free variants.
  • Formulas and sorting.
  • Charts and graphs.
  • Tedious.
  • Highly technical.
  • Not mobile friendly.
  • Not easily sharable.
Raptr, Steam
  • Social and shareable.
  • Automated collection capture.
  • Well known with many copycats.
  • Captures game progress.
  • Privacy concerns.
  • Confusing interface.
  • Not platform agnostic.
  • Limited mobile functionality.
Backloggery
  • Simple.
  • Social.
  • Customizable.
  • Gamified interface.
  • Tedious.
  • Dated interface.
  • Not mobile friendly.
  • Inactive community.

Design Process

With my research to guide me, I began to think about the requirements of my product. A mobile first, responsive design approach was ideal for the majority of my users, who are generally tech savvy. Many of them didn't care too much for the guess work of adding meta data to their games, so I designed GamePad to remove this part of the process.

Mood Board

I scoured design repositories to develop a mood board. Forsaking the typically masculine, dark, and moody design trends of game software, I aimed for a design that was more colorful and friendly, yet clean and minimal to help emphasize the star of the product, games.

Sketches

Once establishing a look and feel for the product, I began sketching low fidelity wireframes. In addition to loose sketches, I also begin thinking on paper, capturing concepts and ideas in writing.

GamePad User Flow

Wireframes

I create wireframes to help me solidify my concepts and better explain them to stakeholders and users. Working in Sketch 3, I began to consider some of the constraints inherent in my design strategy, as well as the hierarchical relationships between elements.

Game detail screen on a mobile device.

Mockups

In the same Sketch 3 document, I create high fidelity mockups.

Delivering the Solution

Using my mockups as a guide, I began coding the website in HTML5 and CSS3, using Sass and the Bourbon mixin library as a framework for my code. I also used jQuery to add a little interactive magic.

These tools make it really simple for me to get something up and running quickly and empower me to think ahead about the extensibility of the product well before additional features are accounted for.

You can view this product live, or check out the GitHub repository.