UX/UI in Gaming

Tools

Figma & Photoshop

My Role

UX/UI Designer

Duration

7 Weeks

Type

Course Project

Completed for ELVTR's UX/UI in Gaming course, I explored how game design decisions are communicated to players and proposed solutions to enhance the overall user experience, particularly for newcomers entering the vibrant world of Overwatch 2.

A Hero’s Journey

OVERVIEW

Heroes, Assemble!

CHALLENGES

  1. Lack of experience: Approached the project with limited knowledge of Overwatch 2 and the First-Person Shooter genre.

  2. Tight Deadline: Focused on core improvements to meet time constraints.

  3. Designer Blind spot: Designed without developer insight.

  4. Limited Resources: Lack of access to the in-game UI assets.

Design Process

The New Player Experience

PLAYER JOURNEY

Mapping the Objective

PAPER PROTOTYPE & FLOW CHART

Initiating the Solution

WIREFRAMING

Play Screen

Objective Information

Customization Tab

Gathering Feedback

USER TESTING & ITERATION

To understand the needs of all potential heroes, the usability test assembled a diverse squad of three players: a newcomer, a seasoned Overwatch veteran, and another somewhere in between.

The feedback gathered from this testing allowed me to iterate on the previous wireframes.

Key Findings

  • There is a lack of information about each game mode and the options.

  • The new player had difficulty closing the ‘Map Overview’ page.

  • Objective information is too vague, lacking crucial details for new players.

  • Some items listed are no longer in the game.

  • Health packs have additional effects and a recharge time.

Iterated Play Screen

Iterated Objective Information

Capturing the Visual Identity

MOOD BOARD & STYLE GUIDE

The Ultimate Design

FINAL MOCKUPS

Combining the opportunities discovered in the player journey, and the usability testing results, the final mockups were created.

To preserve the iconic UI style of Overwatch, each asset was carefully constructed to fit within the game’s interface.

  • To reduce the number of pages, each game mode is listed vertically to allow room for each option’s details to be displayed to the left.

  • The exisiting cards, displaying the game mode options, were simplfied into a single page.

  • As a new player, the thousands of customization options were overwhelming. The new design adds in additional filtering, a search feature, and a new layout to increase player mobility.

  • The new map overview page, taking inspiration from the ‘Hero Information’ design, outlines crucial details for new players to understand the game’s design.

  • The map’s objective is a crucial aspect to winning a match. Multi-step objectives, such as Hybrid, are displayed on the left of the screen.

Leveling Up!

REFLECTION

Outcomes

  • Embraced the challenge of designing for an unfamiliar game, cultivating valuable UX/UI skills in the process.

  • Immersing myself into the world of OW2 allowed me to appreciate its unique approach to design.

  • The design was able to reduce the number of screens when selecting a game mode.

  • The map information is easily accessible to best inform new players when going into a match.

  • The new customization tab allows players to locate the many options, quickly and efficiently.

In the Future

  • While colorblindness was considered, further testing is crucial to ensure the design is truly accessible for all.

  • Conducting another round of usability testing could provide valuable design feedback to take the mockups to new heights.

  • My passion lies in optimizing user experiences, particularly for newcomers: I'd love to delve into potential improvements for Overwatch 2's onboarding flow.