Katy Perry Pop

2016

Following the massive success of Kim Kardashian: Hollywood, Glu endeavored to create a new celebrity mobile game featuring global pop sensation Katy Perry. The new game, Katy Perry Pop, utilizes most of the gameplay of KKH, but with extra features and unique twists, such as the use of Katy Vision—a pair of prismatic sunglasses that changes modern day cities and locations into fun, colorful, imaginative versions of themselves complete with quirky characters like Left Shark and a twerking tempura.

UI Design

For the UI, I chose a feminine bubbly style that I thought would appeal to demographic we were targeting. I used lighter, pastel colors with splashes of bright colors, and a somewhat geometric theme to go with Katy Perry's Prism album visual theme.

Splash screen illustration for Katy Perry Pop. The background pattern was created using elements from the UI, and the spinning peppermint loading icon was animated in Unity.

One of the main menus in the game is a Smart Phone in the bottom right corner of the HUD. Opening this phone reveals "apps" that help the player, such as the To-Do List App which displays quests.

The Closet App where players dress and style their character and purchase clothing and accessories. I used a shopping cart style dialog at the top that mimicks the online shopping experience of real life clothing retailers.

The main gameplay consists of completing projects, such as a concert performance. Players can choose themes for their shows and purchase corresponding stage props to score more points.

After choosing a theme, players can purchase better instruments to increase their reward bonuses. Tool tips appear at the bottom of the screen as a guide for players who are not avid gamers.

UI Kit for Katy Perry Pop. Includes standard popup windows, menus, and buttons. Great care was taken in testing translations and making sure there was enough space for more verbose languages.

UX Design

The design for Katy Perry Pop was relatively complex, with a lot of meta systems. For this reason, I chose to keep them inside the player's phone menu within game, with shortcuts to the most relevant and frequently used menus (such as quest objectives)on the main HUD.

I start off all my projects with a thoroughly mapped flowchart of the entire game, which then acts as a checklist of sorts for all the UI that needs to be created. I color coded Unity scene loads with hot pink to get a better idea of the flow and load times the player would experience.

The main menu of gameplay options is themed like a smart phone with submenus as apps. This section describes the basic layout and functionality of the menu, as well as its anchoring in different phone aspect ratios.

The To-Do List app of the Smartphone Menu functions as a quest feed. Great care was taken to make this easy to follow, since our A) our target player base is generally unfamiliar with the idea of questing, and B) quests were sometimes very elaborate with multiple parts.

A quick mood board of references drawn from Katy Perry, colorful 80's type design, and cutesy mobile games. A lot of research was also done on apps like Covet, SnapChat, and Instagram, apps whose interfaces our player base were more familiar with than traditional video games.

Marketing

I supported the marketing team by creating several Facebook graphics for various events and promotions. Characters were dressed and posed in Spine before being exported out as PNGs, touched up and added to the graphic in Photoshop.

Launch graphic for Katy Perry Pop.

Just before Christmas 2015, Katy Perry partnered with clothing retailer Beloved to create holiday themed onesies, which we cross promoted by integrating into the game. This graphic was made to spread awareness of the promotion on Facebook, Instagram, and Twitter.

A New Year's themed graphic for use on social media.

Graphic promoting a pre-registration incentive for Android customers via the Google PlayStore.

A teaser released on social media about a new location players could travel to in game, with all new quests, characters, music venues, and clothing.

Another teaser image, showing off the "Katy Vision" version of London and new character, Pritchard the lion.

Graphic used to encourage AppStore ratings, used on social media.

Branding

We made a variety of promotional products to go along with the launch of Katy Perry Pop. I have worked in printing before, and coordinated with vendors as well as created production-ready graphics for various items including stickers, guitar picks, and lapel pins. I also designed various branding materials including the app icon, Google Play Store graphics, and message board theme.

Custom guitar pick product design featuring characters and items from the game. We chose a vendor that offered colored pearlescent picks for the base and metallic inks for printing.

Cloisonne pins of the game logo and the iconic Queen’s Legs pub sign from the London environment in the game. I prepped the pin artwork, selected specs and Pantone colors, and handled vendor correspondence.

App icon variation sheet. I created a single PSD with the different Katys and a variety of backgrounds, and mixed and matched assets using layer comps. This final was then linked to an app icon export PSD that automatically resized the icon to all the sizes needed for various devices.

I skinned the Google PlayStore game profile page, and created Achievement and Leaderboard icons for in-game achievements.

Katy Perry Pop forum, powered by Vanilla. Working with our community manager, I created the design and overall look of the forum, which was later implemented by a developer at Glu HQ.