Call of Duty: Warzone

Role: UI/UX Design Intern

Tools: Figma, After Effects, Perforce, COD Launcher, Ape

The Problem

How do we design content to be easily understood by players while adhering to the new game’s visual style?

Call of Duty is a military first-person shooter game. Modern Warfare III is the third installment of Modern Warfare trilogy, and contains three game modes: Campaign, Multiplayer, and Zombies.
Raven Software, the studio I interned at, worked on the development of the Multiplayer game mode.

The task was to create various new Havoc and Perk icons for the game, which had be square and readable at a very small size.

- I started off with depictions of equipment, but depictions of effects are often more readable. I learned that icons don’t have to be too literal, particularly with icon D3; focusing more on the effect of a snapshot grenade (highlighting enemy silhouettes, like radar) rather than the shape of the physical grenade.
- Line width affects readability; thicker lines help icons read at a glance, and consistency with pixel width helps multiple icons feel cohesive together

- Perk Icons had more values allowed in their style, so balancing detail became a bit more involved, in addition to shape and composition
- Visual language consistency between similar effects was also used more. This can be seen in several icons, but standouts include A5, A1, and C3. Based on the visual language of the Fast Hands perk from MWII, perks relating to speed all utilize a fading silhouette.

One of my tasks was to recreate existing assets to be vectorized, editable, and then to add them to a Figma Library
- The Figma Library allows for UX designers to pull the assets they need and configure them into widgets for hi-fi mockups
The biggest challenge was figuring out how to set up frames and layers to make the dynamic resizing work, especially with multiple strokes and smooth gradients.
Assets also had set properties so the states of buttons or the type of icon could be easily switched between in the final asset.

The task for the victory/defeat animations was to take existing After Effects files and alter some details to fit the new game.
The main challenge was learning to navigate After Effects and use advanced features to design efficiently
- I especially learned a lot to do with nesting pre-compositions, expressions, controllers
It was also interesting to explore the visual style of the new game, which involved a lot of glitch effects, chromatic aberration, and scanline and halftone textures