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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.