top of page

Overwatch 2:
Case Study

UX/UI Designer:

Faraz

​

Tasks:

• Player Journey

• Paper Prototyping/Flow Charts

• Wireframing

• UI Mockups

• Accessibility

• Style Guides

Project Overview

Finalized mockup of the overwatch gameplay screen showing UI created in Adobe Photoshop

Product​

Recreation of Blizzard's FPS: Overwatch 2

Length

~ Approximately a week

Problem

Case study of Overwatch 2's UX/UI

Goal

Recreate Overwatch 2's UX/UI with improvements

Work Process

Player
Journey

Paper Prototype

Flow Chart

Wireframe
Design

Usability Test

UI Mockups

Accessibility

UI Style Guide

Understanding the Player

Player Journey

Let's bridge the gap between game developers and players through a common player journey for Overwatch 2. Only some of the screens for the player journey is shown here. The screens are designed by Blizzard and the screenshots come from Unknown's gameplay on YouTube

Overwatch 2 main menu showing various menu items the player can click on

Players see a bunch of menu options with UI feedback

Players feel the main menu is clear and straight forward

Players click play to begin playing which is the first option available

Opportunity: Add "options" to the list of less relevant options

[Faraz Forghani]. UX_UI for Gaming. Class 1-13 (6).png
Overwatch queuing screen where the user can pick between different game modes while waiting and see the queue time or browse other parts of the menu

Players know they're in the queue via text and a sound effect

Players are relieved, but could be frustrated if the queue time is very long

Players select practice range (while waiting in the queue)

Opportunity: Add an estimated queue time

Overwatch character selection screen showcasing gamemode, hero name, your team members, and a list of heroes to pick from.

Players see a text "assemble your team" with a list of hero choices. Audio feedback is also present 

Players find it clear that they selected a character, but might be nervous while waiting 

Players click ready and refresh themselves on the hero's ability

Opportunity: Not available

The gameplay screen for Overwatch showcasing the heroe's abilities, health bar, and objectives in the UI

Players are in first person view, can view the objectives with a timer for the game to start

Players are more confident now that they've tested the controls for a bit

Players familiarize themselves with the game while waiting to start

Opportunity: 

Provide the player with some tooltips that help ease nerves

Paper Prototypes

[Home Screen]

​

Players can choose between options

[Game Mode Screen]

​​

Players can choose game modes

[Game Mode Screen 2]

​​​

Players can choose sub-game modes

[Queue Screen]

​​​

Players are standing by to start the game

[Loading Screen]

​​​​

Players know they have entered a game

[Character Selection Screen]

​​​​

Players can choose a character and lock in

[Gameplay Screen]

​​​​

Players know they are in the game, start playing, and know the objectives

[Defeat/Victory Screen]

​​​​​

Players know they lose (and why) and how to do it differently to win

Next, I laid out the screens and what each player can do on each screen (the paper prototype)

Flow Chart

Now that all the screens are determined, here is a user flow for a capture the point/push the payload game

[Faraz Forghani]. UX_UI for Gaming_edite

Starting the Design

Wireframes 

The wireframes were designed based on the current structure of the game. The wireframes were then refined based on usability testing. Everything in the wireframes was made from scratch except the Overwatch 2 logo which belongs to Blizzard and grabbed from the internet

[Faraz Forghani]. UX_UI for Gaming. Class 1-13 (17).png

Usability Testing

The research objectives of the usability test were:

Evaluate the usability of each screen (main menu, gameplay, character selection and queue screen)

Do players understand all the options shown on the screen?

How do players feel about the improvements suggested on 3 out of 4 of those screens?

Iterate design based on the feedback given by players

  • Participants: Two male participants (age 31 & 33)

  • Background: Have played limited amount of Overwatch

  • Platform: Figma static wireframes (moderated)

[Faraz Forghani]. UX_UI for Gaming. Class 1-13 (14).png

What is account

merge?

Confused what [ESC] does here

Most options were clear on this screen

I like this feature but only at low levels

Everything else was understood the way it was intended

Maybe there should be a difference between queue time and estimated

Do these correspond with open queue and PC pool?

Post-Usability Wireframes 

Two of the four wireframes were iterated based on the feedback from the usability test

AFTER

BEFORE

  • Added an information icon next to merge that shows information when hovered

  • ​Changed the wording of "MENU" to "OPEN SUB-MENU" because users were confusing it with closing that menu they were in

AFTER

BEFORE

  • Made the queue time bigger and more bold than the estimated time

  • Removed the alignment with the left side and put a box around them to indicate that it's in its own section

Refining the Design

Mockups

The following mockups were created in Adobe Photoshop based on the wireframes that were tested. The Overwatch 2 logo, profile picture, hero portraits, and gameplay screens belong to Blizzard, but everything else is created by me

Accessibility

These mockup screens were checked in all eight filters of the color blindness simulator (Coblis)

Color blinding simulator test with eight filters conducted on each screen

Only one noticeable issue was identified in the monochromacy evaluation of this screen, otherwise everything else already stands out on the other screens. The "attack" text and usernames were not that legible so I fixed that in the new iteration

[Faraz Forghani]. UX_UI for Gaming. Class 1-13 (22).png
[Faraz Forghani]. UX_UI for Gaming. Class 1-13 (23).png

BEFORE

AFTER

UI Style Guide

[Faraz Forghani]. UX_UI for Gaming_edite
bottom of page