Introduction:

This was a capstone project that we worked on with Activision. This project was divided into two phases; User Research and Visualizing the Concept, and this case study covers the latter. Being a design lead for the visualizing, I contribute to each step of the process, yet I was mainly involved in creating wireframes, UI design, prototypes, as well as rebuilding the sitemap. If you are interested to take a look at the User Research phase of this project, please use this link.

Challenge:

Call of Duty (COD) is a first-person shooting game that has over 110 Million Monthly Players across the world. Call of Duty Companion App is designed for COD players to play smarter and stay connected to the COD world. We were challenged to design a new feature for the Call of Duty Companion App.

Audience:

Research shows that COD players value efficiency and want to be in control which applies to both serious and casual players. Our target audience is casual players who claim themselves they are just playing for fun. They don't seek seriousness in the game but enjoy playing to release stress after works. They also see the game as their social tool to connect with their friends.

Pain Points & Insights:

Stats and Ops weekly challenges are the top 2 features that the current App. Although it communicates well to core/serious players, casual players often feel that Stats and Ops weekly challenges are too serious for them.

Moreover, casual players feel that current game guide in App and the official website are too serious (text-heavy) as well. At the same time, they still seek to learn and improve their gameplay.

Thus, casual players feel “the App is not for me“ (a user’s voice in interview), then go to a third party to fulfill their needs, learning what's the new update, tips & tricks of how to custom their weapon better, and game strategies.

Solution:

We proposed adding <video feed> to the current App. <Video Feed> welcomes various types of players including Casual players by providing educational videos for the players to play smarter. Research show that the learning experience is more fun and effective (people learn faster) with video than text format. In addition, our research show that watching video to learn is common behavior for video game players, and the demands has been increasing rapidly past years.

Timeline:

This project was broken down into two phases.

Phase 1: User Research ~ Concept (8 weeks)

Phase 2: Prototype (8 weeks)

Sitemap:

Where should we add <Video Feed> to current App?

I collaborated with an UX Architect in the team to observe current sitemap and update the sitemap for our prototype.

1. Add <video feed> under Intel

2. <News> and <COD League> can be separated from Intel

3. Add humbugger menu

4. Home Contents will change by the users needs

Wireflow & Wireframe:

How a user would use <video feed>?

I collaborated with other designers to write user scenarios, then sketched out the wire flow. Wireframe was created in Figma.

Stakeholder Feedback:

We shared our wireframes and get some crucial feedback before moving forward.

Usability Testings

Due to the Covid-19 pandemic, our team conducted all prototype testing remotely. We met with 6 current COD players, 1 hour each, in pairs of two (one interview lead, one notetaker). We divided testing responsibilities evenly amongst our group based on scheduling preferences for our participants.

Modification (wireframe):

By reviewing the insights from the testings, we revisited our wireframe to make modifications to our prototype. I revisited and used our user research findings to make decision. For example, we heard from the user testings that the users wish to have Filter and Sort to search a video. Our user research show that our users value customization and efficiency. There are also many kinds of video contents that each player seek for, such as review of game mode or the update, tips and tricks, or game-play to learn strategy. Therefore, I suggested the team to create unique filtering system that is customized for COD players specific.

Modification (prototype):