Superjump Magazine
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 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 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.
About the project
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.
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.
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.
Date:
Oct 18, 2019
Client:
Superjump Magazine
While it might appear that these designs are screenshots of 'draw-overs', all the designs in these projects were created in Figma, from scratch. This was a massive challenge, but hugely rewarding and educational for myself. I hope you enjoy!
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.
Detailed Character Selection
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.
Selecting a character would open the full character grid, allowing the user to quickly swap characters in and out of their roster.
Detailed Character Selection
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.
Selecting a character would open the full character grid, allowing the user to quickly swap characters in and out of their roster.
Detailed Character Selection
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.
Selecting a character would open the full character grid, allowing the user to quickly swap characters in and out of their roster.
Stats-driven, Squad Based Selection
This variant of the selection screen game more detail, which was great for players looking for a more data-driven character selection experience.
However, it wasn't particularly readable on the Switch's small screen.
Stats-driven, Squad Based Selection
This variant of the selection screen game more detail, which was great for players looking for a more data-driven character selection experience.
However, it wasn't particularly readable on the Switch's small screen.
Stats-driven, Squad Based Selection
This variant of the selection screen game more detail, which was great for players looking for a more data-driven character selection experience.
However, it wasn't particularly readable on the Switch's small screen.
Character Details Screen
I added the same radar chart that I used on the character selection screen 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.
Character Details Screen
I added the same radar chart that I used on the character selection screen 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.
Character Details Screen
I added the same radar chart that I used on the character selection screen 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.
Upgrade Flow
In the original UI of the game, upgrading abilities would take you to a completely seperate flow. I felt that it would be helpful to be able to do this in-context, so I created an overlay-style UI that didn't take you away from the character details screen.
Upgrade Flow
In the original UI of the game, upgrading abilities would take you to a completely seperate flow. I felt that it would be helpful to be able to do this in-context, so I created an overlay-style UI that didn't take you away from the character details screen.
Upgrade Flow
In the original UI of the game, upgrading abilities would take you to a completely seperate flow. I felt that it would be helpful to be able to do this in-context, so I created an overlay-style UI that didn't take you away from the character details screen.
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.
Rather than create a single idea for this redesign, I decided to angle the article I was writing around trying many quick iterations - this reflected a more genuine UX design process, where quick iteration comes before final design. For that reason, you'll see a number of alternative designs below, rather than a deep dive into a single idea.
Player Favorites
My first concept simply added a 'Favorites' section to the side of the existing character select grid. This would allow a player to very quickly pick their frequently used characters.
This was limited, however - it wasn't clear how this UI would work in a multiplayer scenario (particularly 4-player), and would require some method or flow to flag favorites.
Player Favorites
My first concept simply added a 'Favorites' section to the side of the existing character select grid. This would allow a player to very quickly pick their frequently used characters.
This was limited, however - it wasn't clear how this UI would work in a multiplayer scenario (particularly 4-player), and would require some method or flow to flag favorites.
Player Favorites
My first concept simply added a 'Favorites' section to the side of the existing character select grid. This would allow a player to very quickly pick their frequently used characters.
This was limited, however - it wasn't clear how this UI would work in a multiplayer scenario (particularly 4-player), and would require some method or flow to flag favorites.
Filter by Franchise
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.
It did require that a player knew the various franchises, and was able to recognize them by their logo - a factor that would make the feature less useful to players who are new to Nintendo or the Smash Brothers' games.
Filter by Franchise
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.
It did require that a player knew the various franchises, and was able to recognize them by their logo - a factor that would make the feature less useful to players who are new to Nintendo or the Smash Brothers' games.
Filter by Franchise
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.
It did require that a player knew the various franchises, and was able to recognize them by their logo - a factor that would make the feature less useful to players who are new to Nintendo or the Smash Brothers' games.
Card Slider
One thing I really didn't like about the original character grid was that it didn't showcase the game's beautiful character art. I created two versions of a card slider that could showcase the game's artwork - one for a single player scenario, and another for when you're playing multiplayer.
Card Slider
One thing I really didn't like about the original character grid was that it didn't showcase the game's beautiful character art. I created two versions of a card slider that could showcase the game's artwork - one for a single player scenario, and another for when you're playing multiplayer.
Card Slider
One thing I really didn't like about the original character grid was that it didn't showcase the game's beautiful character art. I created two versions of a card slider that could showcase the game's artwork - one for a single player scenario, and another for when you're playing multiplayer.
Character Showcase
A negative of my card-based layout was that it didn't give you a great view of the full set of characters. Furthermore, with 74 characters in the game, you'd be scrolling a long time to see everybody.
This design showcases the artwork of the character, but still allows a user to see the whole grid. In theory, multiple players could still be supported by this screen, with their characters being added to the tableau in the middle of the screen as they select them.
Character Showcase
A negative of my card-based layout was that it didn't give you a great view of the full set of characters. Furthermore, with 74 characters in the game, you'd be scrolling a long time to see everybody.
This design showcases the artwork of the character, but still allows a user to see the whole grid. In theory, multiple players could still be supported by this screen, with their characters being added to the tableau in the middle of the screen as they select them.
Character Showcase
A negative of my card-based layout was that it didn't give you a great view of the full set of characters. Furthermore, with 74 characters in the game, you'd be scrolling a long time to see everybody.
This design showcases the artwork of the character, but still allows a user to see the whole grid. In theory, multiple players could still be supported by this screen, with their characters being added to the tableau in the middle of the screen as they select them.
EA Sports FIFA
My FIFA redesign was based around rethinking 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.
I spoke to a number of dedicated fans of the franchise, and gathered some thoughts on what they'd love to see in future editions of the game. Of those, I focused on three core features:
Creating players that feel Heroic
Managing and customising a Football Club
Heroic Players
The players I interviewed expressed that they really wished the game was more akin to modern RPG's, with the ability to really manage and manipulate your players' statistics, equipment, and skiills. They wanted an experience that allowed them to personalise and customise their players.
I began by working on a character customisation screen that would harken to those you might see in a role-playing game, but with a keen focus on keeping the football feel and FIFA aesthetic.
I wanted this to carry through to the in-game experience as well, so I built a UI that showed the players skills (and the status of other stars on the team) front and center, as well as a performance tracking chart and experience tracker.
Heroic Players
The players I interviewed expressed that they really wished the game was more akin to modern RPG's, with the ability to really manage and manipulate your players' statistics, equipment, and skiills. They wanted an experience that allowed them to personalise and customise their players.
I began by working on a character customisation screen that would harken to those you might see in a role-playing game, but with a keen focus on keeping the football feel and FIFA aesthetic.
I wanted this to carry through to the in-game experience as well, so I built a UI that showed the players skills (and the status of other stars on the team) front and center, as well as a performance tracking chart and experience tracker.
Heroic Players
The players I interviewed expressed that they really wished the game was more akin to modern RPG's, with the ability to really manage and manipulate your players' statistics, equipment, and skiills. They wanted an experience that allowed them to personalise and customise their players.
I began by working on a character customisation screen that would harken to those you might see in a role-playing game, but with a keen focus on keeping the football feel and FIFA aesthetic.
I wanted this to carry through to the in-game experience as well, so I built a UI that showed the players skills (and the status of other stars on the team) front and center, as well as a performance tracking chart and experience tracker.
Managing your Club
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.
Football is a global game, and I felt an RPG-style overworld could be a fun way to allow players to navigate the world and choose different challenges, tournaments, or missions to undertake.
(Interested in my 3D design skills? They've come a long way! Check out my GameCase project for examples)
Managing your Club
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.
Football is a global game, and I felt an RPG-style overworld could be a fun way to allow players to navigate the world and choose different challenges, tournaments, or missions to undertake.
(Interested in my 3D design skills? They've come a long way! Check out my GameCase project for examples)
Managing your Club
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.
Football is a global game, and I felt an RPG-style overworld could be a fun way to allow players to navigate the world and choose different challenges, tournaments, or missions to undertake.
(Interested in my 3D design skills? They've come a long way! Check out my GameCase project for examples)
While I'm not particularly active in my writing anymore, you can still see many of my articles on Medium.com - both those published for Superjump, and other writing outside of the publication.
I love Video Games, they're a real passion of mine - if you've got a project involving gaming or gamification, I'd love to chat!
