Cartoon Network Arcade
Senior UX Architect - Cartoon Network // WarnerMedia
Activities - Competitive analysis, wireframing, prototyping
Five of the main sections of the rebooted Cartoon Network Arcade app.
Design Brief
Cartoon Network Arcade was launched in 2019 as a gaming app that also featured collectible figures of Cartoon Network characters. While the app was a success, the product team wanted to build on this success by rebooting Cartoon Network Arcade as a more cohesive experience with a new vision.
The means of collecting figures in the original CN Arcade app were expanded upon in the reboot to account for the shift in the importance of figures going forward.
Reboot Strategy & Vision
The design of the original Cartoon Network Arcade app was focused around two main components: an assortment of CN-themed games and figure collecting. Users could collect figures by scanning shows with the CNA app, purchasing them in the shop with the in-app currency (called Neons), earning achievements by playing games, and participating in special events throughout the year.
The question arose as to what users should do with their figures once they were collected. In the original version of CNA, there was no actionable next step to take with figures and no motivation to complete figure sets. The product team felt as if an opportunity for further fun and engagement was being missed, and thus one of the main pillars of the app reboot came to be.
The rebooted Arcade app would be launched with a new overarching gacha game focused on figure collection and use with the existing smaller games playing a mini game role. This gacha game, dubbed the Epic Game by the team, would give users reasons to come back into CNA to collect figures and connect those figures back to gameplay.
Pictured above is the Epic Game’s presence on the home screen (left) and what some of the rooms in the Epic Game would look like (right). The game designer on our team designed the Epic Game screens, while my focus was on the other sections of the app.
Epic Game
The Epic Game is themed around a brand new cohesive narrative. In the reboot, Cartoon Network Arcade is a place where all CN characters love to spend their days playing and hanging out together. They leave their shows and pop into the arcade as they please until one day when a shadowy organization of villains known only as The Disruptors arrive on the scene. Using their evil Sonic Disruptor, the villains trap the characters in the arcade. It’s up to the user to free and recruit CN characters by collecting them to restore the arcade to its previous fun and glory.
This narrative sets the backdrop for the key functionality of the Epic Game - users are able to collect figures which they deploy in the Epic Game to advance their own level as well as the narrative. Users can strategize about what figures to use and are rewarded for completing sets of figures. The Epic Game serves as the backbone for the reboot and main connection point between all new sections of the app.
A journey map showing what the daily flow of a user would be through the app.
Journey Maps
Because the rebooted app would be significantly more complex than the current version, I created a series of journey maps to help the team visualize a user’s flow through the app. On the journey maps I highlighted possible fallout points, user thoughts, user motivations and compulsions for play based on game design theories from Jesse Schell’s work. In his book The Art of Game Design, Schell defines the motivations behind why people play games as action, social contact, mastery, achievement, immersion and creativity. I leveraged these motivations when thinking through a user’s journey through CN Arcade.
I captured the seven flows that I thought were most pertinent to the app, understanding that additional flows might be detailed out later once the UX work began in earnest. Most of the journey maps were centered around the Epic Game, with other flows focusing on figure collection and management, new user onboarding and a sponsorship event.
The user flow for the Collect screen - one of the more complex flows within the app.
User Flows
Due to Covid-19, the team was all newly remote which presented a number of challenges in communication and keeping track of UX documentation. Once I began on wireframes, I compiled all wireframes into user flows that I updated as the project went along so the team could reference the functionality of each screen. This helped everyone on the working team stay on the same page as far as what the functionality, purpose and navigation was like on every screen throughout the project.
Games, figures, reward flows and even the branding of the villains in the new narrative were topics covered by our focus groups.
User Research
User research on an app aimed at children is difficult under normal circumstances, but Covid-19 provided an extra challenge. The team partnered with a researcher who is an expert in this area of user research. Throughout the duration of this project, he conducted a number of remote focus groups where between 8-10 kids in the target age range participated. Our researcher was skilled at keeping the participants on task and we were able to get excellent feedback from these sessions even under the difficult circumstances.
Because the research was done through focus groups, we did not share prototypes with the participants. Instead, any prototypes were used internally by the team. We shared screens, illustrations and bits of story with group participants instead, asking for opinions and reactions.
For some focus groups, the researcher asked the participants to do a bit of “homework” in advance - primarily playing a game in the app or using a feature such as scanning on the Collect screen. In the focus group, the researcher would then ask questions relating to the homework.
Through this research we gained many valuable insights into the current app which helped drive the vision for the reboot, especially the Epic Game.
The various types of missions available to users.
Missions
The missions screen is a net new feature aimed at providing clear direction on what users should focus on next in the app. Missions are divided into three categories:
Timed Missions: Geared toward leading users around the app, helping them explore the full breadth of features and understand how all of the features are connected to one another.
Progress Missions: More passive than timed missions and tied to a user’s level progression. By completing the regular activities throughout the app such as unlocking and playing games, collecting and buying figures and deploying figures in the Epic Game, users could make progress on these missions.
Story Missions: Based around featured content such as the overarching narrative of the Arcade and The Disruptors as well as special events throughout the year.
Missions would reward users for using features of the app and help to reinforce meaningful reasons for figure collection and use.
The shop screen in the rebooted app offers items in addition to figures.
Shop
The shop is a feature that originally appeared in the first version of Cartoon Network Arcade as one of the primary means of collecting figures. One of the biggest issues with the shop in CNA was that if a user already owned a figure being sold in the shop that day, there was no incentive to buy it again. In the reboot, items for figures were introduced as a new way to increase figure value. Items allow users to level up figures so they can get better rewards in the Epic Game. If a user already owns a figure, that figure will then be converted into valuable items they can then use on their existing figure collection.
Additionally, more sections were added to the shop in the reboot, allowing users to unlock new higher-level figures and items as their user level increases.
The redesigned Collect screen provides more options and opportunities.
Collect
The Collect screen is another feature that originally appeared in the first version of Cartoon Network Arcade and was expanded upon in the reboot. On the collect screen, users can “scan” audio of Cartoon Network shows using the app and are rewarded with a figure from that show for their collection. In the reboot, scans are limited, but by leveling up, users can unlock more per day. Users can also collect one figure of varying level (common, uncommon and rare) on this screen, strategizing about the balance between cooldown timer and rarity. The Collect screen is one of the main places in the app where users can gain figures of higher level and rarity than normally available to their user level which encourages users to interact with the collect screen regularly through the day.
The Epic Game is featured prominently on the Games screen along with any promotions and previews.
Games
The Games library gives users additional ways to play within the Cartoon Network Arcade app. Score ranks and game achievements, both features in the original app, were brought over into the new design and expanded upon to include the broader array of rewards available in the reboot: figures, currency, items, treasure chests, experience points and new content in the Epic Game.
In the rebooted app, games are locked behind a new secondary and more rare currency called game tickets. Players use tickets to add games to their games collection. Special events and promotional periods in the app allow users to play games for free first before adding them to their collection.
The Figures screen became more important in the reboot and required more features than in the original CNA.
Figures
The Figures screen existed in the original Cartoon Network Arcade, but was completely redesigned for the reboot. Because of the shifting importance of figures between the original app and the reboot, the figure screen needed a new layout where users could easily browse, sort and manage their collection. Users can swap between looking at all figures in a list individually and figure sets. The redesigned screen places a new emphasis on completed figure sets because these sets give users better rewards both for completion and when used in the Epic Game.
When a user looks at the detailed view of the figure, they are able to determine where and how they can collect it, allowing them greater control over their figure collection than they previously had.
Items and figure levels are both new additions for the reboot and can be viewed and managed on the individual figure screens. Higher level figures will perform better in the Epic Game and yield better rewards for the user.
Note: I partnered with another UX Designer on this screen who spearheaded the creation of the figures view while I focused on the individual figure screen.
An event called Treat-a-Thon as it would appear in the reboot Cartoon Network Arcade.
Events
The rebooted app allowed a number of ways for special promotional events and sponsorships to play out. To help plan for this, I divided the events into three phases:
Awareness: Users are introduced to the upcoming event through the events page or modals. The goal is to introduce the event and continuously remind users that it is coming up.
Understanding: As the event draws nearer, the team would release more details about the event. Users understand the hows and whys of the event so they are ready to join in when the event fully launches. This phase answers questions about what to do, how to participate and what the rewards are.
Participation & Reward: The event is live and users are now participating in the event throughout the app. The app should make participating easy by featuring event content throughout that users can easily interact with. The rewards should be clear, and users should be able to easily track which rewards they have earned and what is left for them to achieve.