Jam City's Panda Pop
Role: Senior UI/UX Designer
Time: Ten Months (2019-2020)
Panda Pop is a bubble shooter game on iOS and Android. It is now seven years old and still going strong. The players love the cute style and the difficult puzzles. There's a wide array of events running at any time.
I was brought on the team as a mix of User Interface artist as well as a User Experience designer. I would work with the game designers, write UX docs, create flows, create wireframes, create the UI, cut it up, and implement the UI into Unity.
While I was on the team, my personal goals revolved around updating the art, creating systems for events, and cleaning up some of the docs.
While on Panda Pop, I worked on quite a few features. I will go through Panda Profile to as an example of my general process.
Panda Profile is essentially the hub of player expression features. In their profile players can see their stats, switch Mama Panda's costume, and change out their Panda Pals. The player can adjust their name and profile picture. Player bubble baskets and profile picture frames were also slated to appear at a later date.
•Give players a central location to adjust their self expressive features.
•Use this area to showcase new premium items.
•Showcase items in an eye-catching way.
•Area needs to expand to include more items.
•Casual mobile gamers.
•Age Range 30-60, with heavy leanings towards women.
•This area should appeal to both new and existing players.
•There wasn't much space on the page
•Due to tech constraints the player can only have up to 3 Panda Pals assigned at a time
•Space needed to be expandable for more costumes, Panda Pals, features, etc.
Research, User/Design Stories, and User Flows
Naturally what comes first is research followed by research, and then once more, a little research. When researching for this feature, I made sure to check my product goals and audience. Based on those parameters, I knew that the feature had to "just work" and not require much thought from the player. It also had to be delightful and make the players want to return. I looked at other games in the genre, as well as games with highly customizable avatars such as MMOs. I also looked at social media sites.
Working with the game designer we would polish up my rough sketch of user stories and design stories. After both the game designer and myself were satisfied with the stories we would show the rest of the stakeholders.
After alignment on User Stories and research materials, I would move onto creating User Flows. This is a crucial step because it allows me to step back and think about the Player Journey. It's at this step where we start to suss out the different paths for players based on their game progression.
For Panda Profile, it was a new feature that needed a new system. Now that these systems exist in the game, they're used for delivering rewards that live in Panda Profile.
Wireframes and UX Documentation
After getting alignment on the overall flows and early wires, I moved onto more detailed wires. I would sketch out a rough idea, and then start to ideate on placement, expansion, user interactions, etc.
Generally I like to keep my wires simple, but the Panda Pop team liked more detail in the wires. To make this step go faster, I created a Sketch Library for my wires.
After the wires were created, I would add them to my UX document as detailed flows or anatomy pages. The UX document is fleshed out to include the functionality of the feature, along with any edge cases that might be encountered. Within the UX document, I also would work with the project manager to call out art needs, animation needs, and localization strings.
Prototyping played an important role in creating holistic flows and wires. In most features, I would often prototype small pieces of the flow so I could get a feel for it and show it to stakeholders. These would be added to the UX doc as gifs and links to the prototype so Engineering wasn't just looking at a static image and paragraph.
Occasionally the team would want a larger prototype to get an overall sense of the feature. Early in the Panda Profile process I created a detailed prototype using Protopie. This was used for User Testing so we could understand where some pain points might be for the player.
After the UX Document has been signed off on, I would start on the UI. Panda Pop already had a distinct style. The game uses parchments and wood grain as background colors. The buttons used both matte and shiny materials to indicate hierarchy.
Organizing Assets and Implementation
After the assets had been created and approved by the team, I would update the UX doc with the UI images and then get to work on cutting up the assets.
A previous UI artist introduced me to the tool Zeplin. It worked as a house for our assets and made it easy to find what we had and what needed to be created. I would create a sheet with the assets, calling out which bits needed to be 9-sliced, the type faces, sizings, etc. Then I'd upload it to Zeplin where the Eng team could find it, or I could add it to the project.
After getting all the images into Unity, I would begin building the prefab. After I finished, I would hand it over to Engineering to hook up. Engineering, Animation, and myself would often have coordinate prefab hand offs and work closely with each other.
Even though I wasn't on Panda Pop long, I got to work on quite a few features with a really amazing team. In my opinion, the shining star of the Panda Pop game is the amazing art and animation team. While I worked on the team, I tried to have the UI take a backseat to the art, because the art was really where the heart and soul of the game lived.
Panda Portal was introduced to give some life to the End of Content. When the player hit the end of all the puzzles, the portal would open giving players a chance to replay levels for new stars.
Below are the concept pieces from Dave McNeal and Seth Henderson's art team. Based on these pieces, I created a vector framing for the pregame screen.
Level Rush Event
One of the last things I did on the team was create a simple UI that could be themed differently per event. Basing this off the Lantern Event (an Event I had previously done the UX/UI for) I made sure the UI was functional, but didn't disrupt from the art. As players passed thresholds, the sandcastle would build up until they won.