Sabotaj MMOFPS Game UX & UI Design and 2D Art
Sabotaj was a first-person shooter (FPS) game developed by Turkish game studio HES Games. The game gained popularity in Turkey and other regions for its fast-paced gameplay and focus on tactical team-based combat. It supports up to 12 players depending on the game mode, where players engage in battles between two teams, Tactic and Force. It features an in-game economy similar to Counter-Strike, with a marketplace for purchasing cosmetic items. Players can earn currency through daily quests, and the game offers social elements like clans, providing a more interactive and community-driven experience.My role is to design the entire user experience and user interface for the game. Throughout the project, I worked as the sole UX researcher, UX designer, and UI designer.
Computer Game
Game
Mid-Core
Multiplayer
Shooter
HES Games
✶
1 Year
✶
2020 - 2021
Roles
2D Artist
UI Designer
UX Designer
UX Researcher
Methodologies
Design Thinking
Game Deconstruction
User-Centered Design
Tools
Figma
Illustrator
Notion
Optimal Workshop
Photoshop
Procreate
Spreadsheet
Unreal Engine
The goal of this project is to design the complete user experience (UX) and user interface (UI) for the Sabotaj FPS game. The project will involve conducting user research, developing a seamless and engaging user experience, and creating visually appealing and functional interface designs. This design will be tailored to meet the specific needs of the game's target audience while enhancing the overall gameplay experience.
Develop a user experience strategy that ensures intuitive navigation, smooth interactions, and an engaging gaming experience.
Design a cohesive and visually appealing user interface that aligns with the game's theme and enhances usability.
Conduct comprehensive user research to understand player preferences, behaviors, and pain points within the game.
Incorporate feedback from playtesting and iterate on designs to optimize the player.
Research: Competitive analysis of shooter genre
UX Design: Creating user flows, wireframes, and prototypes that reflect the desired user experience.
UI Design: Designing all visual elements, including menus, HUD, and in-game interfaces, ensuring they are both functional and aesthetically pleasing.
User Research: Gathering insights through surveys, conducting usability tests and refining designs based on player feedback, and play testing to inform design decisions.
The game was intended to be an advanced version of a previously released title called Tactic Force, so there was valuable know-how from that experience. Despite having these resources, my task was to design the entire interface experience from scratch, using the data and insights available.
The design documents were reviewed, meetings were held, and the main requirements were outlined. The initial phase focused on the function list for the interface:
Main Menu
Store
Inventory
Customization
Clan
Lobby
Profile
Missions
Chat
Social Feature
In Game Hud
After defining the primary screens, a detailed list of all the screens and site map was created, and a persona and customer journey map was prepared to guide the user experience across the game.
After our previous game Tactic Force and Competitive Analysis, we decided what content would be in the game's interface and a site map was created.
After the site map was created, best practices were reviewed, benchmarks were taken from several games, and competitive analyses were conducted.
Pain points, strengths, and weaknesses from the customer journey map were identified. Based on the existing site map and the research analysis, the screen details were defined. A strengths and weaknesses analysis was also conducted based on the user experience competitive analysis. Following these findings, wireframe designs commenced.
Since the game was highly niche, finding a ready-made icon set that met all our needs wasn’t an option. As a result, I designed custom icons from scratch and incorporated their various uses into the design kit I created.
The font used in this project is Saira, carefully selected from Google Fonts.
After a long research, competitive analysis, wireframe and prototype usability testing process, the interface of Sabotaj was started to taking shape.
Multiple badge sets have been prepared for use in different areas throughout the game.
Badges have been worked on for some features such as Name Change and Clan Name Change sold in the Market section.
For the Rank system that was brought to the game, the badges were designed along with the Rank system interface. A total of 61 badge designs were made for 7 ranks.
Medals that appear in the middle of the screen and are earned by the player as they play were designed in Ingame. 38 different medal designs were made for 38 different skills.
The main page is designed with a user-focused approach, allowing players to easily view all content. The header menu provides quick access to game features, while the prominently displayed news and daily missions panel on the main page keeps players up to date. The "Play" CTA button guides the user directly into the game.
The store page is designed for players to easily access and purchase crates, boxes, special items, and clan items. Each card includes a "view" button for detailed information and a "buy" button for quick actions, aiming to provide clear information and encourage fast purchases.
The mission page is designed for the players can track and complete daily, weekly, and monthly tasks to earn rewards such as XP and bonus items. It features clear progress bars, time limits, and organized tabs to enhance user engagement.
The inventory system is designed similarly to Counter-Strike, where players grow their in-game economy by playing and can select weapons from their inventory slots during matches. The goal of this structure is to allow players to build their loadout, including primary and secondary weapons as well as consumables, ensuring quick access to their gear in-game.
The inventory detail flow is designed to allow players to customize their equipment and create a personalized inventory. During the design process, emphasis was placed on categorizing attachments by rarity, visually highlighting modifications on the weapon, and ensuring easy access to front, top, bottom attachments, accessories, patterns, and sprays. The goal is to provide a smooth and intuitive customization experience for players.
This screen was designed to make it easy for players to join clans or create their own. During the design process, emphasis was placed on listing clans with key details such as level, member count, and leader information, while ensuring quick access to participation requirements and member details on the clan info page. Additionally, intuitive action buttons were implemented to allow players to apply for a clan or establish their own, providing a seamless user experience.
This profile flow was designed to allow players to track their ranked match performance and seasonal progression. During the design process, emphasis was placed on clearly displaying the number of matches required to determine a player's rank, providing a step-by-step tracking system for point progression, and ensuring easy access to seasonal statistics. Additionally, key performance metrics such as win-loss ratio, kills, and assists were highlighted to help players analyze their competitive performance.
Lobby flow was designed to allow players to organize their teams before a match, view game mode and map details, and communicate to strategize. During the design process, emphasis was placed on clearly distinguishing teams, visually highlighting player statuses, and ensuring easy access to room information. Additionally, a chat section and selection checkboxes were implemented to facilitate player communication and team management.
Game Hud was designed to allow players to track team and individual performance in real-time during a match. During the design process, emphasis was placed on clearly distinguishing teams, ensuring player statistics (score, kills, deaths, assists, ping) are easily readable, and providing quick access to game status information (round count, time, team scores).
