SuperCard_Banner_1600x480_Dark.png

Case Study: WWE SuperCard

Case Study: WWE SuperCard

SuperCard_Banner_1600x480_4.png

CASE STUDY:
WWE SUPERCARD

Company: Cat Daddy/2K Games | 2016-2020
Role: User Experience Designer

As a UX Designer at Cat Daddy/2K Games, I was solely in charge of improving and revamping the entire mobile app experience and designing new live features for WWE SuperCard, a collectible card-battling game on IOS, Android, and Amazon.

Highlights

After making many changes to the overall game experience, we saw significant improvements in the app ratings, player retention and satisfaction, and increased monetization.

 
Final Main Menu and Splash Screen art by Dan Kircher and final UI art by Casey Burpee.

Final Main Menu and Splash Screen art by Dan Kircher and final UI art by Casey Burpee.

The Process

I worked directly with the stakeholders and leads (CEO, creative director, product owner, game designers, artists, engineers, and producers) to ensure that my ideas and design solutions not only improved the player experience but also successfully met the business goals.

 
DesignProcess_1600x400.png
 
Divider_DarkRed_Brown_360x5.png

IMPROVING THE APP EXPERIENCE

The Problem

The apps UX and UI were inconsistent, noisy, and confusing. This created an overwhelming experience for new users and made it difficult for users to focus on the most important features, understand how to use the app, and play different game modes. This also contributed to the apps larger file size.

 
Old screenshots from when I first started working on WWE SuperCard. There was a lot of art and animation noise, repetitive information, inconsistent button styles and placement, and overly complex navigation.

Old screenshots from when I first started working on WWE SuperCard. There was a lot of art and animation noise, repetitive information, inconsistent button styles and placement, and overly complex navigation.

What I Did

  • I worked with the product owner and team leads to reduce the players cognitive load by building UX patterns and design systems that improved consistency, got rid of a lot of duplicate assets, and reduced the apps file size.

  • I conducted user research/competitive analysis on other WWE apps and games.

  • I conducted user testing in house and also worked with an external team at 2K Gamelabs.

  • I took my findings, created a prioritized list, and updated and iterated on those designs until the stakeholders and team leads agreed on the designs.

 
A few of the many wireframe variations I created for the main menu redesign.

A few of the many wireframe variations I created for the main menu redesign.

The Goals

  • Longer player engagement.

  • Better player retention.

  • Improved look and feel of the app.

  • Reduce the apps file size.


The Challenges

  • Updating UX on a two-year-old app, while the app was live was a difficult process. It’s kind of like performing surgery. If we changed it all at once, it could have negative effects on the players that have formed mental models and established patterns on how they interact with the game. It could also potentially break a lot of code when implementing sweeping changes like this. It took many small changes over a longer period of time.

  • It was important to touch base with the stakeholders throughout the process to make sure I was pulling features from a prioritized list that was in line with the business goals.

  • Working with a 30+ person team to improve the apps file size, network issues, hierarchy, contrast, colors, noise, and many font styles was a complex problem that happened over multiple updates.


The Results

  • Retention improved for new and old players.

  • The improvements greatly reduced the file size of the app, which improved the experience on lower-end devices, and allowed more people to download the app. It also allowed us to create more content.

  • The game looked new, fresh, and more consistent, which helped the app get featuring and more installs.

  • We were able to reduce the cognitive load for the player over the course of two seasons by reducing the number of game modes shown at one time.

 
Final screen designs. Final Main Menu art by Dan Kircher and final UI art by Casey Burpee.

Final screen designs. Final Main Menu art by Dan Kircher and final UI art by Casey Burpee.

Divider_DarkRed_Brown_360x5.png

UPDATING THE FIRST TIME USER EXPERIENCE

The Problem

  • Players were trapped in the on-rails portion of the first time user experience for too long.

  • We unlocked too many features at once. It was overwhelming and confusing.

  • Many features in the game didn’t have tutorials.

  • We didn’t teach players the value of purchasing card packs, using boosts, or how to purchase them.

  • Players weren’t relating to the Superstars they were collecting at the beginning of the game.

  • There were a lot of bugs in the first time user experience. Players were losing in the tutorials, getting kicked out of features, and certain stores weren’t showing up.

 
There were many different tutorial styles and types in the game at one time. Most of them required a lot of reading, which user testing showed, most players didn’t do.

There were many different tutorial styles and types in the game at one time. Most of them required a lot of reading, which user testing showed, most players didn’t do.

What I Did

  • I worked with the CEO, creative director, and product owner to make most of the tutorial context-sensitive so that players wouldn’t feel stuck.

  • I created a prioritized list, starting with game-breaking bugs. I also conducted user testing within the studio, but it was difficult to get unbiased data.

  • I worked with 2K's Gamelabs, an external user research group, to start user testing. It was clear once we had some real data that there were a lot of changes that needed to be made.

  • I worked with the stakeholders and the product owner to create tutorial card packs that allowed players to pick between three different starter packs in the store so they could connect with the Superstars they were interested in.

  • I worked with the product owner and producer to create one document that included all of the first time user steps so that the data analyst and engineers could create hooks, which would allow us to see where players were dropping off.

 
User Testing with 2K Gamelabs. By allowing players different card pack options to choose from, it helped players identify with the cards and become more invested in the game.

User Testing with 2K Gamelabs. By allowing players different card pack options to choose from, it helped players identify with the cards and become more invested in the game.

The Goals

  • Improve retention.

  • Improve player engagement.

  • Players should understand the apps core loop and features.

  • Players should connect with the Superstar cards in the first card pack that they open.

  • Players should know where the store is and how to purchase card packs.

The Challenges

  • The first time user experience docs were all out of date, incomplete, and in a bunch of different places.

  • There were no data analysts in the studio or hooks in the first time user experience when I started.

  • I had to start user testing within the studio. This made it difficult to get unbiased feedback and data. I found that the best way to get unbiased feedback was through new hires.

  • It took over a year to get external user testing approved and complete.

  • This was all happening in tandem with other new features and releases, so we had to be very careful to not break the live app while updating pieces of the first time user experience.

 
I worked with the product owner and producers to create one doc for all of the FTUE (First Time User Experience). This helped analytics to see where players were dropping off in the FTUE and to add hooks if needed.

I worked with the product owner and producers to create one doc for all of the FTUE (First Time User Experience). This helped analytics to see where players were dropping off in the FTUE and to add hooks if needed.

The Results

  • Based on the user testing, feedback, and the data we received, retention improved for new players.

  • Players were no longer losing during tutorials, getting kicked out of features, and stores loaded properly.

  • Players understood more features in the game.

  • We allowed the player to pick between three different packs so the Player connected with the Superstars that they received in their first card pack which improved player engagement.

  • Clearer, cleaner, and more organized documentation for all the first time user experiences in the game.

 
Divider_DarkRed_Brown_360x5.png

IMPROVING THE STORE

The Problem

  • WWE SuperCard was originally created quickly as a non-monetizing companion app for the WWE 2K console game, so it was never designed to make money.

  • There were multiple stores with different experiences, which meant more code changes whenever things needed to be updated.

  • The currency/credit icon was a red icon (usually associated with negative actions) and didn’t look like a currency.

  • There were over thirty different card packs in the store, under five different tabs. It was overwhelming and confusing.

  • There were no visuals telling players what the cards in each pack looked like.

  • Each card pack had only one card in it. This was an underwhelming experience and if you didn’t get the card you wanted, it was a frustrating experience.

  • Purchase flow and animations were overly complex, confusing, and took a really long time to tap through.

  • There were multiple messages that blocked the player from spending money in the game.

  • There was no access to the credits store unless players were about to purchase something and had run out of credits, so players didn’t know their credit total.

  • We weren’t giving new players and non-paying players credits to teach them the value of the items in the store.

 
The old store was very noisy and confusing with a lot of animation and movement. It was hard to visually tell the different values apart in the credit store and the credit icon didn’t really look like a currency.

The old store was very noisy and confusing with a lot of animation and movement. It was hard to visually tell the different values apart in the credit store and the credit icon didn’t really look like a currency.

What I Did

  • I worked with the stakeholders and leads to create a new store experience that would allow us to display unique art for each card pack and showcase the new WWE Superstar cards.

  • I researched a lot of other card games and their pack openings and created a mood board in InVision of things that I thought worked well and didn’t work well.

  • I sketched out a bunch of different layouts and ideas (on paper and on the whiteboard) to show all the different options on how we could display the store and card pack information.

  • I purchased a bunch of WWE card packs from the dollar store to show how much better it felt to get more than one card in a pack of cards. Even if it was filler, it added to the anticipation of getting that one good card.

  • I worked with the lead animators and effect artists to create anticipation and excitement when the player opened the card pack.

  • I designed store elements that allowed us to give away a small amount of credits in free packs and log-in rewards to teach players the value of card packs and allow non-paying players to purchase items in the store.

 
I created purchase flows in OmniGraffle. By improving the purchase flow, we were able to clearly see the friction in purchasing and understand the value of changing it.

I created purchase flows in OmniGraffle. By improving the purchase flow, we were able to clearly see the friction in purchasing and understand the value of changing it.

Process sketches I created while working on the new store design.

Process sketches I created while working on the new store design.

Early wireframe examples I created for the store purchase flow.

Early wireframe examples I created for the store purchase flow.

The Goals

  • Create meaningful purchases.

  • Help players see and understand the value inside card packs.

  • Increase visibility of the store/get cards menu and credits menu.

  • Create a simple, clean, and intuitive store.

  • Show off the card art inside card packs.

  • Create a place for organic sales and special deals.

  • Increase monetization.

  • Reduce friction in the purchase flow.

The Challenges

  • We had to implement it in phases because of the old code, but it actually went pretty smoothly.

  • Getting sign off to get rid of twenty card packs in the store wasn’t easy, but it allowed us to focus more on organic daily deals and create packs that provided better value to the player.

  • There were multiple stores in the game with completely different code structures.

  • Over time we were able to get the card packs down to three daily deals, six foundation packs, one free pack, and one organic sale banner.

The Results

  • Increased revenue per average user.

  • Players were able to see what the cards looked like so we could market them better, which led to better sales.

  • Improved pack visuals and pack opening experience.

  • A cleaner, simpler, and consistent purchase flow with a lot less friction.

  • Players on YouTube started posting their card pack openings and creating card pack battles.

  • All the stores were consistent.

 
Updated store designs. Final art by Casey Burpee and the art team.

Updated store designs. Final art by Casey Burpee and the art team.

Impact and Takeaways

Over the course of working on WWE SuperCard, I was able to see it grow, expand, and improve in so many ways. The players are passionate, social, and active, and it shows as being one of the top-grossing games that 2K Games has on the market. In my time at Cat Daddy, I learned the value and difficulty of updating an old live game and the limitations that come with it. The team was a blast to work with and it was an honor to be a part of something that has touched so many lives and has invoked excitement, passion (whether it be good or bad) and is still going strong almost six years after it was launched.

 
 

 

CASE STUDY:
PARADISE BAY

UX Design for a cross-platform, responsive, resource management game.

View Case Study →