Sabotaj MMOFPS Game UX & UI Design
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. 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.
Game
PC
Shooter
Hes Games, 2020 - 2021
Role
UX Researcher, UX Designer, UI Designer
Methodologies
Research & Analysis, Wireframe, UI Design, Survey Design, Play Testing
Tools I Used
Sabotaj is an MMOFPS game that 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.
01
Project Brief
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.
02
Objectives
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.
03
Scope of Work
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.
04
Site Map
05
Competitive Analysis
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.
Strengths:
Intuitive Navigation: The menus and in-game HUD are easy to navigate, allowing players to find what they need quickly (e.g., loadouts, settings, friends list).
Clear Feedback Systems: Immediate visual or audio feedback (e.g., damage indicators, hit markers) ensures players understand their actions and the results clearly.
Minimalist HUD Design: A clean and non-intrusive heads-up display (HUD) ensures players can focus on gameplay without being overwhelmed by information.
Responsive UI: Fast and smooth transitions between screens, such as from menus to gameplay, provide a seamless experience that keeps players engaged.
Customization Options: Players can easily customize controls, interface elements, and visual settings to suit their preferences, improving accessibility.
Clear Onboarding: Well-designed tutorials and tooltips help new players understand complex mechanics and gameplay elements without feeling lost.
Consistent Design Language: UI elements like buttons, icons, and typography are consistently styled, helping players build familiarity with the interface.
Accessibility Features: Support for colorblind modes, adjustable text sizes, and controller remapping improves usability for players with different needs.
Weaknesses:
Overloaded Menus: Too many options and nested menus can confuse users, making it difficult to navigate the interface quickly, especially in high-pressure situations.
Small or Unclear Icons: Tiny icons or buttons may not be immediately recognizable, causing players to struggle with identifying key actions (e.g., ammo, health packs).
Lack of Feedback on Actions: Delayed or unclear feedback (e.g., after buying an item or changing a setting) can cause players to repeat actions unnecessarily, creating frustration.
Inconsistent Design Elements: Using different design styles across screens (e.g., varying button designs between menus) can confuse users, making the interface feel less cohesive.
Difficult Customization of Controls: A poorly designed control customization menu can make it difficult for players to configure their preferred settings, leading to a frustrating experience.
Non-Intuitive Map Navigation: Players may struggle with in-game map layouts or mini-maps that lack clear indicators, which can hinder decision-making and movement.
Cluttered HUD: Overloading the HUD with too much information (e.g., stats, objectives, player status) can distract players from the core gameplay, making it harder to focus.
06
Wireframes & User Interface
Main Menu
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.
Daily Missions
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.
Store
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.
Inventory
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.
Inventory Detail
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.
Guild / Clan
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.
Profile
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
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.
In 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).
