Escape From Tarkov, an unforgiving realsitic FPS, has been a game I have dumped thousands of hours into. Playing it almost daily for years has become my favorite game to hate. While it frustrates me to no end I still enjoy playing it. So after going on a trip and realizing that I don't really play any games on my phone I wondered why that was. What I found to be the answer was that I just didn't have any titles I liked on mobile. Naturally, Escape From Tarkovbeing my favorite game then, I thought I could create the UI for a speculative mobile version. Creating screens for most scenes in the game and how some interactions would play out.
(Created following the 0.13.0.4.22617 Beta Version of Tarkov)
Being new to mobile games and more specificaly FPS mobile games. I did a bit of scouting to see if this idea was even fesable. Downloading games like Call of Duty Mobile, Apex Legends Mobile, and PUBG Mobile to examine sucessful PC to mobile games. Informing a lot of my UI elements and interactions decisions. This also involved taking a look at the PC and mobile versions of each of these games. Then finding what systems or mechanics were removed, added, or changed from each port to make it playable. One of the first task I did when tackling this project was writing a list of all the screens I needed.
While sketching out the different screens in Escape From Tarkov I learned my first valuable lesson of the project. I will not be able to recreate every screen for the game in a resonable amount of time. I understood that when I was on the 'Flea Market' for the game. If you are unfamiliar with Tarkov's flea market, it is esentially an online market where players can list and trade items. Which there are easily a thousand of, followed by a complicated user experience I knew there would be no way that I'd be able to faithfully recreate the flea market. Additonally I decided not to recreate the 'Hide out', again for those unfamiliar the 'Hide out' is essentially the player's base. Where they are able to craft materials, items, practice shooting, and upgrade their character or hide out. A lot of the space is created in 3D which I am not well versed in, in relation to games.
Once I created paper sketches for the screens, I hopped into Figma to get started on a rough draft. I took screenshots from the game,cropping and scaling them to fit within an iPhone frame. It gave me a better idea of where menus and information could be seated. Or what is a reasonable amount to fit on screen. I also wanted to maintain that limited assistance UI that Tarkov has. Giving the player the bare necessities or, at times, not even that. Keeping that in mind, I laid out what potential screens would look like.
Mocking up these screenshots was incredibly useful. I was able to layout a lot of elements, buttons, and information without having to commit to designing first. Even just from these mock ups I was able to share with friends who play the game and other community memebers I've met over my thousands of hours of play time. Giving me feedback and interesting perspetives. My friend Connor pointed out that I should be bold and bring over a more mobile game feeling to the UI. Acuented by the fact that these mock ups were screenshots of the game, creating unique UI elements would not only make the use of this speculated game feel and function better. But it would actually challenge me in design to work from a format of gaming I am very familiar with to one that I need to become more familiar with.
I spent a lot of time in Photoshop recreating or scaling down assets I needed from the game. An example of assets I need for the UI is the Extraction List, so players know where they can leave the map, arm stamina, and leg stamina. Or smaller elements like the crown that signifies EOD (Edge of Darkness) owners, a high pay-for copy of the game. Or the weather iconsthat let the player know what the weather might be like on the map. Trying to faithfully recreate these assets proved to be a much larger task than I anticipated. That being said I feel like I did a good job. The assets I struggled with most was the player gear, like the guns, ammo,rigs, and attachments. Finding high-quality versions of them felt impossible. Leaving me to go into my game and take screenshots of the items I wanted to use, making not the best quality consdering that while working on this project I did not have a powerful computer.
Completing these frames took me months, in a combination of being busy with school, work, and other distracting projects. I found myself slipping away from this one. This taught me another valuable lesson of setting due dates. Similar to school work, I began setting checkpoints and adhering to a schedule, which significantly expedited the process of completing this work. Another positive I drew from this break I took was coming at this project with a new, fresh perspective. A choice I made while working on the design was to go from a three grid layout for screens to splitting the menus down the middle, making two defined sections. Giving a lot more room for players fingers to push the buttons they are intending on pushing and not rolling over to anything else. This was something I noticed when looking at the designs on my phone: there wasn't enough room to push all the buttons or drag and drop things.
After months of work designing, redesigning, and reaching out to community members and friends for help, I finally came upon a design I feel happy with. So to write through some of the design choices I made, the decisions behind them, and how I see themmechanically working. Starting at the menu, I imagine a fade from the initial loading screen to show the menu with a pop-up of the notification that Tarkov is still in beta, which is present in the desktop version. After the player selects where they want to go, the info bar at the top will remain present. Displaying character information like weight, health, water and energy. As well as the player's name, level, and money. Navigating between screens is made easy, with a back arrow always in the top leftto take the user to the previous screen. When making choices such as selcting between 'Trade or Task' between traders or selecting quantities of items when purchasing, a smaller menu appears to allow players to select their choice or quantity, then a confirm button to ensure players don't get frustrated while performing actions like purchasing ammo. In a game like Tarkov, where you are always put on edge, having something happen out of your power or wasting your Roubles can make the experience a million times more frustrating.
When players are loaded into maps I stuck to keeping a very minimal layout and design to avoid any visual clutter. Players can be hiding in every bush outside and corner of every room. This makes it imperative to leave as much room for the player to see but also still provide them with critical information. The controls would play the same as every other mobile FPS but with Tarkov's very familiar weight and inertia system. Now combating more minor gameplay challenges like keeping track of weight, the backpack icon will slowly fill the more loot the player finds. So the player is aware of their weight in-game, the button can also change color with the overweight system already in place for desktop. Applying meds to wounds can be boiled down to a single button press. When injured, a player will see the type of injury it is based on existing in-game icons. Pressing the icon will heal the player with the med with the least durability left (unless banding a bleed) to ensure the meds are not used out of order.
Lastly, the malfunctioning system, when a weapon in Tarkov has low durability, low-quality ammo, or just has overheated. The chance for a misfire or jamto occur increases dramatically. To preserve this mechanic on mobile, I propose having the various keystrokes and button presses required to clear a malfunction be boiled down to yet another single press. When a misfire occurs, the 'fire button' will blink red and stay red, notifying the player their weapon can no longer fire. Clearing the malfunction is as simple as pressing the now red 'fire button', watching the animation play through, and continuing the gunfight. This ensures that with the slightly more clunky gameplay I find when playing mobile FPS, gun fights are instantly over or feel unfair, especially when a player gets a misfire.
I learned an INCREDIBLE amount while working on this project. Not just in terms of designing in Figma, although I did learn a lot about Figma too, but also about time management. Letting this project slip away from me for a couple of months was a bit frustrating; in the end, it ended up as a positive. But I do not want any more projects running over schedule or stressing me out for way too long. This is a system I have now adopted, and I can confidently say it makes the designing experience a million times more pleasant. Video games are near and dear to my heart, and I spend a lot of time playing them. Having a project where I could flex my design skills in a familiar topic in an unfamiliar format was a welcomed challenge. I'm excited to do more work like this in the future or work closely with video games in general. I do find designing for mobile harder than desktop. It is a style of gaming I am not very familiar with. However, since completing this project, I have recently started playing more mobile games. I've been enjoying them more than I thought, but I also found features or designs I did on this project that could have been better. For example, I've been playing a lot of Old School Runescape on both desktop and mobile. I learned that we could be much more precise on a screen with our fingers than I initially anticipated. Meaning I could have left the inventory system to be broken up into three sections like on the desktop and not have to change it like I did. Nonetheless, I am incredibly happy with my design, plus the days and nights I put into it.
