Image for post
Image for post

Games UX: Marvel Ultimate Alliance 3

Exploring the design behind character selection, hero profiles, and catering for handheld mode

Chris Bam Harrison
Aug 18, 2019 · 10 min read

So, this whole Marvel thing is getting pretty popular, right? I hear that Endgame movie did relatively well. People seem to really like that Tony Stank character.

Well, in truth, I’m a massive Marvel fan, so the news that we were finally getting another Ultimate Alliance game was extremely exciting to me. After all, the last Ultimate Alliance game was released in 2009. 2009!

If you’re not familiar with the game, feel free to watch the E3 reveal trailer:

If you hate videos and/or fun, then I will explain the game to you very quickly: Marvel Ultimate Alliance 3: The Black Order (MUA3) is a four-player cooperative beat-em-up game. You form a team of heroes from Marvel’s popular superhero franchises, including the Avengers, X-Men, Guardians of the Galaxy, and …Elsa Bloodstone?

Since we’re going to spend the rest of the article talking UX, let me just get my review out of the way really quick: It’s a solid 7/10 game that dropped 3 points for not having War Machine.

Now, let’s look at some screens already…

Image for post
Image for post

MUA3 is actually a pretty UI-heavy game, with tons of menus to manage your heroes and upgrades. Since the most important part of the game is picking your team, I’m going to focus on the UI that helps you do that.

By the way, if you’re worried about spoilers, I am going to show you many of the unlockable characters in the game. You have been warned!

Character selection

Let’s start with the character selection screen. Here, you pick your four favourite team members to go and do battle.

There’s actually quite a lot going on here; the team bonuses up the top, and then a ton of button prompts down the bottom. When you pick characters that have some connection in the Marvel universe — for example: ‘Avengers’, ‘X-Men’, ‘Web Warriors’, and ‘Women of Marvel’ — your whole team receives a small buff. The more connections you have, the more buffs you have. That’s what you’re seeing appear at the top of the screen in this image:

Image for post
Image for post

The culmination of those bonuses is what you’re seeing in the top left under ‘Team Bonus’. You can also see these bonuses by hitting LT, which brings up an overlay showing what matches you have in your squad:

So far, so good! Overall, I think this UI works pretty well. That being said, building a really strong team can be tricky in this UI, because you really have to know your Marvel lore. I consider myself pretty well versed in the Marvelverse, but even I was surprised by a few of them— Deadpool having the Villains trait, for example.

I decided that I’d try to come up with a new UI that made it easier to build teams with high synergies. While I’m at it, I also wanted to build something that actually showcased your buffs and benefits better than just the icons with percent values.

Let’s see the result:

Okay, okay. I got a little carried away. There is way too much going on here. But let me break it down anyway:

  • I’ve given way more room over to the heroes you’ve selected. To handle more heroes, I’d paginate or simply resize the portraits on the left.
  • The profiles on the right now show what groups the hero is a part of, how many of those are on your team (The stars), and also what abilities they have. The abilities themselves are what determines if a ‘synergy attack’ is available in-game, so this is important for really maximising damage.
  • At the bottom of the character list, the group bonuses are listed. I thought it would be cool if getting a 4/4 group gave you a unique bonus, so you can see that in there. Sadly, not an actual part of the game.
  • I put together a radar chart similar to what you see in the character panel (we’ll look at this later) to show you where your team’s strengths are.

It’s fine, really. Very dense, though. The real problem comes when you look at it like this:

Image for post
Image for post
Mr. Stark, I don’t feel so good.

Now, obviously, you’re going to hold the Switch closer to your face. But even at point-blank range, this just sucks to try and digest as a user. I think the ideas here are okay, but let’s find a way to bring the cognitive load down and make something that’s still useful without being a nightmare for readability.

I went back to the drawing board and aimed at building something easy to read and with useful, simplified information. Here’s the result:

Character grid? Gone. Enormous chunks of text? Gone. Over-engineered radar chart? Still here.

And before anyone asks, yes you can change characters. I wanted to see if I could use the real estate usually reserved by the character grid in a more interesting way:

Image for post
Image for post
The grid appears in on top of the player slot, so if you’re playing with four players, this UI still works.

That being said, I’ll be the first to admit that not having the big honking roster to select from is actually kind of a bummer with this layout.

The biggest change I’ve made is the new character cards. The idea behind these is to encapsulate all the information you’d need to build a good team. I drilled this down to level, ability types, and teams they’re a part of.

The team icons in the top right are fun in theory, but I cheated a little bit here. The challenge with those would be accommodating the more abstract teams that don’t have their own logos (‘Agile Fighters’ for example).

The panel at the bottom now tells you what bonuses you’re getting from your squad synergies, but this is also a little flawed, as it only shows 3. You can have anywhere between 5–10 in the actual game, so this is another thing I’d need to fix up — probably by adding a button to view the whole list.

I actually like the radar chart in this layout. But maybe it’s just because it took a long time to make, and I’m not ready to let go of it.

I also added some basic functions to save and load teams, something I think the game is really lacking:

Image for post
Image for post
The software I’m using only takes mouse input, so let’s all pretend we didn’t see that.

Saving a team is, well, exactly what you think it would be. Pop in a name and save it to a list to load up later.

Image for post
Image for post
Mouse? What mouse.

I added a ‘Suggested teams’ section to this menu because I thought it would be a nice way to help more casual players find synergistic teams without them requiring to know if Psylocke counts as X-Men, or X-Force, or X-whatever.

I really like these changes, but I admit that losing the big character grid really takes something away from the feel of the game.

Anyway, let’s move on!

Hero profiles

As you’re progressing through the game you unlock new heroes. Both new and previously-acquired heroes will unlock new abilities as they level up. In addition, there’s a type of item drop called ISO-8, which can be slotted into heroes to add percentage buffs to various stats.

The way this is managed in-game is via a set of three screens; one for abilities, one for the character’s core stats summary, and another for managing and slotting the ISO-8 upgrades. You can see these below:

Image for post
Image for post
If you didn’t know Magneto was an unlockable character in this game, well…surprise!?

This works relatively well from a user experience point of view: you select a character and use the bumpers to move between these three menus depending on what you want to do. My only problems really are the following:

  • Certain functions are only available from certain screens (Using an XP Cube, for example)
  • Some of the information is repeated for no particular reason; your ability ranks, for example, or your ISO-8 slots.

To fix this, I want to see if I can fit all the functions and features of these three screens onto one screen, probably using a series of menus/overlays to keep the cognitive load low. Let’s see how we did:

Three hours later…

Essentially what I’ve done is taken everything on that second page, and pushed it into a pop-out panel. I did this because it removes the need for a second full-screen menu, and also requires fewer button presses to do a quick skill upgrade.

There are a few pieces missing, though. You can’t see ability ranks when the menu is open, and you can’t see how much AP or how many Ability Orbs you have to use on upgrades. There’s room on the panel for those to be added, though — I don’t think it’s a big issue.

You could also do this for the ISO-8 menu and get similar sweet, sweet savings on how long it takes to complete tasks.

I was a bit concerned that this compact design wouldn’t look good on a portable screen, however. Take a look at my design versus the original below:

Image for post
Image for post
The top is my version, the bottom is the actual game, for those playing at home.

It’s important to note here that for the sake of this article, I’ve made sure both designs have the same text sizes, so readability should be about the same.

I think the original design has much more visual impact, mainly due to the hero artwork and the cool space background behind the abilities. That being said, I actually think my version is slightly more readable on account to there being far less visual clutter overall. Either way, I’ll let you be the judge.

Designing for the small screen

This study took far, far longer than I expected. Designing for different platforms all have their issues. For consoles, it’s TV safe zones and resolutions. On PC, it’s mixed aspect ratios and complex hardware configurations.

As a UX designer that primarily works with app software, I’m accustomed to working on small screens. The challenge with the Switch is that you’re essentially designing for both; designs have to look good on a big screen, but still stay readable and easy to use on the small screen.

By really digging into the various UI’s and menus of Ultimate Alliance 3 it quickly became clear that this is something the team put a lot of care into. It’s also clear that they made a number of concessions to make this work. Menus are sometimes more complex or cumbersome, but it’s only when you’re trying to ‘fix’ that problem that you realize they’ve built it that way to work well on the Switch’s unique form factor.

Image for post
Image for post
Picture was taken by Reddit user AlleyCatBiker. That text on the bottom MIGHT be too small.

I’ve recently finished playing through Dragon Quest Builders 2, and I’m about 20 hours into Fire Emblem: 3 Houses. Both of those games are rife with issues around accessibility and usability when being used in hand-held mode. I’ve included a great example of this by Reddit user AlleyCatBiker.

It’s clear these games were designed with TV’s as the primary viewing method, with handheld taking a backseat. What’s worse, there are no text sizing options to adjust this.

Good UX always considers the way in which the user consumes the product, and while Three Houses really drops the ball, Ultimate Alliance 3 actually kills it in this department — for the most part.

The core mission of these articles has never been to ‘fix’ the UI of video games. I’m not qualified to do that, and very rarely is a UI ever ‘broken’. Rather, the purpose is to explore game UX, and understand the choices developers make.

Image for post
Image for post

In that spirit, I don’t necessarily think the designs I’ve put forward in this article are an improvement. They’re simply a method of exploring and understanding the work that’s been done. With that in mind, I hope you’ve enjoyed this dive into Ultimate Alliance 3: The Black Order. Let me know in the comments if there are games you’d like to see us take a look at, or if there are any ideas of your own you think would make a significant improvement!

SUPERJUMP

Celebrating video games and their creators

Thanks to Meredith Hall, James Burns, and Michael Harrison

Chris Bam Harrison

Written by

UX Designer at ME Bank. I talk a lot about design, design tools, and video games. Always looking for ways to sneak soccer into conversations, too.

SUPERJUMP

SUPERJUMP

Celebrating video games and their creators

Chris Bam Harrison

Written by

UX Designer at ME Bank. I talk a lot about design, design tools, and video games. Always looking for ways to sneak soccer into conversations, too.

SUPERJUMP

SUPERJUMP

Celebrating video games and their creators

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store