This page is structured in:
UX Design process
- Getting to know AFK Arena
- Color-code the screens
- Screen structure references
- Vertical to Horizontal view
- "Campaign" screen
- "Heroes" screen
- "Battle" screen
UI Design process
UX Design Process
Getting to know AFK Arena
AFK Arena is a mobile idle game made by Lilith Games, created in 2019. My first step was downloading and playing the game on my mobile phone, an iPhone 11.
I already knew AFK Arena from ads in other games, I remember admiring the visuals and the character design, but I’ve never had the chance to play.
I also searched for the official website and social media, to see their current event, and learn more about the game, its community, gameplay, and visuals.
After playing for a while, and watching some gameplay videos, I created a document in Figma.
For this challenge, I picked the 1920x1080px resolution for the landscape version, considering that most TVs nowadays have this resolution. To this challenge, I chose the following screens:
- Campaign, because it is the first screen when the player opens the game (after the tutorial), and it’s where they can access a lot of features (like Events, Bag, Email, Quests, etc) and play the battles;
- Heroes, because they are the main component for the gameplay, considering the battles, so the players access this page constantly;
- Battle, it’s the main gameplay screen, so it’s important to have at least this screen for an MVP for the game.
Color-code the screens
After selecting the screens, I took some screenshots from the game and created “boxes” over the main interactive components on the screen, to understand more about the screen structure.
I decided to color-code the boxes, so I could separate each interactive section, associating them based on their functions and location on the screen. I also renamed each box (layer), as a good UX design practice.
Campaign screen, color-blocked
Heroes screen, color-blocked
Battle screen, color-blocked
Screen structure references
In this step, I searched for games that could have the same interactive structure, like Cyberpunk 2077, the Call of Duty franchise, and Apex Legends. These games have good structure considering their joystick shortcuts (like L1 and R1), and I applied these concepts in my proposal.
Apex Legends (Respawn Entertainment)
Battlefield 4 (EA)
Call of Duty: Black Ops III (Activision)
Cyberpunk: 2077 (CD PROJEKT RED)
Vertical to Horizontal view
After the research, I started putting the boxes over the 1080p artboard and planning the spacing between them, considering that now I have more horizontal than vertical space to work with. I also did research on how to work with TV ratio for UX design, like borders, alignment, and positions of elements, and I was very satisfied with the results.
"Campaign" screen
I chose not to rotate the map in the Campaign screen because I think that it has the purpose of the “narrative” of “going from the bottom to the top”. Because of that, my suggestion is to make the map vertically slide in the main space of the screen, with the player’s Enter Battle icon as a reference for the middle of the map.
The side menus, because there is now more horizontal space, I adapted for a more horizontal view, with their icons and text side-by-side.
I decided to put the bottom tabs (Ranhorn, Dark Forest, Campaign, Heroes, and Chat, which I called the Main Tabs) above the screen and below the Player Info, as top tabs. Based on my research, these types of menus are common for console games and they can be alternated through L1 and R1 buttons. I also adapted the buttons for a more horizontal style and added the button hint L1 and R1.
Campaign: Mobile to PS5
"Heroes" screen
After creating the Campaign screen structure, I started the Heroes screen. For this one, I looked for more examples of how many heroes can appear on this screen, to know more about the screen structure and how the scroll works. After watching some videos, I understood the need for a big space for the heroes’ icons.
I also adapted the filter and the bottom tabs (Heroes and Portraits), considering the same format as the Main Tabs.
Example of how many heroes an average player can have.
Heroes: Mobile to PS5
"Battle" screen
For the Battle screen, I searched for references in RTS games, where the player can see their team statuses, like HP and MP. I also added some shortcut indications for some controller buttons, considering that console players already have visual references for these types of gameplay buttons on the screen.
While doing this screen, I added two more color-coded boxes: Heroes and Enemies area. These two areas are non-interactive, but I wanted to make sure that these areas, which are very important for the core gameplay, weren’t interrupted by any button.
Battle: Mobile to PS5
UI Design Process
After the UX Design process, I started developing the visual for the proposal.
Based on references like Cyberpunk: 2077, Apex Legends, and Overwatch, mixed with some color palettes and patterns I found, I created some screens and UI components.
UI Design Moodboard for the redesign
Unfortunately, I wasn’t able to create the Battle screen due to a short time.
The visual components in the screens were created using good practices for UI Design and Design Systems, being responsible and having variants.
You can check the whole project at the following link: Globant Challenge.