Ballistic

A marketplace for the modern gamer.

Product summary

As the video game industry continues to flourish and target an exponentially increasing adult market, video game users need an all-in-one mobile marketplace app to fulfill their diverse gaming needs. Ballistic enables users to learn more about the video game industry, customize their preferences, and download games to various platform accounts easily.

Getting up to speed

Shortly after the US declared Covid-19 to be a public health emergency, I read that Italy had experienced an increase of more than 70% in internet traffic with the primary contribution being from online games such as Fortnite and Call of Duty. This inspired me to do a little research. I discovered that the video game industry had reached an all-time high since the Covid-19 lockdown. In the US, the gaming internet traffic went up 75% and the video game streaming service Twitch experienced a 20% increase in consumed content. As someone who barely plays video games, I found this to be an interesting market to explore.

Problem – The struggle is real

Through some initial interviews with several avid game lovers, I was able to determine a few common frustrations:

1. It’s difficult to discover and learn about games a person may enjoy based on their preferences.

2. Gaming news apps for mobile devices are cumbersome and not properly marketed to their target audience.

3. It’s inconvenient and time-consuming for multi-platform game lovers to browse and download games on various marketplace apps.

Vision – Crafting the solution

After having those initial conversations, I was able to narrow down my vision to three simple goals:

1. Design a mobile app that enables users to discover and download games to a specific account or device.

2. Design a mobile app that enables users to read articles related to games and the industry.

3. By using Apple’s Human Interface Guidelines, design a mobile app that is aesthetically pleasing and engaging for target users.

User survey – Gathering data

While it was important to find out what types of games game-lovers were using and what competing apps they were engaging with, the main goal of the survey was to determine potential user stories for the app. To do this, I asked 40 game-loving participants to rate the importance of twelve potential features on a scale of 1 to 5. Here were the six top-rated features:

Competitive analysis

Based on my interviews, market research, and user survey, it was clear that the three main mobile platforms worth analyzing were Steam, IGN, and Apple Arcade. While I did a thorough competitive analysis of each of these platforms, here is a comprehensive SWOT analysis of each application.

Stories & flows – The MVP

After gathering this research on the market, it was time for me to start defining the scope and develop the minimum viable product. I narrowed down a list of user stories and organized them by high, medium, and low-priority features. From here, using Draw.io, I created user flows that visually captured the necessary steps involved with completing each individual user story.

Wireframes – Piecing it together

After creating some rough sketches to assist with the basic structure and layout of the content, I imported my concepts into Figma to create some low-fidelity wireframes. I proceeded to create iterations on my ideas until I was happy with the basic structure of the app.

Usability testing – Round 1

Using Figma’s built-in prototyping tool, I made my wireframes clickable so I could test the usability of my user flows. With three potential users, I tested their ability to:

• Create a new account

• Search for a game

• Locate the reviews for the game

• Purchase the game

• Save an article to their saved stories

While none of the participants struggled with these basic tasks, there was one thing that didn’t provide as much value as I originally thought it would. This was the feature that allowed users to change which platform they were shopping for on the store page. The horizontal scrolling for this feature seemed to be more cumbersome than convenient and I determined that a simple drop-down menu would remedy this issue by defaulting to the users’ interests.

Branding – Content conscious

In order to confidently define the branding for this app, it was essential for me to get an idea of what the content would look like. Because I knew that the content was going to be very stimulating and engaging, I knew that if I wasn’t careful, the app could end up looking like the Disney channel on an LSD trip. I wanted the app to be a neutral canvas that doesn’t distract, but instead compliment the engaging content.

Branding – Color palette

The loud content led me to be inspired by apps like the Apple App store, Medium, Apple News, and Spotify. This is where I found validation in creating a white and black, light and dark mode themed app. After trying variations of light and dark mode, I determined that for maximum legibility and comfort, light mode should incorporate a pure white background with off-black text. Conversely, dark mode should incorporate a pure black background with off-white text.

Branding – Logo

After locking down the name Ballistic, I explored various logo ideas. The logo needed to be:

• Playful, but not silly

• Engaging, but not loud

• Clean, but not cold

Branding – Fonts

For the main logo font, I decided to use Montserrat Alternates. I found that it captured the energy that was in line with the branding goals. I loved the roundness of the letters and particularly appreciated the shape of the a, l, and i in the name Ballistic.

Regarding the font for the main content of the app, I chose Montserrat. It’s clean and professional while it’s extra wide y-axis contributes to its legibility and audience engagement.

Montserrat Alternates

Montserrat

High-fidelity mockups

Now that I had the visual characteristics defined, I created the first iteration of high-fidelity mockups. Once I felt I had a solid foundation, I was eager to conduct my second round of usability testing.

Usability testing – Round 2

Again, using Figma’s built-in prototyping feature, I turned my screens into a high fidelity clickable prototype. With three new game-loving participants, I tested their ability to:

• Create a new account

• Search for a game

• Locate the reviews for the game

• Purchase the game

• Save an article to their saved stories

Given that participants were able to complete these tasks from my wireframe testing easily, I had four main goals for this second round of testing.

What went well?

What failed?

The joystick icon in the tab bar was a huge failure. While I wanted to do something fun and unique to indicate the game marketplace, it was immediately clear that I had taken it too far and needed to utilize a standard icon commonly associated with shopping. I was inspired by Nintendo’s interface to use a shopping bag icon.

What was missing?

It became clear to me during this round of testing that users should be able to purchase a game without having to select the game. The purchase button needed to be underneath the title of the game in the marketplace. Additionally, all participants indicated that they would expect to see the game’s rating without having to select the game.

Conclusion

Through my research and design process, I feel I was able to successfully craft a solution that empowers target users to accomplish their goals:

• Purchase and download games for various gaming platforms

• Discover new games based on the user’s preferences

• Read relevant articles related to the gaming industry

• View game ratings and reviews

This project taught me the importance of leaning on established design patterns. In order to recruit users, it’s important to understand what they anticipate based on their past experiences.