UX DEsign

Video Game UX

A Superjump Magazine Featurette

Taking Video Games seriously

In early 2019, I was engaged by Superjump Magazine to write a series of articles about the user interface and experience in video games. They felt - and I agreed - that UX Designers might have a lot to learn from how complex games manage their user experience.

In studying this topic, I felt that the best way to talk about these interfaces was to in fact reverse-engineer them. In doing so, I could talk through redesigning each UI, telling the story of what works, what doesn't, and how these techniques and principles apply outside of video games.

Note that the screens included in this case study are all created by me - they're often remixed from the original UI elements of the game, but each was painstakingly recreated from scratch in order to really immerse myself in the design, and tell a compelling story of it's creation.

Projects included in this case study:

FIFA Adventure

Marvel Ultimate Alliance

Super Smash Bros.

FIFA

My FIFA redesign was based around career mode. I wanted to redesign the experience to be akin to those you'd find in many open world games, and bring in adventure elements.
For this map element, I wanted a design that mirrors many open world games. A world map, filled with quests, and noting many of the players' objectives.
Since I was aiming for an adventure-style UI, it felt natural to include a character customisation screen.
I felt that part of the adventure would also be managing your club and it's facilities. There was no precedence for this in the game, so I used my nascent 3D skills to create the graphics themselves.
I redesigned the first-person UI to show player skills, objectives, and additional indicators of your team mates.

Marvel: Ultimate Alliance

Marvel: Ultimate Alliance 3 was a very popular, successful game upon it's release. However, it's UI left a little to be desired. I wanted to create a UX that gave the player more information, while still giving a fair amount of real estate to the character art.
The original character selection screen didn't provide information about your team's abilities or synergies. I introduced an element to show characters who would grant team buffs, and a radar chart to summarise your team's stats.
This variant of the selection screen game more detail, however it wasn't particularly readable on the Switch's small screen.
I included the same radar chart into the character screens, along with summaries of their abilities, stats, and the players' currencies. This level of information helped the player make important choices without having to leave this flow to check stats and currencies.
The upgrade flow in the original game was in a completely different part of the UI, so I included animated overlays to allow the customer to upgrade their abilities without leaving the character screens.
View the article on medium

Super Smash Brothers Ultimate

Super Smash Brothers: Ultimate had a major issue when it came to character selection. The characters - of which there are 74 - are sorted in an arbitrary order, making it extremely difficult for new players to find the character they'd like to play as. I decided to explore how the UI could be modified to make it easier for players to find the characters they're looking for.
This approach used filters to help narrow down the characters that are presented to the player. This is helpful to players who already know who they want, and just want to find that character quickly.
This design allowed players to favorite their preferred characters so they can quickly choose them the next time.
I liked the idea of this card layout, but it didn't allow for multiple players to choose characters at the same time.
A redesign of the card layout that allows for multiple players to be making their selection at the same time.
I also liked the idea of a MOBA style selection screen, however it didn't solve any of the problems I'd set out to solve. It was fun, though!
View the article on medium
Return to UX Case Studies