01.
Goal
"World of Warships: Blitz" is a mobile adaptation of the legendary desktop game, offering players the opportunity to engage in battles using historical warships from the WW1/WW2 era.
The WoWS Blitz product team at Wargaming Mobile approached our design team to assist in identifying and rectifying significant UX issues in the alpha version of the game before its global release. Through ongoing collaboration, we developed a future- and feature-proof vision for the game UI. Additionally, we established the core of the UI design system, designed to seamlessly adapt to screens of any mobile device and accommodate any additional features.
02.
Process
During the initial stage of our work, we sketched the interface without any restrictions imposed by game designers and developers. This pivotal stage aided us in establishing the direction and exerted a significant influence on our subsequent work on the game interface. Throughout this stage, we contemplated how a mobile game about warships, adapted from a desktop, should look visually in 2018.
In our explorations, we had one major limitation: the game is a mobile version of the famous and legendary desktop game. Consequently, I endeavored to strike the appropriate balance between maintaining continuity and achieving independence in the game's UI.
After comprehending all our limitations and constraints, including the technical feasibility and how it would align with our work planning alongside the development of new features, we focused on creating a new interface. This new interface aimed at addressing maximum challenges while enhancing convenience and conveying the experience of playing a warships game. During this stage, we assembled the most important and the most complex screens, using them as the foundation for the design system. Subsequent screens incorporated components from these foundational screens.
03.
Clear focus
One of the fundamental design principles that runs as a common thread through all game screens is a clear focus. The reworked game UI provides only essential information for decision-making at every moment.
Right from the outset, the game boasted an extensive array of features: players could explore and purchase ships, upgrade and modify them, join a clan, communicate in the chat, compete in rankings, and make purchases in the store. And that's just the first row of buttons on the lobby screen.
However, players open the game to battle, not to navigate through numerous features and menus. Therefore, we maintain a clear focus on the "Battle!" button, which represents our primary flow. All features that do not pertain to the battle flow are relegated to the secondary level.
04.
Predictable schemes
In our initial interface analysis, we discovered significant variability in controls. Buttons with the same function changed their shape, color, and position on the screen, and menus were practically reinvented on almost every screen.
Therefore, as soon as we had the initial drafts of the visual style, we identified the core elements to serve as the foundation for the game's design system. We organized both individual controls, such as buttons and menus, and their placement on the screen, along with the semantic navigation zones.
One of the most crucial aspects of creating an easy-to-learn user experience is having predictable locations for each navigation element and limiting their number.
We defined three semantic zones for navigation:
– The "Always Available Actions" bar (housing the most essential and commonly used actions).
– The "Action Screen Area" (which can be represented with various layout variations).
– “Contextual Interactions" (consisting of 1 to 4 contextual buttons with predictable actions conveniently located under the player's fingers).
With the same concept in mind, we provided stable controls to automate player interactions with the service UI:
– “Back / Cancel" (always presented).
– “Options" (such as "Change warship," "Setup resupply," and more).
– “Alternative Action" (commands like "Platoon" near the primary "Battle!" button on the Home screen or "Details" near "Battle!" on the battle results screen).
– “Primary Action / Confirm" (actions like "Battle," "Purchase," "Equip," etc.).
We intentionally reduced variety within the system to facilitate easier user learning, as recognition is simpler than learning from scratch.
05.
Flow support
We build game UI around users flow state and aim for seamless experience without interruptions.
Right after a battle, the player remains in a flow state, completely immersed and fully engaged. After a victory, he seeks to solidify their results by repeating the battle tactics that led to their success. After a defeat, he desires a rematch, as they understand what went wrong in the battle and are determined to correct it.
The most crucial action following a battle is to engage in another battle. This is our primary focus, with all statistics and awards being of secondary importance. The player can access all the details later when they return to the lobby, but for now, it's essential to support their flow state.
06.
Common case
In our work for WoWS Blitz, we employ the common case as one of the fundamental principles. This has simplified our work as designers and has made the users' lives easier.
We are aware that most players use auto resupply for consumables. Therefore, we have relocated all consumables management from the home screen to a level deeper within the interface. Of course, we will not allow our players to enter battle without consumables, and we gently remind them in case they don't have any. The same approach applies to upgrades; there's no need to clutter the home screen with all possible upgrades. Instead, we place them at a secondary level and provide users with the option to upgrade their warships when it becomes possible to unlock them.
07.
Future proof
We always kept in mind how our design solution looks now and how it will look in the next years. In doing so, we focused not only on a solution that works well in the present, with the current set of features and an appealing appearance on current screen sizes, but also on a solution that will remain competitive in the years to come.
This goes beyond just the scalability of the UI across different devices or the ability to add extra elements to an existing UI component. We designed a solution that not only fulfills the clients' requirements but that lasts. Each layout and control can easily accommodate future features and translations into other languages. Our design not only provides sufficient room for possible additional buttons or blocks but also establishes rules for the seamless integration of new features. This allows new features to become a natural part of the existing app without overcomplicating it.
Here are two examples of the WoWS Blitz lobby screen. The first example is a screenshot from the initial public release of the game, where the screen is overloaded with all available features and information. As you may notice, this UI would hardly be able to accommodate any more new features.
The second example represents a complete overhaul of both the game's UI and UX. We prioritized the most crucial elements and moved all secondary components to deeper levels of the interface. By doing so, we created much more room for future enhancements. Additionally, we have introduced a more modern and competitive game UI, departing from the desktop gaming paradigms of the previous decade.
08.
Result
Only a portion of the work ended up in production due to technical limitations and product priorities. However, many of the proposed solutions found their way into the product in one form or another.
Working on this project has given me valuable experience in operating within a fast-paced environment while adhering to a robust set of design principles and a well-established design system. Additionally, this project has provided me with invaluable experience in setting up a global vision for the product and determining the concrete steps necessary to realize that vision.