Christina B. Chan

Call of Duty Elite

OVER 2 MILLION CLANS. 
6.8+ MILLION MOBILE INSTALLS.
OVER 20 MILLION PLAYER ACCOUNTS.

With the release of a new game title every year, Call of Duty has become one of the highest grossing entertainment franchise of all time (e.g. Modern Warfare 3, Black Ops 2). Call of Duty Elite's goal is to extend the experience of each title by leveraging the game's vast amount of player data, creating an arena for competitive play, and most importantly building an online social community.

 

My Role: UX Designer
Call of Duty Elite spanned across game consoles, the Web, iOS, Android and the Windows phone. As the Lead UX Designer for Mobile, I oversaw the design and development for iOS, Android, and Windows 8 while working closely with other designers to create a cohesive experience across multiple platforms. My responsibilities ranged from defining the mobile strategy and vision, UX, visual design tweaks, QA, rapid prototyping, and product management

Date: September 2011 - Jan 2013

 
COD Header.jpg
 

My Role

Call of Duty Elite spanned across game consoles, the Web, iOS, Android and the Windows phone. As the Lead UI/UX Designer for Mobile, I oversaw the design and development for iOS, Android, and Windows 8 while working closely with other designers to create a cohesive experience across multiple platforms. My responsibilities ranged from defining the mobile strategy and vision, UX, visual design tweaks, QA, rapid prototyping, and product management. 

 
 

Our Approach to Cross Platform Design 

Among the many product I designed, Custom Class was the one of the most complicated and heavily used feature on Call of Duty Elite. Custom Class allowed players to customize and save different sets of weapons, scopes, perks, etc. It's only available in the game, but we wanted to give players the ability to modify their class outside of the game on any platform. I will use this feature as an example to explain how we approached cross platform design. 

 

Lead With a Platform

Custom Class demoed by a Call of Duty Player. 

We began our design process by examining the Custom Class interactions on the Xbox console. If you play around with Custom Class on any of the Xbox console, you'll begin to notice a few design paradigms. The controller consisted of a directional pad for (up, down, left, right) navigation across the menus, a Back button, a Select button. The further away an item is, the more clicks it takes to get there.

 

Understand Design Patterns - iOS and Android

After wrapping our head around Custom Class on the console, our team began discussing various design approaches for iOS and Android. Should we use native UI and controls? Are there commonalities we can share in both? We created iOS flows and mocks first and Android second. When we began our design for Android, we audited all our iOS screens for any platform inconsistencies. Where do the iOS designs break if we were to use the same design for Android? Due to the complexity of the different features especially custom class, we went with a more platform-agnostic design across both platforms. The user flows were almost if not identical. To keep the branding cohesive, we styled our UI mostly the same. We did, however, leverage the different native controls such as action sheets on iOS and Pop Up menu on Android. 

While you can access items on your screen quicker, the screen size is smaller. Going through the Custom Class flow on mobile required more a few more additional steps. 

 

Adapting to Larger Screen Size - Tablet and Web

iOS Tablet and Web

We took our mobile designs and adapted it Tablet. Larger screen means more room to fit elements. The final designs unfolded onto two screens. 

Custom Class web.png
 
 

Note: This is one way to approach cross platform design. Every project is different and every team is set up differently. Find what works for your team and your user base. 

orangebg.png
 
 

Sample UX Work

 

Evolution of the Dashboard

cod_dashboard.png
 

Live Streams

cod_livestreams.png