I joined the project in 2020 as a Visual/UI Designer. I focused a lot on logos and iconography for a lot of the game including game mode logos, skill icons, achievement badges, and more.
Multiplayer squads, first-person and third-person shooter gameplay and innovative combat are waiting for you on the battlefield! Jump into intense combat where survival is the only thing that matters. Prove that you have what it takes to make it out alive.
Our team was brought on to work on the mobile version of Apex Legends! One of the big challenges we faced was communicating the high information density in such a small screen and one of the ways to solve for that, beyond designing an appropriate UI/UX, is to really think about the communication through Iconography.
Click into any of the images below for more thoughts behind the design.
I really enjoyed designing the iconography to communicate game modes, attacks, and more and learned just how challenging it is to design something that is easily readable and embodies the meaning of what it represents.
Apex icons are too detailed to be readable at a smaller screen size so I explored different options for the mobile version of these icons.
There were a lot of icons that didn't exist in the original PC version since you are able to map a lot of actions to keyboard or controller buttons. However, in mobile, a lot of actions that would normally not require a button would need a visual button on mobile. It is a fine balance of designing an icon that is readable but includes enough information to be identifiable.
In PC, certain behaviors would be achieved by simply clicking a mouse key or a keyboard button, however in mobile, we have limited real estate to provide intuitive interactions. In this fps example, this UX has to be simple and quick, which is why it can not be a regular window where you tap once to open the window, tap a second time to choose your selection, and even maybe tap a third time to confirm. This is why we chose to use the radial wheel for this feature where the user interacts with the "extract" button, pulls up the radial wheel, and swipes in the direction of their selection.
A modal takes up too much of the screen and hides too much information that is needed in a fps game
Using color and shape to communicate information at a glance. In this example, Bloodhound's ult lets them track other players and shows how close they were and how long ago. I used a rectangular loading bar with the iconography of what skill was used to show this information.