explore a thrilling new take on the classic hero-shooter!
The purpose of this project was to apply fundamental UX / UI principles learned in the course as we redesigned a game of our choice. My concept was to explore the darker side of Overwatch, and create new villains that would stand alongside the current villains from Talon and Blackwatch.
Week 1: research and player journey
Week 2: user flows and personas
Week 3: wireframes
Week 4: testing
Week 5/6: high fidelity mockups
Week 7: accessibility and testing
User research
User flow designs
Interactive prototypes
UI design
UX design
Usability testing
Wireframes
follow the payload!
As a competitive Overwatch player of over eight years, I felt I possessed a solid understanding of the game and its relative mechanics. To avoid bias, I researched the player base and took notes about community opinions from discord servers and popular streamers. Additionally, I read comic summaries and watched numerous videos on the lore. With this in mind, I began drafting user personas, player journeys, paper prototypes, and wireframes. Usability testing was conducted through Maze, followed by adjustments based on feedback and to account for accessibility.
player journey
When creating the player journey, I focused on addressing what players see, think, hear, feel, and say. In doing so, I was better able to break down the journey into subsegments to better identify in-game pain points and opportunities. I focused on establishing unique player experiences by providing a fresh gameplay perspective from various villains, and immersive gameplay with cohesive abilities and storylines.
user flows
Flow for how a user would initially launch the game and begin playing for the first time:
design
villain concepts
villain portraits created by midjourney AI
testing
Testing was done asynchronously through Maze, which records user paths and the time spent to complete given tasks. When testing, I focused on observing the paths that users took the begin playing and how they interacted with in game abilities
objectives
Do players understand all options presented on the home screen?
Do players understand the purpose and intention of the villains screen?
Are players able to understand the ability description?
How do users feel about the amount of information presented to them in the villain select screen?
How do users feel about the amount of information presented to them in the villain select screen?
Can players understand the task given on the gameplay screen?
Do players understand the task given on the gameplay screen?
Can players understand the task given on the gameplay screen?
Do players understand when skills are available on the gameplay screen?
results
Home screen: options are understandable and relatively simple
Villain profile screen: font was difficult to read
Villain profile screen: information about the villain’s background should be relocated from theselection to profile screen
Villain select screen: the additional description felt unnecessary
Gameplay screen: users did not notice the mission
Gameplay screen: the way the mission was presented did not feel “important”
Gameplay screen: presentation of skills felt confusing
Gameplay screen: disliked the layout of the skills?
accessibility
To account for color blindness, all four screens were tested for: red-blind/protanopia, green-blind/deuteranopia, blue-blind/tritanopia, monochromacy/achromatopsia, and blue cone monochromacy. Out of the 24 tested screens, most problems were in regard to monochromacy/achromatopsia and red-blind/protanopia.
final designs
victory!
When having users complete the same tasks of beginning a game and viewing the villain profile:
task completion
100% of players had a direct success rate with completing tasks; users completed all tasks without assistance
game selection
100% of players felt the game selection screen was straightforward and easy to understand
map understanding
100% of users were able to identify and differentiate between teammates and enemies on the gameplay screen
ability understanding
92% of users understood what their villain ability was, and were able to activate it in the gameplay screen
main takeaways
Working directly on a project that is based around an industry that I would love to enter was an invaluable experience for me. In this project, I had to apply an extensive amount of knowledge I already knew about design but expand on that due to how dynamic video games are. Additionally, learning firsthand from Ivy Sang, the lead UI designer at Blizzard, helped me visualize how much further I want to grow as a designer.