UX Weaver
August 2022 - October 2022

Game CollectionARy

We were challenged to use the principles of user-centered design to create a high-fidelity design for an augmented reality display in Figma. This design is made for the phone.

The Idea

I decided that I wanted to create an experience that incorporated one of my biggest hobbies: video games. It is from this mindset that led to the idea of an app that would allow users to bring their physical game collection into the digital world through the use of AR technology. Users would be able to scan the case of any of their video games, and the app would be able to recognize the game and add it to their virtual collection. If the user does not have the case, they would have the option to scan the cartridge or the disc. Once added to their collection, users would be able to sort their games by a variety of criteria such as by console, by original release date, alphabetical order, etc. Each game would have a short information screen that contains information about the game’s release date, developer/publisher, genre, and a brief description. Once they assemble their collections, users would be able to show their collections to others.

The Audience

This application was made for anyone who owns physical video games who desire a way to organize their collection in a virtual space. These people could be hardcore gamers who own hundreds upon hundreds of games for a variety of different consoles, more casual gamers who only own a select few games for one console, and everyone in between. It also appeals to people who wish to share their collections with their friends or show it off to the world. Since people of all ages play video games, the age range for the app is quite wide.

The Process

The Persona

The process of creating this experience began with creating a persona and journey map of the users to help gain an understanding of their needs. I created a persona that was meant to represent the average user of the application: someone with a moderate amount of experience with AR who wished to experience the satisfaction when creating their virtual game collection. The journey map reflected this user's feelings, describing the potential pain points that could be encountered in the process of adding a new game to their collection and viewing specific games. The scanning process had the potential to be janky or slow, so I had to make this process as simple and quick as possible. The process of finding a game had the potential to be difficult when the collection grows too large, which led to the idea of having a sorting system to ease the process. Creating these gave me insight on how to make the process as painless as possible to give the user the satisfying results they seek.

The User Interviews

The next course of action was to interview potential users of the application to gauge interest in the experience and its features. The users that were interviewed were all fans of video games, which helped ensure that their responses would be invaluable to the app’s development. I asked questions about what genres and consoles the users were most accustomed with as a means of gaining insight into what genres and consoles would be most important to add to the sorting options. All of the users stated that they would be interested in the app if it were to become a reality, showing that the idea was something that would likely be of interest to the target audience. They also confirmed that they would be interested in additional features like the sorting option and being able to share your collection with other people. This all went to confirm that this project could be a hit if it were properly fleshed out.

The Mockups

With the preparations completed, it was time to create the screen designs for Game CollectionARy. The color scheme for the app was kept minimalistic so that it would not be distracting to users, consisting of only a greenish-blue, an off-white, and an off-black. The scanning screen was designed to resemble the iPhone camera app, with the button resembling the camera button and the other scanning options being adjacent to the scan case option. When a scannable object is on screen, a border appears around it to indicate to the user that it is able to be scanned. This changes to a green highlight when the user begins to scan the object. On the collection screen, each game has its console, genre, and release year below its title which correlates to the different sorting options. The description screen includes additional information such as the publisher, series, and some screenshots. User testing was conducted on the initial iteration, but it went so well that very little had to be changed for the final iteration aside from some wording and color changes.

The Results

In the end, the final iteration of the Game CollectionARy application turned out quite well. It gives the users the ability to get a feel for what the full experience of the app would be like. It allows for users to go through the process of scanning a case, disc, and cartridge. It also lets users view a collection of games and make use of the sorting and search feature to make traversing it much easier. All of this is wrapped up in a simple interface with a clean color-scheme that makes the app user friendly and visually appealing at the same time. While the prototype doesn’t allow for users to scan in their own video game collections, it serves as a good basis for further expansion by developers who can make the vision a reality. In that sense, this project was a great success as the goal was to create a high-fidelity design for an AR display and this final iteration is just that. With proper development, this prototype could go on to be a great success among the gaming community, and that would not have been possible without this high-fidelity design and prototype.