Chris Harrison
UX Designer at ME Bank
Made with

Take two.

I've always liked the idea of an app to help keep track of upcoming games releases, as well as your own personal library. I'd taken an attempt in designing one a few years prior with GameTrack, but the project hadn't really gone anywhere.

In 2018, a developer colleague and I decided to give it another shot. My technical ability had come a long way since then, and the initial experiment with GameTrack had given me a number of insights into how the app could best be used.

With a new team and a fresh perspective, I decided to go again. This time, we called it GameCase.

USER ONBOARDING
Onboarding was quick and simple.

Onboarding was quick and simple.

A warm welcome.

User onboarding can often descend into a maze of input fields designed to pull as much user data as possible. For GameCase, I wanted to get the user to the core experience as quickly as possible but still wanted enough information to make sure the information I was displaying for them was relevant.

To this end, I designed the onboarding journey to quickly gather a few key points of information, centered around what the user was interested in.

The day that I realised blue ink makes my sketches look like blueprints was a big day.

The day that I realised blue ink makes my sketches look like blueprints was a big day.

Concept work.

It would have been easy to simply do a visual refresh of GameTrack for this project, but I wanted to start with a blank slate and really leverage the lessons I'd learned.

To this end, I began the project by sketching out user flows and screen layouts, and then running these by a few lucky test participants in my office. This gave me some quick rapid feedback around what might work and what might need revision.

Basic map of how the first-time user experience might be mapped.

Basic map of how the first-time user experience might be mapped.

GameCase

Personalizing the experience.

Early test participants indicated that they'd really like to customize the app to suit their preferences. This made sense - it's their collection, and so it should really feel like their collection.

We designed the app from the ground up to have customizable options, including a set of color palettes the user can choose from. 

While a feature like this would normally not be something you'd consider for an early iteration, we wanted to make sure that it was built into the DNA of the app, and considered every step of the way.

GameCase

Branding.

I had a theory that the branding needs to align closely with the branding styles you'd see with gaming consoles and brands, and this proved true when we took some of these designs to test.

The final color palette is a combination of the colors you'll find present in Sony, Microsoft, and Nintendo's brands, but pushed toward a more pastel-style saturation to align with a futuristic, clean look.

GameCase

The tech.

We used the IGDB API's to populate our app's content. We chose IGDB because they were able to provide all the primary information that users told us was most important, including review scores, ratings, and compatible platforms.

GameCase

Visual foundations.

To get us to version 1.0 quickly, I built the first few screens of the app based on the Toxin UI kit from Metro. We dropped this kit later as the app matured, but starting with a basis allowed us to find our visual identity quicker and begin development immediately.

GameCase

Icons, icons, icons.

Glyphs and icons were a huge part of the visual design language of the app, and I wanted a set of iconography that was distinct, clear, and had a near-future feel.

Feather icons by @colebemis fit the brief perfectly. I designed a number of additional icons for the set that fit the style, also.

GameCase

High-fidelity designs.

We leveraged the colourful artwork of the games on the main screen, as a way to draw user interest and build excitement. On screens that were more data-driven, we kept a clean, high-contrast visual aesthetic to maintain accessibility and readability.

GameCase

Dark Mode+

Our goal of keeping the app fully customizable was still front of mind, and multiple color palettes, including dark mode, were fully available from the start.

GameCase

Integrating news.

As we got further along in development, we got feedback from testers that they'd love to be able to see gaming news in the app. We built a news ticker that integrated with popular gaming news sites to provide this.

GameCase

Keeping it relevant.

The biggest point of frustration we were seeing from users was scrolling through games that weren't relevant to them. This was almost always because the game wasn't available on their platform.

To solve this issue, we added the ability for users to filter exactly what platforms they're interested in when viewing the app.

GameCase

Final results.

In the three months or so that we developed GameCase, we had a fully functional app that leveraged live data and allowed customers to quickly and easily discover new games, browse the news, and track their game collection.

More importantly, the opportunity to quickly test and iterate the app really helped us refine the app as we went and our final product aligned strongly to all the features that users had identified were most important to them.

Unfortunately, the database service we were using for GameCase was acquired and no longer provides a public API, so it's not currently possible to download. That being said, if you're really keen, I'm sure I've got a build laying around here somewhere...