UX/UI Case study
Overview
Overwatch 2 is a highly anticipated sequel to the popular team-based multiplayer FPS hero shooter developed by Blizzard Entertainment. Players choose from a diverse roster of unique heroes and engage in 5v5 matches.
As a fan who has played since the beta, I was motivated to celebrate the release of Overwatch 2 by experimenting with what a mobile interface would look like.
Through the process, I conducted research and created player journeys, icons, wireframes, prototypes and testing.
rOLE
UX/UI, Prototyping, Visuals, Iconography
tEAM
Solo Queue
Tools
Platform
Mobile Gaming
Timeline & Completion
(10 weeks) November 2021
OBJECTIVE
Translate the player experience to a mobile platform while retaining the overall game aesthetics.
Design Process
constraints
Visual Design - Maintain the visual style of Overwatch and replicate the overall design systems of the game.
Experience Type - Creating a mobile experience of the game.
Integration - Convert key functions of the desktop game to mobile, rather than gameplay.
paper prototype & Flow Chart
Going through the Overwatch experience I noted the different stages that a player will go through when interacting with the main screens. I used this as a guideline to help me translate a similar flow when creating the mobile experience.
sketches
Home and Hero designs
Shop, Battle Pass and flow design
For my sketches, my core focus was how to fit the different menus, and buttons onto smaller screen sizes. I started of sectioning key components of the screens, and button layout and translating the mobile experience.
Wireframing
With a solid layout, I experimented with some of my designs through low-fidelity wireframes exploring different menu layouts for a mobile interface. I went through a few iterations until I decided on a layout that utilized smaller screen sizes but provided a good mobile experience for players.
I wanted to retain a sense of familiarity with the desktop version of the game while minimizing the amount of information overload. Dividing the screen between links to other menus on the left hand, friends and chat on the right side and settings and missions at the top.
On this screen, I encountered more difficulty in translating the experience due to the large amount of information being presented. This would be addressed later in this case study.
Designing for the shop layout I opted to utilize the mobile touch features found on mobile devices to allow scrolling and tapping to view items.
Players when viewing the Gallery should be able to navigate the section easily via touch and swipe. Implementing different filters and sections eases the navigation.
Similar to the Gallery, players need to be able to view different heroes, skins and preview abilities. Using a filter system allows for a better viewing experience due to the smaller screen size.
usability testing
Throughout the wireframe process, I conducted a usability test with 10 different players who had prior experience with Overwatch and mobile gaming in general. The feedback from these sessions provided insight into whether I was able to capture a mobile experience for the game.
Players noted the absence of the career page. Which players indicated was a key feature when measuring metrics, points and overall progress
The general layout of the mobile screen felt comfortable for most players. Players were able to reach buttons while holding an iPad and phone. Players did note the reasoning for separating the "Gallery" and "Hero" screens
Players intuitively used touch and swipe when navigating through the different screens.
The absence of the Career Profile was something I overlooked, players emphasized the importance of tracking key metrics like playtime, hero usage, and overall statistics which was especially important for competitive players.
Update 2.0
Upon moving to the high-fidelity designs I also sought out feedback on my designs through a mentorship with a Senior Designer to review and critique my designs. Suggestions that I implemented were:
-
Player flow,
-
Visual hierarchy
-
Readability
Updated player flow
Using the feedback I received I revisited my flow chart and revised how the "Gallery" and "Hero" sections should be displayed. Because items and cosmetics were primarily based on heroes I decided the flow would be more intuitive if both sections could be combined.
INTERACTIVE PROTOTYPE
Moodboard
Iconography
Visual design
Reflection
As a player who has followed Overwatch's development since the first beta, I enjoyed the opportunity to work on this case study. This project taught me some valuable lessons:
Lesson #1
A Mobile Gaming Experience
There is more consideration for a mobile experience than just screen size, UI adjustments and touch features.
Lesson #2
Testing with Low Fidelity First
Testing with low-fidelity wireframes allowed me to adjust and pivot my designs more effectively based on feedback.
Lesson #3
Visual Hierarchy
The feedback I received was my visual hierarchy to design my UI to be scannable for players and reduce visual strain.
