Redesign of Wargaming Global Navigation Menu. Here’s what I learned
The story behind the redesign of the Navigation Menu knitting together the entire Wargaming Universe (Part 1).
The online action game World of Tanks had got its third gaming Oscar in the Still Playing category of The Golden Joystick Awards — one of game dev’s most craved and prestigious accolades.
Action games developed by Wargaming are played by more than 150 million people all over the world. This makes working on any design project for this company twice as fascinating and engaging. The interface must be easy-to-use and intuitive for every gamer across the globe.
Definition
First off, what is the navigation menu (NM)? It’s a global menu that enables users to conveniently navigate among various websites of the Wargaming universe. It also has many other useful functions, such as showing notifications, displaying brief user profiles in each game of our battle universe, and lots of other things.
Main Challenges
- This menu integrates a considerable number of Wargaming portals, each with its own design and layout. The menu must mix well with every game theme so that each page looks nice and coherent.
- The menu has to be located at the very top of the page and in such a way that the user wouldn’t see it as a separate component.
- The menu has to render well across a variety of devices, so the design must be flexible, equally nice-looking and functional on large desktop displays and on smaller mobile device screens.
The Old Version
What did the previous version of NM look like
The old menu consisted of a grid with games, showing their signature art on hover and taking the user to the game portal on click. It was simple and succinct, and it did what it was supposed to do.
Why that wasn’t enough
More and more new games have been added to the Wargaming universe. The idea was to make access to all content easier and faster — for example, give the user all the needed information right in the menu without forcing them to click through to the new and completely unfamiliar game. That meant it was time to introduce more features within the menu itself, expand its functionality. At the same time, the style of the old menu had to be retained.
RE: Design
Version 1
“Hold on, why don’t we simply take the old NM design as a basis and add some new features to it?” I am sure many designers have heard similar suggestions :)
So why not indeed? We explored that option for a while, but the design ended up being unexciting and overloaded with blocks:
Problems:
- First of all, we didn’t know the max number of games the menu would possibly need to display. Say, a dozen games would require a three-row menu, while twenty or more items would call for an incredibly cumbersome structure.
- Secondly, same as with the old version, this menu logic would limit the functionality to clicking on a game and taking the user to another website, and we wanted to avoid that.
- Too much data in the blocks made it hard for the user to find the specific information they needed
Version 2
During the next iteration, we decided to:
- Reduce the size of the logos and add a description of the game/service, taking care of the idea to make some content available for users right away.
- Increase the number of games in each row from four to five.
Problems:
- The biggest problem at this stage was that managers still wanted to add quite a number of games (but that number was unspecified), and the grid layout still resulted in a vertically endless menu area.
Version 3
Then we decided to make menu items into text buttons as opposed to blocks, which allowed us to noticeably cut the height of the menu area.
Problems:
- This version showed way too little. With the images removed, short lines of text looked dull and unattractive.
- The old issue of not having enough space for game details and links resurfaced again.
Version 4
Finally, we came around to using scrolling and putting all the game info below the title. Hovering over the image would display the text and the links.
Problems:
- Additional information would show on hover, which meant the user would need to take an extra step after selecting the game in the menu.
- The four initially displayed games now vied for the user’s attention and so lacked impact, even though each had an image.
- The content quantity issue was still around, since the current structure didn’t afford enough space for showing more links and grouping them logically. The management was looking for ways to promote esports and provide links to game forums and events, but this version simply had no room for that.
Version 5
The New Design
After the fourth iteration, we decided to move away from the old concept of one block per game. The new layout used some scrolling elements and focused on one game at a time. That was the moment the new version of the design started showing through:
- Each menu item now spanned the entire width of the screen when expanded. This made the presentation of each game more distinct and colorful, and increased the available space for the game’s description and links (to downloads, forums, events, specials and other goodies).
- Switching between games was now implemented via a horizontal list. This also accomplished an extra objective, providing a mechanism and space for adding any number of games in the future.
- Now there was enough space for the game description and the links, which could be grouped logically.
- The presentation of each game now made an immediate impact, which was exactly what the audience was looking for.
Trying on some art
For the final version, we selected the most logical and clear composition of elements in the design. At that point, the next stage began: adapting the initial menu to different games. To see how workable the chosen design was, we started applying different game art to it. Below you can see us playing with World of Tanks Blitz.
The Art Department
Ours is a large company with a dedicated team for drawing visuals, and our next step was to tap into their creative powers. They provided us with awesome background images, some based on the existing art and others involving completely new designs developed specifically for the menu.
Now each game also had its signature logo and color approved by the marketing department. Below you can see a small collection of art eventually brought together by the art and marketing teams.
- After receiving the illustrations from the Art Department, we realized that in some instances the text was hard to read against the light background, so the final version included two cascading stacks of dark transparent blocks.
Adaptation
Next, we got down to adapting the menu to a variety of platforms with different requirements. We chose the classical layout : blocks left-to-right (on PC), rearranged vertically top-to-bottom (on mobile devices). We also decided to maintain the branding and style of each game and keep the art on all the breakpoints.
The horizontal desktop layout of the game list regroups into a collapsed vertical list to fit the precious small screen real estate.
For user convenience, we decided not to display all the games by default but to expand each game-item when the user taps it in the list. In the collapsed vertical list, game logos were transformed into SVG icons and placed to the left of the game names.
Lessons Learned
Over the course of working on this complex but exciting project, I have learned a few lessons I hope you might also find useful:
- Search for inspiration.
Don’t be afraid to suggest new solutions to problems. Depart from the old layout and grid completely. Take a fresh look at the task. Play the company’s game again (if you are working at a game company), study the guidelines, have a look at what your colleagues are doing and what’s going on in the world. Use the best elements from all the sources available — like the most successful texts, icons, arts — and turn these pieces of the jigsaw puzzle into a coherent whole that is meaningful and relevant.
2. First things first, or Understand the big picture.
Designing is a problem-solving job. However, besides dealing with the issues directly specified in the assignment, it is important to understand why those needs emerged in the first place and give some thought to possible future developments. Will later on the design be scaled or the requirements towards a certain element raised? Where is the company going? What design-related difficulties may arise? Will the users stick to just one language or is localization likely so the length of words may change?
Before you start, gather as much information as possible on what your design needs to include. My initial mistake of failing to do that kept popping up throughout the process: each new iteration would expose yet another problem of lacking some interface components that weren’t mentioned in the beginning.
3. Be obstinate … sometimes.
Stubbornness can be an admirable or notorious quality in a designer, depending on their point of view. If your client, your team or a design assignment insists on simply changing the old design but you are certain that you can make a better one from scratch — go for it. But prepare your arguments and present both old and new prototypes to show the difference between the two and estetic, business value that everyone will get. Don’t hesitate to go through bungled iterations in your design. What matters is to get useful feedback and learn from your mistakes.
4. Accept criticism … most of the time.
A designer who honestly evaluates their performance often finds that a ‘good job’ rejected by a business, art director or team is, in fact, not that ‘good’. More often than not, criticism has a positive effect on the progress and quality of your work. We are all human beings; we all get tired sometimes and stop thinking and seeing clearly. At such moments, quality criticism may do tons of good. That being said, don’t settle for meaningless comments like “Everything is amiss!” or “Something is wrong here!” Ask specific questions, and the answers will start you thinking on how to move on with the project.
5. Check the way your design looks at different breakpoints.
Testing at or even making a separate layout for different breakpoints is an absolute necessity. We knew from our analytics that most players used their mobile devices, not PCs, to visit the platform. For this reason, we needed the tablet/mobile versions to be at least as functional and spectacular as the desktop one.
6. Stick to your values.
To remain creative, a designer must have the courage to stand up for their beliefs. The fundamental strength of your principles is a source of creative power, along with your talent. If you are asked to produce some run-of-the-mill results — a regular redesign without changing much — take an extra step and do what you believe in. Create something you know will work and demonstrate it to your stakeholders. It may very well be they haven’t even considered the problem from that angle. As Henry Ford said, “If I asked people what they want, they’d ask for a faster horse.” Well, don’t make a faster horse.
Thanks for the 50 clap 👏🏻 if you enjoyed this article. This will tell me to write more of it! Also, leave your valuable feedback to improve
All this work wouldn’t have been possible without our magnificent NM team. Many thanks to all our cool guys!
Tregubov, Kirill Nenakhov, Kirill Shikhanov, Kristina Zholik, Marina Malyavko, Marina
Polozok, Mikhail Martinevskiy, Pavel Korol, Viachaslau Rymarchyk, Yaroslav
Budyanskiy and other teams involved in our project. Also, lots of thanks to Aliaksei
Dashkevich, Julia Kasper, Marie Smith, Dzmiter Kutaphin for the help in editing the
article.
In the Second Part of the Story
You will see how NM game cards were redesigned. Subscribe not to miss the release of the second part.👇
