Apex Legends:
Legend Presets Menu
A feature that allows players to select favorite legends as presets for Apex Legends’ in-game legend select phase.
Timeframe
February 2022-
March 2022
Location
Chicago, IL
Design tools
Figma
Adobe Photoshop
Adobe Illustrator
Adobe Premiere Pro
What is Apex Legends?
Apex Legends is a battle royale-style video game created by Respawn Entertainment, where players can compete in the Apex Games playing as characters with unique abilities.
The players
This project was developed as a capstone project through Thinkful’s UX/UI boot camp (not in collaboration with EA or Respawn).
The users are the hundreds of thousands of players who log into Apex Legends every single day. As such, design of the Legend Presets Menu was largely led by the needs of the player base.
The problem
Apex Legends Select Phase
As of February 15, 2022, Apex Legends has been out for a wonderful 3 years— and one consistent complaint shared by players is with regard to the legend select phase in-game:
This phase is turn-based, meaning only one member per team can choose their legend at a time. Oftentimes, this means that players will not get to play the legend they want, on account of the fact that there are no repeat legends on a single team. In this case, if a player steps away from their screen for a moment or is otherwise occupied, the game will choose a legend for them– usually, the legend chosen for the player is not one they want to play, and there is no way to change your selected legend once your turn is up.
Players want a way to pre-select which legends they would like the game to choose for them, in the event that their first choice is taken.
My role
I led the design of the Legend Preset Menu between the months of February and March 2022 as the project’s sole member. As a result, I wore many hats, including:
— Researcher
— Project planner
— Designer
— Prototyper
Discovery and research—
Early questions
Once I understood the problem, some early questions I had in mind were:
How do other team-based games allow players to choose which character they will play?
Do other games allow players to choose legend presets?
What do players like and dislike about the character select phase in their favorite team-based video games?
Competitive Analysis
With these questions in mind, I began laying a foundation for the project with some competitive analysis.
Overwatch
The first game I chose to analyze was Overwatch— Overwatch allows users to select characters all at the same time, so there is no order in which players may choose their characters. While Overwatch does not allow players to choose more than one of the same character on a single team, players do not miss the chance to select a preferred character if not chosen within a small window. Players may also change characters in the spawn room at any time.
League of Legends
League of Legends does something that most games don’t: once players have been queued into a lobby, they are asked if they are ready to play and must manually select a button confirming that they are present before being placed into character select. This means that players have to be present and attentive in order to even load into a match. All players on a team select and lock in champions at the same time, however there is a pre-select phase during which all players select and then ban champions. Players are not able to change their characters once the selection phase has ended.
Valorant
In Valorant, once players queue into a match, character selection begins immediately. Like Overwatch and League of Legends, the selection phase happens all at once. Players must lock in their agent— only one of each agent is allowed per team, and players may not change their agent once the selection phase has ended. Each agent’s select screen provides the player with information about the agent they are selecting as well as their abilities. The select phase lasts longer than Apex’s, allowing players to take their time choosing which character they want to play.
User survey
Now that I was equipped with a foundational understanding of how other popular team-based games run the character selection phase, I put together a survey that received responses from 42 unique participants between the ages of 15 and 35.
Goals
Bearing my early insights in mind, I outlined some goals for the survey, including:
— To understand how players feel about the current legend select phase, and whether players felt that other games had a selection phase that was preferable.
— To pinpoint exactly which part of the selection mechanic could be changed to create the best solution, whether that be the legend select phase itself, or general settings.
Survey results: Key findings
31/42 respondents find it frustrating that they cannot choose favorite legend presets in their settings.
34% of respondents prefer the character select phases implemented in games like Overwatch and Valorant, where all players choose their character at the same time, citing that it feels more “fair.”
The other 66% of respondents felt that, while the current legend select phase could use some tweaking, the time-sensitive, turn-based approach is more suitable for a game like Apex Legends, where each lobby consists of 60 players and delays in character selection would create dead lobbies.
31/42 respondents find it frustrating that they cannot choose favorite legend presets in their settings.
User interviews
Once I had a general idea of users’ feelings and experiences with character select phases, I conducted seven interviews with seven users between the ages of 15 and 35, to gain personal insight into the perspective of the player base.
I gained some valuable insight in my user interviews, but there were a few points that really that stood out to me. I found that participants placed emphasis on being able to choose pre-selected legends for varying reasons:
For some participants, it was a simple matter of wanting to have the option. For two participants who are parents of young children, it came down to their child having a need as they were queueing into a lobby. For one participant who struggles with focus, being able to choose legend presets would be a quality-of-life feature that would improve ease-of-use.
User #1
Age: 18
Occupation: Student
Server: EU
“I don’t like to admit this, but I have a really difficult time focusing. It’s a mental struggle I have, that isn’t easy to control. It kicks in especially during repetitive tasks. You know how Apex matches can be— they can end as quickly as they start. Well, it doesn’t take long before I’m completely unfocused during legend select, and usually that means playing random legends. On one hand, it’s nice because I’ve learned to play a lot of the roster. On the other hand, a pre-select feature would make a huge difference to someone like me.”
User #2
Age: 31
Occupation: Data Analyst, Part-Time Streamer
Server: NA
“I’m trying to grow as a streamer, primarily through playing Apex. It’s important to me that I’m engaging and I try to interact with my chat as much as possible. Usually, I do this during queue and all of the pre-game phases, and having the option to set favorite legends could save me a lot of headache. To me, it’d be really nice to at least have the option, but I could honestly see it being a helpful accessibility feature for people who have certain disabilities. In my opinion, something like this should have been implemented a while ago.”
After speaking with my interviewees, the potential solutions I’d been brainstorming began to take on a different shape. Initially, I had been considering a change to the legend select screen, itself, that allowed players to manually select their legends all at the same time within a certain timeframe. However, this potential solution raised other issues: in a game where each match consists of 60 players, teammates selecting characters all at the same time might lead to dead lobbies. Furthermore, it wouldn’t actually solve the overarching problem, which, as I learned from my interviews, goes beyond players not being able to play the legend they want—
It’s a matter of accessibility.
User personas
From the useful insight I gained in my interviews, I developed 2 user personas:
One, a 28 year-old data scientist named Andrew, who wants to begin streaming part-time and values being a present parent above all.
The other, a 15 year-old high school student named Ashley who loves to code and wants to become a professional gamer one day.
Both Andrew and Ashley need an effective, quality-of-life feature that allows them to select character presets. While Andrew’s needs are based in his responsibility as a parent and his desire to be an engaging streamer, Ashley needs a simple feature that makes the game more accessible to her.
User stories
I put together a few user stories, as I ideated on the findings from my interviews, with an emphasis on simplicity and accessibility. I played around on Apex Legends’ in-game menus while I wrote my user stories– it was important that my solution fit seamlessly into the pre-existing menus, while remaining simple to interact with.
As a player, Andrew wants to select favorite legends to be selected when he is afk.
Andrew needs to select the Legends tab
Andrew needs to select the Favorite Legends button
Andrew needs to select Legend 1
Andrew needs to select Legend 2
Andrew needs to select Save Legend Favorites button
Define—
User flows
Once I’d put together a few potential solutions in my user stories, I began turning them into visual user flows. I wanted to see how different variations of simplicity held up– and I quickly decided to scrap flows that, while seemingly simple, would over-complicate or limit the presets feature.
Flow 1: A new menu
Ultimately, I chose to progress with my first flow, which features a new menu that is easily clickable from the main legend menu and utilizes a similar UI. This flow allows players to select their first and second preferences from the legend menu that already exists.
Flow 2: Middle mouse actions
This flow implemented the middle mouse button– an action that is very commonly used in Apex menus. My thinking was that it was a quick, unobtrusive way to select preferred legends. The main issue with this idea, however, was that it limited the player’s ability to rank their legend preferences– a feature which survey and interview participants deeply preferred.
Site map
I constructed a site map from the first flow, again bearing in mind the pre-existing in-game menus as I visualized how the additional menu would extend from it.
Wireframing
With the organization of these references, I was able to begin the wireframing process. First, I sketched everything out, visualizing each screen and how it interacted with the others.
I carried my user-inspired goals from my user flows into the development of wireframes: to create a menu that is easy to find and easy to use, without cluttering screens.
With some organized sketches, I began putting the pieces together in Figma to create a digital wireframe.
It was highly important that the screens I designed be cohesive with the pre-existing menus in-game, both visually and interactively. This meant that there were firm guidelines I needed to follow– everything from headers, buttons, colors, and typefaces to the placement of each asset– needed to look like they belonged in the game. Once I’d laid out my wireframes with these parameters in mind –I began the prototyping phase.
In-Game: Apex Legends Menu UI
Develop—
Visual design
I began by building a style tile for Apex Legends— rather than creating a new design, this meant studying the game itself to understand it visually. I focused on the original legend menu and began recreating some of the visual effects in Figma. Creating a cohesive prototype also meant using fonts that are the same or similar to those used in-game, so I spent quite a bit of time researching which fonts I should use of those available to me, and how to style them. In the end, I chose to use AgencyFB– it seems that the game uses some altered variation of this font, so it was the best fit for my prototype.
Once I’d completed my style guide, I began working on a mockup for the prototype itself by inserting assets, fonts, and other visuals into the wireframe. I did all this while using the original in-game menu as reference, to keep within the stylistic parameters I’d created for myself. It was important to me that my prototype look and function as closely to the game as possible, so that I could gain accurate results when it was time to run usability tests– so I re-built the in-game UI from scratch in Figma.
Original in-game menu
Mockup, re-built in Figma
Deliver—
Testing the prototype
Once the prototype was ready, I began the process of running usability tests. It was important to me to begin these tests as soon as possible, to save on resources down the line.
I conducted a total of 15 usability tests between February 28th and March 2nd, 2022. These tests were conducted remotely, with participants sharing their screens. 10 of these participants play Apex Legends and are familiar with the mechanics and in-game menus– the remaining 5 participants have not played Apex Legends, but play other first person shooters like Overwatch and Valorant.
It is recommended that 7 usability tests is the “sweet spot,” and my initial testing phase reflected this recommendation. However, after I had completed 8 tests, I found that the results lacked any pain-points that could be improved upon. Because of this, I chose to run 12 additional usability tests, and included a sample of players who are unfamiliar with Apex Legends.
It was important to me that my testing included a sample size of players who are not already familiar with Apex’s in-game menus, but who are familiar with other game’s menus; the reasoning for this decision being that it’s important to understand whether the UI I have chosen and corresponding actions are intuitive across the board.
All tests required users to respond to prompts with in-game actions.
Goals
I outlined a set of goals for my usability tests, off of which I based the prompts given to users:
— To test the success rate of tasks prompted to the user.
— To measure the number of times the user completes each task with the minimal number of interactions.
— To test the level of intuitiveness of the Legend Presets menu for players who are familiar with Apex Legends.
— To test the level of intuitiveness of the Legend Presets menu for players who are not familiar with the game.
Key findings
I received some very useful feedback from the usability tests that suggested I had already fulfilled certain project goals, notably:
— 5/5 players who were unfamiliar with Apex Legends commented that the menu was “simple to use” and “worked as expected.”
— Players expressed that they appreciated that the Presets Menu was easily accessible from the Legend Menu, rather than being hidden away in the Settings.
— Players also expressed that they would be happy to see the Legend Presets feature implemented in-game, one such player stating that it would be a “wonderful quality-of-life improvement.”
Success rate
Each of the 15 users who participated in the Legend Presets usability test received the same 10 prompts:
Of players who were familiar with Apex Legends:
— All 10 users completed all 10 prompts with no detours and with the minimal # of interactions.
Of players who were unfamiliar with Apex Legends:
— 4/5 players completed all 10 prompts with no detours and with the minimal # of interactions.
— Of these 5 players, 1 player took only 2 detours.
Overall task success rate: 98%
Responding to feedback
There were some concerns that users shared about the Legend Presets prototype that have been instrumental in planning further iterations:
Problem #1
Users expressed that the Menu Button was too small, especially in comparison to the Legend Selection buttons on the Presets screen: it didn’t stand out as having a different function.
Solution
This hierarchy issue meant that the screen lacked readability, so I chose to size up the Menu Button so that it would stand out in contrast to the Selection buttons without taking up too much space on the main Legend Menu screen. I didn’t make the button too much larger, however, as I found in my testing that most users returned to the main menu via the back button, rather than the Return to Menu button. I will be testing the updated button in my next round of tests, to see whether further changes need to be made.
Problem #2
Users expressed another readability issue on the Presets screen: while numbered cards distinguish selected legends from the rest, the lack of visual contrast was a concern to some users.
Solution
In order to solve this, I looked at pre-existing UI decisions in-game. During the Legend Select Phase, the selection menu is greyed out to communicate which legend has been locked in. Now, when users have completed their preset selection, the remaining legends are greyed out in similar fashion until they choose to change their selections again.
Closing thoughts
The feedback I received from the usability tests was incredibly helpful, and concluded with some changes to the readability and accessibility of the Legend Presets menu. Before I ran my tests, the Legend Presets menu was simple, intuitive, and consistent with the rest of the game, but lacked vital elements that would make it accessible to players with visual impairments. I was able to use the feedback I received from users to make improvements that ensure information can be accessed with ease for everyone.
