SongPop 2: Gifting Tickets

 

Task Overview

SongPop is a social music trivia game with an asynchronous gameplay on iPhone, Android and Facebook. It has been downloaded over 100 million times since launched back in 2012, I feel very lucky to be part of the team and lead designing the user experience and the interface of the game.

In 2015, the sequel, SongPop2 was launched along with a new gameplay, the party mode. In this Party mode, the user competes against hundreds of others in their favorite genre. Each party costs a ticket or two to enter. 

Since the party mode was live, we've got feedback from users that there's a strong scarcity around tickets.  We tried to mitigate it with this idea: letting users to gift tickets to each other. 

[ 손에 핸드폰 쥐고 테스트 하는 모습.  홈 스크린 > 파티 홈> 억셉트 > 애스크 프렌즈. 그 다음에 석세스 ] 

[ 손에 핸드폰 쥐고 테스트 하는 모습.  홈 스크린 > 파티 홈> 억셉트 > 애스크 프렌즈. 그 다음에 석세스 ] 

Improving Best Practice and Defining Game Rules

I started researching gifting mechanism in number of popular casual games, then put together the pros and cons of gifting systems in each games. 

The users who are playing these casual games such as Farmville can send unlimited game requests to their friends, even to friends who are not playing the game. It's a great way to encourage social interactions between friends that leads to higher engagement. But, I've witnessed stories of how tired and annoyed they are from receiving these game requests from their friends.  

So we tried to improve our gifting system with a few rules: 

  • A user can send tickets only to their friends who are playing SongPop.
  • A user can not send tickets to friends who didn't ask for.
  • Once the user asked a friend to send a ticket, they need to wait for an hour to send a request again.
  • A user can receive maximum 5 tickets from one person within 24 hours. 

Screen Flows and Wireframes

Once the initial rules are set, I started jumping in to sketching ideas for more specific screen flows and UI interactions. As I got feedback from the team and the ideas got more concrete I moved to hi-fidelity wireframes. (82% of SongPop users are on mobile, so we focus on mobile version of the game first)

 
 

Applying Visual Language 

After high-fidelity wireframes were done, I moved on to visual design phase. The main challenge was to understand the comprehensive existing GUI language of the project and apply it in a cohesive way.

 
 

Motion at Its Core 

Since the game is built on Flash, a interactive animation software, prototyping and working on motion design as a designer comes as a second nature. 

The animation below is an interactive prototype I created to show the UI transition when the user accepts tickets from their friends. Main purpose was to give a clear feedback of their action by guiding their attention to where the information changes and also make this experience rewarding and delightful. 

Once it was implemented, I learned there's a bit of awkward delay when the user taps on the button and the number of the tickets gets updated because the action requires a server call. So we made a quick revision to put a small loading wheel that replaces the button when the button is tapped, and play the animation when the front-end gets the result from the back end. 

 
" 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

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

 

Testing and Getting feedback. 

After the feature was implemented and briefly tested internally, released it to our avid beta users. While I could see it boosts social interactions between users, I quickly found a critical usability issue which was some users thought that when they sent tickets to their friends the tickets were taken from what they owned. Thus some users were hesitant to send and receive tickets. So we made clear those tickets were FREE in the next iteration. 

[ FREE 라고 어디어디 고쳤는지 올려볼까?] 

 
This Facebook group has more than 200 avid SongPop users who have been a tremendous help on testing numerous game features. They are very responsive(?) and passionate about playing games, giving feedback, reporting bugs to the team. 

This Facebook group has more than 200 avid SongPop users who have been a tremendous help on testing numerous game features. They are very responsive(?) and passionate about playing games, giving feedback, reporting bugs to the team. 

 

Show the picture of company testing

Iteration (?)

- Add "free"in different UIs 

- Understanding limit of Facebook API

50 limits, solution

a) select 50 random

b) select first 50 people on the list

c) select 50 + and front-end cashes and do a multiple bath 

--- 

wireframes ( search function) - 어떻게 바꿨는지 쓰기 

- > don't select by default. select 한거 그대로 가지고 있기. 

Releasing and Monitoring

After rounds of testing and iterations, we finally released to public. Now we'll need to monitor how this feature brings a positive impact on engagement rates especially on Party mode.