FINAL PROJECT: OVERWATCH 2

ELVTR UI/UX For Gaming - Daniel Wong
+ Click Arrows for next slides +

MY Roles + Responsibilities

As the UX designer I mapped out the journey of the player as they traverse through the game and defined all the options given to them. I designed the layout of the interface visualized through wireframes. I then conducted user research and implemented changes based on results.

On the UI design side, crafted full resolution mock-ups and assets for the interface then I defined the branding guidelines for all the UI assets.

About The Project

This project is the result of an 8 week design certificate course - User Experience/User Interface For Gaming by ELVTR - where the goal was to learn about the full process of being a UX/UI designer working in the gaming industry. The final project is a culmination of the assignments completed throughout the course, each of which relate to a part of the process of designing the UX/UI for a chosen game. This covers everything from the beginning stages of the player journey to wireframing the layout and finally the full resolution mock-up of the game. On top of this UX/UI ‘master-copy’, the results from the usability testing done on the wireframes inform the design iterations/improvements on the original design.

The game I chose to work on was Overwatch 2, which is a team-based first-person shooter that I am personally familiar with.

Challenges

  • Learn the process of designing UX/UI for a game from beginning to end
  • Conduct user research for the first time
  • Adapt traditional design principles and methodologies for gaming UX/UI

Length of the project

8 weeks

Work Process

Player Journey

Paper Prototype

Flow Chart

Wireframe

Usability Test

UI Moodboard

Style Guide

UI Mockup

Accessibility Test
(Color Blindness)

Player Journey

The first part of the project required me to go through and document the gaming experience: from starting the game, choosing a character, playing, and finally the end screen, while noting everything the player would see/hear, the options the players can choose, and what they would feel.Once the wireframes have been completed with the changes, I created the high resolution mockup as well as documented the assets and typefaces into a style guide.

+ Click Image to Expand +

Paper Prototype

After creating the player journey, I then took all the actionable items and options for the player and put these options on a ‘paper note’ for every screen in sequence from beginning to end.

+ Click Image to Expand +

Flow Chart

The flow chart is made based on the paper prototype and shows all the options and where each option goes. It also shows if a player makes a certain choice in each instance and where the decision leads to.After creating the player journey, I then took all the actionable items and options for the player and put these options on a ‘paper note’ for every screen in sequence from beginning to end.

+ Click Image to Expand +

Wireframe & Iteration

The next step of the process is to create the ‘bones’ of the design per se based off of the user flow and the current UI layout from Overwatch 2. Selectable options are colored in blue to let the player know. The wireframes below are the iterations after the usability testing. Try out the wireframe prototype here.

+ Click Arrows for next slides +

Usability Testing

The purpose of this stage is to have players of varying experience ‘play-through’ the game while I, as the test administrator, observe the players and take notes. At the end of the test I ask questions about their experience of the game and what they think about it. After compiling several tests, I then asses the results and make adjustments to the designs shown above.

+ Click Image to Expand +
Usability Test Results
  • 100% task completion rate
  • For the most part the UX flow was straight forward to the Play Testers
  • A little overwhelming for new players as some of the options weren’t descriptive enough
  • More experienced players completed tasks quicker and felt confident in options
  • Players felt stuck at the end Match Results screen. Need more options to allow players to exit the match or to play with a different team

MOCK UPS & UI STYLE GUIDE

Once the wireframes have been completed with the changes, I created the high resolution mockup as well as documented the assets and typefaces into a style guide.

Accessibility (Color Blindness Test)

The last part of the project was to conduct a Color Blindness Test as part of the Accessibility portion of the process. By uploading the screen shots of the game to an online color blindness test, I was able to see if there were any issues with legibility of the UI. The legibility was acceptable and no adjustments were needed.

Results

My goal for this course, as someone who has previously worked as a UX/UI designer in the tech space, was to learn the entire process as it relates to gaming. While many principles remained the same, designing for a game required a nuanced perspective.

The main challenge for this project was to conduct my first-ever user research test. Through this experience I gained a lot of insight through the process of confirming or challenging my design choices. This was a highlight for me as I gained a lot of confidence in my newfound abilities to quantify my decisions.

Through this ELVTR UX/UI For Gaming course project, I now have a greater understanding and actionable knowledge relevant to the gaming industry. I look forward to testing my knowledge on a game that I am passionate about.

DANIEL WONG © 2023