UI / UX Design
Wireframing
Game Case Study
Overwatch 2
Role
UI/UX Designer
Length of Project
6 weeks
Deliverables
UX Research
Flowchart
Wireframes
Prototype
UI Mockups
Overview
This case study will review and evaluate the player journey through the game selection screens in Overwatch 2. Overwatch 2 is an online first-person team-based shooter game developed by Blizzard Entertainment and features multiple heroes with unique abilities. The purpose of this case study is take a closer look into the player journey and experience when choosing game modes to play.
Challenges
The main challenge is figuring out the player experience from launching to playing the game, seeing if there is any confusion during the game selection process and whether I can create a better overall experience for the player. In order to do this, I must first understand their journey while playing Overwatch 2. I plan to propose UI/UX recommendations that will improve the overall player-game interactions by merging elements and minimizing the number of screens.
Work Process
Player Journey
Paper Prototpye
Flow Chart
Wireframe
Usability Test
UI Mockups & Style Guide
Player Journey
As previously mentioned, I was able to observe the player experience while watching gameplay using YouTube videos and my own experience. I've outlined the journey below to give the viewers a better understanding of what the player is thinking and feeling during the game. This allowed me to have a clearer idea of the player's journey when navigating through the game selection screens. I noticed the amount of screens the player had to click through to play the game was excessive and could be reduced.
Screen 1: Player selects Unranked Mode.
Screen 2: Player selects open queue mode.
Screen 3: Player selects role option & starts new game.
Screen 4: Player chooses to wait for new game to start.
Screen 5: Player selects character.
Screen 6: Player shoot opponents to win the objective.
Paper Prototyping & Flow Chart
For a better visual experience, I created a paper prototype to see the screens laid out, mapping out the interactions. This a clearer way to visualize the game options the players experience. Each sticker note is an option created by the game designer.
This flow chart shows the navigation process in more detail; from the home screen screen to the game play. This was able to help identify essential steps and an overall bigger picture in the player journey. I highlighted a key area where we can reduce the number of screens and condensing the experience so players aren't confused. The gray boxes are game screens and the blue boxes are player interactions. The light blue diamonds are game decisions.
Iterated Flow Chart
I update the flow chart to create a better overall experience in the player journey when choosing game modes and highlighted the changes made to the previous flow chart. I minimized the screen to just one "game mode" screen so the players can see all the options they've chosen. This was used to then create the lo-fi wireframes seen below.
Lo-Fi Wireframes & Prototype
I created low fidelity wireframes of a new player experience when choosing between game modes. I wanted all the information on display so there would be no confusion on the player side. This version will be used to test the player experience. Click through to see all the screens.
Usability Testing
Player 1
Player 2
Player 3
The research objectives for conducting the usability testing was to evaluate any miscommunications within the game mode screens. Can players remember what game modes they selected when going through the process? I conducted my testing with 3 users from different background (gamers/non-gamers) within the timeline given for this project. With the creation of the wireframes in Figma, I was able to prototype an experience for the users to test. Using their feedback, I was able to create an updated version and, using the Overwatch 2 UI, create a mockup.
Here are the tasks they were given:
Task 1: Navigate game mode screen.
Task 2: You’ve already selected ‘Play’ from the home screen. You want to play Unranked Quick Play and Role Queue with Damage selection.
Task 3: Select Ready to begin playing.
UI Moodboard & Style Guide
Accessibility Check
In order to create the best experience, I needed ensure that the game was accessible to everyone. I conducted colorblindness checks to ensure that the colors picked will work well with people with these disabilities. Apart from choosing the right font size and iconography, these color check helps provide a more inclusive experience when playing Overwatch 2.
Outcomes
According to the testing conducted, users were able to easily navigate the game mode screens. The positive feedback concluded that this experience was a simple and enjoyable one. There was no confusion or question about the game modes chosen because it was displayed on the same screen. However, because I did not have a larger testing group, I believe this outcome was not thoroughly tested to be incorporated in the new gaming experience. Although the project was effective in combining elements, and the players appreciated the new experience, I believe there is room for additional development.