Gameboy Advance+ User Interface

I am a great fan of classic handheld gaming, remembering the good old days when I was a kid and played Pokémon, Donkey Kong and Mario on my GameBoy Advance.

After experiencing the evolution of modern gaming, I was craving retro gaming so much that I bought a handheld emulator, in order to get a modernized version of retro gaming.

However, playing classic GBA games on my emulator made me wonder what it would look like if Nintendo released a more modernized classic GameBoy today – the GameBoy Advance+!

Tools used:

Figma
Adobe Photoshop
Adobe After Effects
Font Awesome (iconography)

Final Result

Image link

Goals / Objectives

A Classic, Reimagined
The original set of GameBoys (GameBoy, Color & Advance) are incredibly iconic. The GameBoy Advance+ was supposed to be the next step in what evolution the previous devices have gone through.
Modern Usability
Evolution in digital gaming has established new changes in how players use their devices. I wanted to include the classic cartridge-based plug-and-play usability and combine it with more modern methods of storing installed games, including an on-device store, etc.

Research

My reference was clear – classic vertical GameBoys, featuring the iconic layout of a display at the top, and buttons at the bottom.

As a device to put my mockups on, I took the Analogue Pocket as a reference, with its sleek and modern build and high-quality materials. I photoshopped the device a little bit to remove their branding and added my own custom branding onto it.

Image link
Image link

Inspiration

As the main inspiration for what I would imagine a modern, yet still retro and easy-to-use Nintendo handheld to look like, I took the Nintendo Switch user interface.

It is easy to use, has a clear layout and nice element designs.

Image link

Home Screen

Image link

I wanted the home screen of the GBA+ to be very straightforward, telling the player all information they might need:

A majority of the screen is taken up by the Cartridge Slot. This is to reinforce the idea that this is still a physical device first – it can take in the classic GameBoy Advance cartridges to play them. If the player has no cartridge inserted into their GBA+, a big prompt will encourage them to do so. Once a cartridge is inserted, a splash art will be prominently positioned at the top of the screen.

Below that is a wide button, directing the player into their Game Library. This is their collection of installed games.

At the bottom, there is a button for the on-device eStore where the player can purchase new games and content, as well as a button to view and modify settings of the device.

Game Library

Image link

The Game Library is a very important screen of the GBA+ in which the player can play their installed games.

It should be a simple, straight-forward list of their available games, launching any game with a simple button press.

eStore

The eStore is a new addition to this type of handheld device.

I did not want to create a screen that is too difficult to navigate, especially since the screen real estate is not very big, so I did not want to include smaller elements like buttons, images, texts, etc.

The layout of the landing page is very simple – one big image for a featured game, which could be a new release, a heavily discounted game, etc.

Below that are two menu options: Sale, which includes discounted games, as well as Catalogue, which allows the player to look at all available titles.

Once the player has found a game and selected it, they will be directed to a short and concise overview page, where they will get information about the game through a short summary, a handful of screenshots and an age rating. They will also be able to directly purchase the title from this screen.

Video Demonstration

Since static mockups can only convey so much of an idea, especially an interactive device as the GBA+, I wanted to hone my skills in After Effects and have worked on a handful of basic interaction videos which aim to demonstrate interactions, such as inserting a game cartridge and booting up the game, opening and navigating the Game Library, and charging the device with an on-screen charging notification, hinting at an elaborate notification popup system!

Conclusion

To conclude, I want to express how much fun I had with this exploration.

Looking at references has triggered my nostalgia hardcore and has allowed me to include some of my favorite childhood gaming memories and give them a new spin on the idea of a new device – the GameBoy Advance+!

Image link