Call of Duty: Redesigning the User Interface for an online video game
Team: Just me. This is a project I took upon myself so that I might learn from the experience
My Role: UI/UX Designer and Information Architect
This project is ongoing and this page will be updated as I make progress
The Problem
First, some background on the product I am approaching for this redesign. Call of Duty is a popular first-person shooter video game with 23 different titles so far in the series. At present (January 2024) all of these titles can be accessed using an application called Call of Duty HQ that serves as a hub. For the sake of brevity, I will be referring to this as HQ for the duration of this case study. Most of these titles have a barrier to entry of $69-70, except for Warzone, which is free to play. I’ve chosen to focus my efforts on the experience of someone playing this Warzone game because the free-to-play model makes it more attractive for newer players. I believe these less experienced players would benefit most from an intuitive, streamlined experience because they are not already familiar with the features commonly used in Call of Duty games. With that in mind, I will be focusing on the user journey of someone navigating through the HQ user interface to get into a Warzone match.
My inspiration to undertake this project comes from a running theme within the Call of Duty player community and games industry journalists that for the past few years the user interface has not been meeting the players’ needs. My own experience with the games reflects this as well.
Examining the current state of the product
My education and experience have taught me that the first step of a UX overhaul like this is to develop a deep understanding of the information architecture that is currently in place. In figuring how the bones of the current product fit together I can take them apart and use them to assemble a new skeleton that will better serve the players.
I created this map to document the interactions that the player has to go through from launching HQ, to finally being in a Warzone match
Analysis and Revision
When examining the structure of this map, the first thing that caught my eye was the unnecessary bottleneck around launching Warzone. The player is made to select a game mode, then taken to the Warzone landing page (no matter which game mode is selected), and then made to once again select a game mode. My first task with my new information architecture was to eliminate this redundancy. Additionally, each game mode has its own sub-page where you then choose which version you would like to play based on the number of people you are playing with. In the interest of simplicity, I chose to eliminate these sub-pages and make everything accessible from the Warzone landing page. This way players can launch the game they want to play with minimal hoops to jump through. This also led me to remove the featured section from the game mode selection process. It mostly just took up space and did not add anything for the player. With everything displayed on one page there was no need to have some things displayed twice. Another change I made was to remove DMZ from the Warzone menu. Warzone is a free-to-play game that stands separate from the other titles in the series. DMZ requires the player to have purchased other titles so I felt it did not make sense to lump it into the Warzone menus.
This is a map of my revised structure that I will be using to design the new pages I create. My goal was to allow the player to launch HQ and be playing the game of their choice in only 3 clicks.
This is the user flow I wanted to achieve with with the revised information architecture. My goal was to make this as simple and streamlined as I possibly could.
Creating a new interface
Now that we have a possible new structure, What do the pages it represents look like? Does any of it work? Does it improve the player experience? It’s time to build it, test it, and find out.
First, I drew up a lo-fi wireframe with paper and pencil to help me visualize what these screens might look like
Screen 1: Rather than scrolling through each game vertically, I decided to display them horizontally as banners. My reasoning here was to allow the user to view all of their options on one screen and eliminate unnecessary interactions. I chose the tall banners because they provide enough of a surface to display artwork for each game.
Screen 2: The game mode selection screen retains much of the original design with each game mode represented by a tile displayed in rows. In the original design only one row was visible at a time and user scrolled up and down to switch between them. I chose to consolidate this into one screen so the user can see all of their options at once.
Screen 3: I chose to not to change the lobby screen at this stage of the design process. I felt this screen was fairly efficient and allowed the user to complete any of the actions they might need to before heading into a match.
Testing
I wanted to see if the assumptions I made rang true when I put this design in the hands of actual users, so I turned those sketches into a function prototype in Figma, found 3 people who had at least some experience with the game and had them complete a few simple tasks using the interface. I would have preferred a larger sample size but I had a research budget of $0 and I wanted to move quickly with this project. These are the main things I learned from observing them and listening to their reactions:
They found the simplification over the old interface refreshing
Screen 2 was eventually effective, but overwhelming at first. There’s just too much going on here for the user to absorb quickly
There was some confusion about choosing the game mode based on team size on screen 2, then choosing your actual party size on screen 3
Iteration
I rebuilt my original interface, preserving what worked and changing things based on the pain points I discovered during testing. I condensed the overwhelming grid layout on screen 2 to a vertical list in order to give the user fewer things to process. The user hovers over each game mode to view info associated with it, then clicks on the tile to move on to the lobby screen. Additionally, rather than have the user manually select their team size, this new version has the team size automatically scale to the amount of players in the users party.
Next Steps
Now that I have a wireframe I am comfortable with, my next task is to add things like color and style so it actually looks like something you might see in a Call of Duty game.