SongPop 2: Gifting Tickets

 

What Is SongPop?

SongPop is a social music trivia game for iOS, Android and Facebook in which players can test their music knowledge on hundreds of playlists, and challenge their friends with an asynchronous turn-by-turn gameplay. The game has been downloaded over 100 million times since it launched back in 2012. I had the chance to be part of the original team in which I led the UX and UI design.

Task Overview

In 2015, the sequel SongPop 2 launched and introduced a new competitive gameplay, the Party mode, in which players participate in open daily tournaments (parties). The Party economy is based on tickets, which players need to spend in order to play. They can earn tickets back by performing well in their party, or buy tickets with money or by watching video ads.

The launch of SongPop 2 was a success and the Party mode was very popular among competitive players, but the feedback was that tickets were too scarce. The solution we wanted to try was to let users gift tickets to each other.

 
 

Defining Game Rules

I started by researching gifting mechanisms in other popular casual games and weighing the pros and cons of each system.

A common pattern found in games such as FarmVille is to let users send unlimited gifts to their friends, even those who are not playing the game. This is an effective technique to increase engagement through social interactions, but it also leaves many people tired and annoyed of receiving tens of requests every day from games they don’t even play.

We tried to avoid this in our gifting system by setting a few rules:

  • A user can only send tickets to their friends who are also playing SongPop.
  • A user can not send tickets to friends who didn’t ask for it.
  • Once a user asked a friend to send a ticket, they need to wait an hour before being able to send a request again.
  • A user can receive a maximum of 5 tickets per sender per day.

Screen Flows and Wireframes

Once the rules were set, I started sketching ideas for screen flows and UI interactions. As I got feedback from the team and the ideas got more concrete, I moved to high fidelity wireframes. 

 
 
 

Visual Language 

Once the wireframes were done, I moved to the visual design phase. One challenge was to understand and absorb the project’s existing complex GUI language, and apply it in a cohesive way.

 
 

Motion at Its Core 

Since SongPop was built with Flash, an interactive animation software, motion design came as a second nature.

The animation below is an interactive prototype I created to show the UI transition when the player accepts tickets from their friends. The main purpose was to follow the action with a clear feedback guiding their attention to the place where the information changes, while making the experience delightful and rewarding.

After showing the prototype to the engineering team, I learned that the action would have a slight delay because it required a server call, so we decided in the final implementation to first replace the tapped button with a loading wheel and then trigger the animation once the result came back from the server.

 
 

" Motion design can effectively guide the user’s attention in ways that both inform and delight. Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy. " - Material Design

 
 
 

Translating to Desktop

Besides a different screen ratio and resolution, the desktop version had a menu bar UI at the top of the screen that didn’t exist on mobile. This increased the complexity of the UX by multiplying the number of paths a user could take to reach the same screen. When porting the feature to desktop, I altered the screen flow to take this into account. I validated the usability of my solution by running an internal user test with a click-through mock-up built with MarvelApp.

Finally, I thoroughly reviewed interactions to ensure the overall experience was consistent between mobile and desktop, but also that the desktop version was taking advantage of platform-specific capabilities such as mouse over states.

 
 

Testing and Getting Feedback. 

After implementing the feature and testing it internally, we released it to our avid beta testers. While I could see it boost social interactions between users, I quickly found a critical usability issue: some users thought that in order to gift tickets to their friends, they had to spend their own tickets (as if those were physical tickets). This made them hesitant to send and receive tickets. We addressed this issue by updating our messaging in-game and making it clear that gifting tickets was free in the final product.