Cartoon Network Arcade
Cartoon Network Arcade is a collection based gaming app where users can collect digital figures of their favorite characters directly from watching Cartoon Network shows and games. Below are just a few of the features that I designed. Platforms: iOS, Android
DESIGN
Myself
Amber Grim
Marietta Engle
UX
Justin Smith
CREATIVE DIRECTION
Rob Craig
Mario Piedra
Home Feed
OBJECTIVE
Design a central location to display all games, stunts, and new figure announcements. Provide locations for users to see their currency, interact with settings and privacy/terms, and navigate to other areas of the app. Create a templated card design that can be easily replicated for multiple uses.
SOLUTION
Along with the wireframes provided by the UX Architect, I designed a home feed that met all of our objectives. An endless scroll provides users with a stream of content, while the card that I designed showcases several points of information and interactivity.
Figure Shop
OBJECTIVE
Design a marketplace for users to use their currency to purchase figures. The marketplace should be “skinnable”, allowing editorial to have shop takeovers to promote new properties or special events.
SOLUTION
With all of the “islands” on the map floating, I designed the “Figure Shop” as a contrasting element - a place below the map. As users are navigating around the map, the Figure Shop neon sign lights up as orbs float out from beneath - enticing the user to see whats there. Once you enter the shop, characters greet you at the top and 3 panels highlight the figures available to buy. Tapping on a figure will bring up a modal indicating the figure, what island it belongs too, and its’ rarity. A countdown clock, currency counter, and a CTA to watch an add for more neons, are visible at all times on the shop home page.
ACR Collect Scanner
OBJECTIVE
Design an interface that communicates the action of collecting a figure. This screen should communicate that the Cartoon Network show and the volume must be turned on in order for the scanner to recognize it and provide a unique figure available to collect. This screen should have a camera on mode to point at the tv screen and a camera off mode.
SOLUTION
I designed several iterations of this section of the app. My final design was inspired by sonar radar, especially for the camera off mode. As the bar scans up and down on the screen, several objects from different properties would show up on screen. When the camera was on, the scanning bar would pass over the tv viewport.
Android Games Section
OBJECTIVE
For the Android app, design a Games section that has a featured area, navigation points for Favorites and Most Popular, and allows users to filter all games.
SOLUTION
For the Games section, I largely replicated the Home Feed design, but expanded upon it. The card at the top allowed for new games to be featured, while the buttons below allowed users to navigate to 2 subsections: Your Favorites and Most Popular. While users could tap on the heart icon on the card to favorite a game, I also designed a swipe action that allowed users to swipe left on a card to favorite and swipe right to unfavorite.
Login/Create Account Flow
OBJECTIVE
Design the account creation flow for new users of the CN Arcade App. Indicate rules necessary for username, password, and passcode creation, as well as showing where the user is in the process.
SOLUTION
For this design, I wanted to focus on simplicity, especially given the kids demographic. A bar at the top shows the steps of account creation and fills in as the user moves along, indicating a check mark when complete and highlighting the number of the current page. For these pages, I sent along an After Effects mockup to the development team to capture the exact animation I wanted for the number pad.