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.
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.
Hey gamers, what do you use to keep track of your collection? Do you keep a manual inventory, or do you use software (e.g. Excel, Raptr)?— Gynesis (@gynesys) October 27, 2014
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.
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.
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.
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.
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.
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.