Overwatch Training Screen Design

I created an unsolicited redesign of the Activision Blizzard Overwatch game’s Training screen & some community features for it.

I made this in Figma. Most of this was done by taking screenshots out of the game & emulating new screens in the same style. Some parts (e.g., icons & Orisa pic) were taken from Google images. Many other parts (e.g., the Endorsement icons, rewards icons, etc.) were created by me. Fonts used are Big Noodle Oblique, and Nimbus Sans (not sure if Nimbus is exactly right, but it’s the closest free font I could find).

Design

General

There are two main parts to this project.

The first part is the primary “Training” screen. This screen combines a list of training game modes, the “Tips” card that shows in game, as well as some existing training modes (Tutorial, Play vs AI, etc.) that already exist in game. They’ve simply been organized a little differently. A sub-screen of the main training screen shows a list of curated video and text guides players can read for improvement.

The second part is the “Hero Info” screens. These screens provide a way for players to access real, specific in-game numbers. Currently there is no way to access these numbers or information about hero abilities. Players have to go into the workshop or figure it out on their own or read a potentially out-of-date Wiki page. These hero info screens aim to give players a way to access very specific numbers and detailed data about a hero.

Community Suggestion

A huge part of this could be used to build community/good-will within the Overwatch community. It is not totally necessary for a redesign — all the movements of current practice modes and screen additions could be made without this additional community-building stuff. However, because there are a great many Overwatch players who want to contribute and teach others, this could be a good community-building opportunity as well. Players can be incentivized to use this menu by rewarding XP/coins/endorsement points/gold gun points/etc. (the minor rewards we already have in the game) when they watch a video, complete a training mode, etc. Creators can get prominent shoutouts to their username so they can feel good about seeing their name somewhere really prominent in Overwatch. Most people aren’t good enough to see their name on the T500 board… way more people can dream of seeing their guide video or in-game tip on the Training screen! Players can also be allowed to reward creators directly with endorsements, gold coins, XP points, or golden gun competitive points.

Goal

Make community-created resources such as custom game modes/workshop codes, tips, video/text guides, and other resources far more accessible to players who want to learn by adding a “Training” sub-menu screen in the same style as the Arcade sub-screen.

Justification

Overwatch needs better training materials in-game. The tutorial, the training grounds, the in-game info about abilities — all of it is very, very basic. We have the same Soldier tutorial from 2016. The Practice Range has long been known as needing improvements — and with the advent of improved Practice Ranges made by Overwatch creators, there’s little reason to even use the base range anymore. Lastly, a final issue is that there is no way to access the numbers on a hero (e.g., exactly how much damage or healing per shot Ana does) without setting up a workshop or looking up a potentially inaccurate out-of-game, third-party wiki.

But Overwatch is a complicated game. New and casual players often seem stuck on permanent “???” because there’s so much going on, so many different abilities, etc. Everyone I talk to who used to play, but doesn’t anymore says “the game is crazy/chaotic.” I know there’s only so much training materials can do for that, but the game also offers very little in the way of improvement. Players have to “git gud” with almost no help from the game itself.

Yet with the advent of the workshop and custom game modes — people have been putting out incredible resources, new training modes, new PVP game modes, and more for training and improving and learning the game. Making that more accessible, all while making the Training menu have more use, would be great for players. The community features have the added benefit of giving more use to the Endorsement system. There is additional potential for finally having justification to move golden gun competitive points out of competitive mode alone.

Year

2020

Responsibilities & Tools

Figma, Big Noodle Oblique (font), Nimbus Sans (font)

Credits

Overwatch is © Activision Blizzard.

  • This screen primarily contains a list of all training game/workshop modes (excluding “fun mode” stuff like chill games, workshop RPGs, etc.). Play vs AI is moved to a mode in this list, always pinned to the top, and clicking on the AI mode in the list brings up the same difficulty selector that exists now. This screen also contains cards for the current Tutorial and Practice Range. Selecting Tutorial works as it does now. Selecting “Practice Range” filters the game mode list to just Practice Range variants, with the classic Practice Range always pinned to the top of the list. There are also two new cards, each leading to a new sub-screen detailed below: community-created video & text guides, and detailed hero information. The rotating death “Tips” card also shows on this screen. A large button at the bottom encourages users to submit workshop modes/guides/tips. Lastly, community rewards are shown in two places on this screen. Firstly, players can earn rewards for using features in this screen (similar to the Arcade). Secondly, creators can earn rewards (gifted by the community/players, for free) when they add game modes, guides, tips, etc.

  • This screen contains a list of text & video guides created by the Overwatch community. You can search/filter (e.g., “Orisa guides” or “Diamond guides”). Additionally, there are four “verified” featured guides with large thumbnails. Opening a guide from the cards or list opens it in a browser window. The rotating death “Tips” screen also repeats here. And again, you can see (and reward) the creator of a guide or tip on this screen.

  • This screen contains the most basic information about a hero, such as their class and base movement speed. A button at the bottom brings the user back to Screen 2, with “Orisa” already on the text filter to bring up Orisa guides. (Note: the intent is to keep the simple information as is for Hero Gallery & F1 presses in-game, while giving people a way to access those in-game numbers if they investigate for them.)

  • This screen shows the basic information about an ability, as selected by the icon menu just below the hero name. In addition, a “Modifiers” menu appears toward the bottom. The “Modifiers” menu allows the user to toggle modifier abilities such as Amp Matrix, Nanoboost, etc. and see how those abilities change the hero.

  • This screen shows another basic ability, but this time the modifiers menu at the bottom has been used to show Orisa’s damage reduction changes with Nanoboost. Additionally, Orisa is pictured in gold to convey that the image/video to the right side should reflect the ability currently selected.

  • This screen shows an Ultimate ability. The primary difference between Ultimates and regular abilities is the new “Voice Line” feature — this allows users to playback both friendly and enemy voicelines for the ultimate.