My Role
Research, UI/UX Design, Prototyping, Testing
Single designer working closely witu Product Manager, Front-End Developer, Data Analyst
The Team
Timeline
July 2022 - September 2022
Live PVP
Drilling down into "Visibility of System Status" heuristic to stop frustrated users from canceling
live sessions
Summary
Project Info
Context
We noticed a very high rate of time-outs and cancellations in SongPop’s Live PVP (player-vs-player) mode, where users compete in real-time at music trivia.
To solve this I redesigned the entry and exit points, introducing a Live PVP lobby that
improved the display of the connection status and
gave the user more autonomy to continue playing or end the session.
We saw a significant increase in the number of completed Live games and a sharp decrease in connection-related complaints from both customer support and online fan groups.
I was the Product Designer for the SongPop game and for this feature, I did the UI/UX design, prototyping.
I worked closely with our Lead Front End Developer to determine the best way to simplify the display and interactions without needing any networking changes on the back end.
This was part of a larger set of improvements made to the Live PVP feature for which I collaborated with our Product Manager and Data Analyst to determine how to best measure success.
The Live PVP feature, available only on the newest version of SongPop launched in 2021, is a major USP for the game. The app’s predecessor, SongPop Classic (2012) did not have live games and all the challenges were asynchronous, whereas the new SongPop has both modes.
Live PVP is a social, competitive, and delightful game mode that does an excellent job of forging connections between players. At launch, it was accessed primarily through the chat feature and player profile screens. It was meant to feel like a natural extension of the core gameplay and it would appear opportunistically in many parts of the app, but there was lots of room for improvement.
We received a lot of player feedback and customer support tickets that expressed frustration around using the feature. Looking at our tracking data it was obvious that there were problems, and there was a huge gap between the number of challenges users initiated and the number they played successfully.
Issues
Design
Results
Original design: as you can see, there are too many opportunities to exit destructively.
Players were confused about whether or not their Live PVP games were actually working.
There were quite a few UX problems with starting a game, including:
awkward access: found only through on the chat screen as a tiny, insignificant button
access points to accept a Live PVP invitation were not easy to access from core gameplay screens
missing the start: it was too easy to leave the chat screen and miss the moment when your opponent accepted the challenge, and most users would leave while waiting
lack of control: once you sent an invitation, you could not cancel it if you changed your mind or were waiting too long, you just had to wait for it to time out
notifications: if you or your potential opponent were in an asynchronous gameplay mode, you wouldn’t be notified to avoid interruption
there were too many taps involved for both players to indicate that they were ready to play
on the playlist selection screen in Live gameplay, it was unclear what was happening if your opponent was taking their sweet time to choose a playlist and many players would kill the app to leave, thinking it was frozen
There were also some UX problems at the end of each round:
players didn’t know if their opponent wanted to continue playing
there was no feedback or indication that your opponent left the game or chat session
With the system status now clearly displayed throughout the entire Live PVP flow, there is no more ambiguity.
On top of system status visibility, other UX heuristics were also fine-tuned:
user control and freedom: we gave players more control of the situation by introducing a streamlined experience in the Live PVP lobby, and gave them the choice to end the session if needed rather than letting it time out on its own
reduced cognitive load: several extra taps and steps were removed, and only necessary interactions were included to lessen confusion
error prevention: we added confirmation pop-ups and additional messaging to make it clear to the player that they were entering or exiting this game mode with another person
In the end, with less freedom to wander around the app, the feature became much more usable. Games that are initiated are now getting played more than ever. We observed a significant drop in the number of cancelled games, and through our Facebook fan groups, we received a lot of positive feedback about the improvements.
I decided to restructure the entry and exit experience entirely via the front-end with no back-end changes necessary to obscure a few steps.
I created the concept of a Live PVP lobby to streamline the UX and remove any confusion.
All the changes centered around Jakob Nielsen’s first heuristic for user interface design, visibility of system status:
By limiting the interactions in a lobby waiting area, I removed any possible actions that would have unwanted consequences. Previously, the system status was displayed inside the chat screen and players could continue chatting but also send photos, stickers, songs, or back out of the chat entirely.
Now, the only destructive action they can take makes sense: to cancel the invite. If they choose to, they can send stickers or pre-made text to communicate, and I came up with a set of relevant phrases.
For the end of a Live PVP round, I redirected players back into the lobby. Previously, players were brought back to the chat screen where there was no definitive ending to the Live session. In the new lobby, the actions are restricted to:
communicating via stickers or pre-made text
play again (starting another round)
ending the session
In the chat, I also added a few more automated messages to act as a record of what happened. With the new ability to end the session, I could provide a sense of closure and trust to the player.
I worked on a few iterations and prototyped the sequence in Figma to get the whole back-and-forth flow to feel natural. After implementation, we tested it internally and with our closed beta testing group before releasing it to the public.
“The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.”
The new, re-designed lobby locks players into the gameplay mode with only one destructive action to take: End session.
Entering (and staying in) the Live PVP lobby meant way less confusion!
We also added a snack bar, we previously had ineffective notifications outside of the Home screen, where users seldomly went.
We noticed that users were abandoning live synchronous game sessions at an extremely high rate. I identified where that was happening and simplified the invitation process to stop the bleeding
