This is my first case study where I look at Overwatch 2 with regard to good user experience and design. After spending time with the game, I believed there were improvements that could be made with a focus on a collaboration Blizzard had going on over the duration of the project.
Roles & Responsibilities
UX Designer
UI Designer
UX Researcher
Challenges
Learning and applying priority hierarchy
Finding the appropriate balance between the size of assets and padding / leaving room for margins
Creating buttons with consideration to localization
Clarify developer intentions to the player and align with the player experience
Streamlining the user experience
Length of Project
8 weeks
October 2023 - December 2023
Work Process
Player Journey
In the player journey I breakdown:
The game designer’s intentions
The actions the player makes
How the player feels when doing an action
Opportunities to improve on the current iteration of the game
Player choices and screenshots from Unknown's "(1 HOUR) No Commentary Overwatch 2 (PC 1080p 60)" gameplay video
Paper Prototype
In the paper prototype I map out the options on each screen that are relevant to the gameplay loop shown in the player journey
Flow Chart
In the flow chart I reduce the options on each screen to what is needed in the core gameplay loop and visualize the process step by step
Wireframe
For the wireframe I map out the first iteration of the title screen and other menus
This is also where I began to make changes to the flow of the menus in an attempt to cut down on the amount of screens needed to get in game
Changes:
Challenges tab grouped with Progress
Career profile accessed through Social and the player name
Added window to promote Le Sserafim bundle
Same window can be used to fill out space and draw attention to future sales or bundles
Changes:
Role queue and open queue lead straight to lobbies now
Mystery heroes, deathmatch, team deathmatch, and arcade grouped into Other Games to reduce clutter
This also separates more “fun” game modes from the standard Overwatch game mode
Changes:
Queue type and role selection have now been combined
Reduced amount of screens needed from title to hero select from 6 to 4
Changes:
Role selection menu is no longer a separate screen
Usability Test
I had to test the effectiveness of my changes to find out if they created an efficient, memorable, and satisfying experience for players
Here I show the testing process and highlight three profiles used
-
Task 01 Complete? [No]
Wording of modes was slightly confusing
Task 02 Complete? [Yes]
First half of screens were easy to navigate, last one was troublesome (1:10)
Task 03 Complete? [No]
User forgot to click queue button during second trial (1:21)
How was your experience navigating the design?
Notes: Color was monotone, task was unclear, role queue and open queue is unclear
What did you think of the layout of the content?
Notes: Presented plainly (good), People can see “Play” is higher in hierarchy, “Other games” wording could be changed
How do you feel about the information presented on each screen?
Notes: Progress should go under profile, why does Social button exist when there is a profile on the top right
-
Task 01 Complete? [No]
Wording of modes was slightly confusing
Task 02 Complete? [Yes]
First half of screens were easy to navigate, last one was troublesome (1:10)
Task 03 Complete? [Yes]
User forgot to click queue button during second trial (1:21)
How was your experience navigating the design?
Notes: Easy, straight forward
What did you think of the layout of the content?
Notes: Reminded of mobile games with easily accessible buttons within a reasonable proximity of each other
How do you feel about the information presented on each screen?
Notes: Font is ugly, some buttons are too big, pictures chosen worked well together, Logo placement can be different or in button, interesting presentation of information
-
Task 01 Complete? [Yes]
Understood menus but wanted to explore other options first
Task 02 Complete? [Yes]
When refocused on the task, user completed test in a shorter amount
of time (2:12)
Task 03 Complete? [Yes]
User has fastest completion time in entire trial (0:29)
How was your experience navigating the design?
Notes: Straightforward, role color is hard to see, competitive / unranked should be emphasized more, would prefer to choose comp / unranked after clicking queue button
What did you think of the layout of the content?
Notes: Looks standard to similar titles, nothing stands out as either good or bad
How do you feel about the information presented on each screen?
Notes: More detail for role and open queue would be helpful for newer players
UI Moodboard
Style Guide
UI Mockup
The final iteration of the reworked Overwatch 2 title screen and lobby
Final UI mockups with achromatopsia, deuteranopia, protanopia, and tritanomaly filters
Accessibility Testing Previews
Outcomes
Learned to create assets with limited resources and time
Reduced the amount of clicks / screens needed to begin the gameplay loop
Ensured players can easily navigate through screens in a satisfying manner
Gained an understanding of the process that goes into creating the environment a player interacts with
Post-Mortem
This project was my introduction to UX / UI as a whole, not just in the gaming space
If I had more time I would have loved to tighten up the assets and made them look nicer
I’m really proud the work I did even with the time constraint and how little experience I had coming into this project
Bonus:
Download my full case study here!