SongPop for Mobile

Building a new meta game, economy, and graphic style for the world’s most popular music trivia game

UI Design and colour palette by me. Character designs by illustration team members. Some icons by me, some by team members.

Summary

Created by FreshPlanet in New York, SongPop began in 2012 as a Flash game on Facebook and quickly went viral.

Enrique Iglesias, Bon Jovi, Alanis Morisette, and many others were eager to promote it on Twitter, and it even garnered a mention on the tv series Glee.

Over a decade later, loyal fans and new players continue to devote countless hours to the game, self-organizing into online communities that are extremely active on social media.

With an award winning gameplay formula and over 130 million players, the SongPop mobile games continue to be a mainstay in many people’s lives around the world.

 

Project info

I joined in 2020 as FreshPlanet’s first full-time permanent Creative Director. FreshPlanet was just beginning a few ambitious projects.

With unduly complex legacy code and decade-old source files for the original Flash game (now known as SongPop Classic), it was decided to launch a new, improved, and modernized future of SongPop. To be built from the ground up using new tech, I was brought in because I had experience designing for this framework.

Additionally, SongPop Party (the premium console party version of the game) was ramping up so there was a sudden need for senior management on the design front to maintain a cohesive team.

 

Feature Design

We added a slew of new game modes and features that SongPop Classic couldn’t support. The defining ones involved live, synchronous gameplay in addition to the classic asynchronous trivia challenges. My biggest achievement in this realm was revisiting the live game invitation flows and simplifying the UX to reduce the number of cancelled sessions.

Live games could be initiated from many different areas of the app and were a technical feat to pull off in terms of invitations, timing, and anti-cheating mechanisms.

The Live Show feature was another larger-scope feature in terms of UX design. This was once a separate app, but we redesigned it from the ground up to be a feature that’s integrated into the economy and meta game of SongPop. Together with the Product Manager, I worked on the design and flow of the Live Show, and then worked with our animators and illustrators to create custom content for 30+ music genres.

Live Show gameplay loop. I like to map time on the horizontal axis (from left to right) and different states of the same screen on the vertical axis.

Production

I began on the new SongPop project close to the initial stages, with a working prototype in action for almost half the features but based on greybox mockups. I provided feedback during the greybox stage while working on exploring the direction of the look and feel.

I decided to keep a similar look to SongPop Classic (flat vector illustrations and UI) but elevate it. By introducing a vague light source that would inform gradients and barely-there soft shadows, the visual presence of the UI was given a subtle dimensionality and colours were meant to appear lit from within. This quality of light separated the game from its predecessor.

The colour palette was designed to be interchangeable with music and event-themed app skins (IAPs) that the player can equip. Every UI element needed to be rigged with design tokens that defined which colour or gradient was to be used, or whether it was part of a global set of colours (universal elements such as progress bars and subscription tier colours).

Base colour palettes and gradients, each with rules for creation and use within the UI.

 

Design system, tools, and process pioneering

It was time to modernize and use an interaction design tool rather than solely Photoshop/Illustrator. We started out with Adobe XD but I decided quickly to migrate to Figma a few months in because the collaboration features in XD were becoming unusable, and CC file organization and ownership was too buggy and confusing.

Since we were using React Native, we settled on Lottie as the library of choice for animations, though 2 years in we were beginning to assess what it would take to switch to Rive.

I set up our feedback loop to move away from Basecamp (too email-like and a lot of scrolling), and instead we switched to Dropbox Paper as a place to comment on in-progress designs. The coolest feature about Dropbox Paper is the ability to leave comment threads on a specific point on an image, much like InVision. It also acts as a good record of design decision making as it’s been useful to keep this history. And since the studio was already using Dropbox, it was a convenient place to continue to store even more information. I added checklists for hand off, liveops assets, and guidelines for creating some of the more complex content.

UI/UX Design

I personally worked directly on the product design and visuals for a number of features and improvements. Of note were A/B tests on key monetization screens, variations on the Home Screen, the flow of Live PVP match selection and gameplay, Live Show, cosmetic items such as Vinyls (app skins), the Reward Collection flow, and major changes to the subscription model that involved account migration and complex communications. I can happily report that most of my A/B test ideas successfully increased KPIs as expected.

UI/UX Design by me, character illustrations by team members, music genre illustrations by team members.

 
 

Accomplishments

🏆 A/B test encouraging non-paying users to explore the music library

Results — we saw a positive effect on revenue as non-paying users were choosing to watch more rewarded ads to play more recommended playlists.

🏆 I re-designed our Shop tab and included a couple of A/B tests to determine the best design

Results — we adopted the design variation without a tabbed layout test because we noticed an uptick in coin pack and powerup purchases and we saw more subscription conversions on the variation with no price on the button.

🏆 Live PVP game initiation flow improvements

Results — simplified navigation made it easier to send Live PVP invitations, and we reduced confusion surrounding joining and ending a Live session.

 

Team Management

At FreshPlanet I had seven direct reports. Three UI/UX Designers and four 2D Animator/Illustrators. We were distributed between NYC, Montreal, and Toronto. I worked closely with developers, product managers, producers, and players and it was a great team.

Next
Next

SongPop Party