UX/UI-Design

World of Tanks

World of Tanks is a free-to-play, triple A, massively multiplayer online game for PC.  The game has over 160 million registered players worldwide since the release in 2010.
Screen3.jpg

UX / UI design and UX team lead for different in-game and meta-game features of World of Tanks.
(2017-2020, in house @ Bongfish GmbH for Wargaming.net)

I spent three years leading the UX team at Bongfish as the lead UX designer. Bongfish develops features for Wargaming's World of Tanks as a distributed developer. Depending on the feature, the UX team included two to four designers. During my time at Bongfish, I worked on six projects for World of tanks.

Unfortunately it is not possible for me to show concepts or work in progress designs due to existing non-disclosure agreements. As a freelancer, I no longer have access to the company's design files.

Gamemode Frontline

Initial Situation

I joined Bongfish as a Senior UX Designer in the last two month of this project. The team was developing a new gamemode for World of Tanks for over a year. There was a fixed release date and a lot of UI bugs and unfinished screen designs. My main task was to quickly familiarize myself with the project, the processes, the team and the World of Tank design and project guidelines to help successfully complete the project from a UX/UI point of view.

Process

1_Concepts copy 6.png

1. Research

// Get familiar with World of Tanks design guidelines, userbase, gamemode mechanics and features

// Research types of players

1_Concepts copy 4.png

4. UX/UI Design

// Final UX & UI Design

// Icon Design

// Animations & Transitions

1_Concepts copy.png

2. Conceptphase

// Create interaction concepts and layouts for missing meta game screens

1_Concepts copy 5.png

5. Documentation

// Create developer and QA documentation, specifications and assets

1_Concepts copy 3.png

3. User Testing

// Conducting internal guerilla usability tests and feedback sessions.

// Official usability test with real players where only allowed to be done by Wargaming's UX-Lab team

1_Concepts copy 4.png

6. Dev-Support

// Support developers during production

 

// Help QA department review the implementation

I started by gathering all available insights on the game, the players, and the problems, needs, and requirements associated with the feature I needed to complete. Furthermore, I researched how comparable games proceed in this situation and whether there are best practices for flows, layouts and designs.
In the concept phase, I rely on rapid iterations and feedback loops with stakeholders to not waste any time on bad solutions. User tests were conducted by Wargaming at the end of the concept phase.
The final design was based and wargaimg guidelines and was reviewed by wargaming UX. 
During production I supported the front end development team when question arose.

Onboaridng

As I said, I came to Bongfish in the hot phase at the end of the project and immediately had to create much needed concepts and designs that had to meet the strict design guidelines of the game.
It helped that the UX team used familiar tools and stuck to the same UX process I already knew.

New Industry

Moving to a new industry meant adapting to new rules and guidelines, but the requirements for menu screens in terms of UX/UI and usability were very similar to my UX experience in the measurement industry.

New role

After this first project, I took over the lead role of the UX design team.
Communication with the Wargaming UX-team in Misnk was not easy in the beginning, but we managed to setup a weekly design sync to get to know each other better and to share project-news regularly.
PC1.png
PC.png

Battle Communication

Initial Situation

Wargaming asked our team to design a new system for non-verbal communication between players in game, because players generally avoid voice chat. A special focus should be on encouraging positive communication in order to counteract the generally toxic interaction between players.

My tasks and responsibilities

1. Research

1_Concepts copy 6.png

// Research on state of the art games with excelent in game communication features like APex Legends and League of Legends

// Find ways on how to translate the UX from these games to World of Tanks 

// Research problems the playerbase has with the current system

4. UX/UI Design

1_Concepts copy 10.png

// Final Icon design and ingame finetuning

// Check visiblity and readability on a wide variety of maps

2. Conceptphase

1_Concepts copy 7.png

// User requirements engineering 

// Create first drafts in after effects and photoshop

// Create a prototyping plan for the concept phase

5. Documentation

1_Concepts copy 11.png

// Create developer and QA documentation, specifications and assets

3. User Testing

1_Concepts copy 9.png

// Conducting internal guerilla usability tests and feedback sessions.

// Official usability test with players where only allowed to be done by Wargaming's UX-Lab team

6. Dev-Support

1_Concepts copy 10.png

// Support developers during production

 

// Help QA department review the implementation

This feature needed a lot of research on the most important messages players need to be able to send during the different stages of a battle, on ingame communication in other games and on how the user experience of a player is affected by positive and negative feedback and messages from other players.
After getting familiar with the topic we started an extenisve concept phase to prototype the interaction and the UX ingame in order to be able to test it with real users. We did not manage to simulate this part with click prototypes or animated scenes. User tests were done by Wargaming.
After we knew that the concept can work, we started with the detailed design of the final ping messages and icons. We needed to pay special attention to sizes, visibility and readability of the icons on all kind of different backgroundtextures and effects that can appear in the game.
Screen3.jpg

Requirements

// Revision of the current, hardly used ping system

// Ability to ping any position in the 3D world and on the minimap

// Improve interaction with other players and gameplay objects

// All interaction works through one button

My Main Tasks

// Definition of the biggest problems of the current system

// Conception and interaction design of the new system resp. UI and icon design

// Coordination with Wargamaing UX

// Feature owner role during prototype development
Screen12.jpg

Challanges

// 10 year old system and features that players have become accustomed to
Solved by using the similar controls and pinging options like in the old system and adding extended features on top of that.

// 15 players in a team should communicate tactics and approach with few clicks 
Introduced visiblity rules based on the usefullness of each ping

// prevent abuse (spaming/trolling) of the system
timeout and visibility rules for ping spaming
PC2.png

Features

// Context-sensitive ping selection wheel to minimize the number of pings in the selection

// Smart Quick-Replies to accept requests from teammates with one keystroke

// Reply Count in pings over vehicles and in the 3D world to more easily capture the intentions of the 14 teammates