Redesign Overwatch Social

Interaction Design | Heuristic Evaluation | Usability Testing | High-Fidelity Design


Mickie is a pro player. He is only 24 years old. He has been played Overwatch since its open beta. He lives in Thailand, so he plays the US server because it has lowest pings. He plays the game for 3 hours every day. He is the best D. Va in the world and likes to play other tank heroes. Therefore, his favorite heroes are D. Va and Roadhog. His friend list has a lot of pro players and friends.


Add a new friend from a recent players tab after a game.

Mickie played a competitive match. He asked a Reinhardt to do an ultimate combo. The Reinhardt player used Earthshatter to stun all enemies after D. Va did Self-destruct. They got many team kills from this combo and won the game. At the end of the game, he voted Ana on his team and left the game. However, he realized that he should add the Reinhardt, so they can play together in the future. He clicked a social menu and then the recent game tab in Figure 1. He found 11 players he played 1 minute ago, but he could not remember the Reinhardt player's name. During the game, player icons were not shown, so he could not identify him by his player icon.

  • Figure 1: a recent players tab

Heuristic Evaluation

I applied only three usability heuristics from 10 Nielsen's usability heuristics on the social tab in Figure 1.

Match between system and the real world

Players should be ordered by time.

Consistency and standards

The look and feel of the recent players tab in the Figure 1 was consistent with the game user interface.

Recognition rather than recall

The recent players tab reminds a user about players in recent games. However, a user has to recall another player's name and level to adding him/her. If the user remember only the player's hero, he cannot identify a player in a game. A player icon is not shown in a players information of a game, so it does not assist a user to regconize other players in a game.

Aesthetic and minimalist design

It is minimalist and beautiful.

Players also cannot remember other players' names.

More people remembered a hero than a player name. I have done a pilot test. I asked a player in Overwatch Thailand Community in Facebook (62,900 members). If you would like to add a new friend from a current game. What player's information do you remember? 26 participants answered that they remembered other players' heroes, but only 15 participants said that they remember other players' names.

A Design Concept

  • The current player list will be sorted by time, so a player can be searched easily.
  • Each player information has a map information card that has a photo and a name of a game mode in Figure 3.2.
  • Each player information box will show pictures of three heroes played in a game in Figure 3.3, 3.4, and 3.5.
  • Teammates will have a blue box in front of their player icons, and enemies' box will be red in Figure 3.6. Meanings of both colors will be used consistently in the game.
  • This design supported additional game modes in the future.

Low-fidelity Wireframe

  • Figure 2: a new players tab

  • Figure 3: 1) A player icon, 2) A picture of a map and a name of a game mode, 3,4,5) Pictures of the most played heroes in a game, 6) The blue box means a teammate, and the red box means an enemy.

High-fidelity Wireframe

  • Figure 4: 1) A player icon, 2) A picture of a map and a name of a game mode, 3,4,5) Pictures of the most played heroes in a game, 6) The blue box means a teammate, and the red box means an enemy.

A player will use a map information, teams, and recent heroes to consider adding a new friend.

  • Figure 5: a new player tab