My Role
Responsible for research, conceptualization, Design, User-testing
Solo designer collaborating with 1 Animator, 1 Product Manager and
2 engineers
The Team
Timeline
Jan 2022 - April 2022
Canned Chat.
Prototyping several modes of user inputs for a single feature
Summary
Context
SongPop Party, a multiplayer music quiz game, originally debuted on Apple Arcade. A year later, it expanded to the Switch, Xbox, and the Microsoft Store, with Playstation and Steam following shortly after.
Sometime after launch, we planned to release a canned chat feature.
Paying attention to our needs as a music trivia party game, we designed, prototyped, and tested very specific UX and visual solutions that felt natural for every input type across all the platforms.
Since this feature was scheduled to be added after launch and we had lots of time to brainstorm and iterate on the designs. We took our time and completed it within a few months while working on a couple of other new features at the same time.
SongPop Party was originally designed to be a casual party game played on your couch with friends and family.
However, the online multiplayer mode became very popular especially as the world was still emerging from the pandemic. Lots of our users were requesting that we add the ability to communicate with each other.
We knew an open chat feature would not be appropriate for this style of game for several reasons:
the game is meant for all ages
the core mechanic is twitch-based interactions (hearing the song clip and selecting the correct answer as fast as possible), so bringing up an on-screen keyboard to type messages would be too much
while it’s an option, most players do not play the game with a physical keyboard
Because of these reasons, we decided to do canned chat using pre-made text and animated emoji.
Research and Issues
Design
Testing
Results & Takeaways
The strange world of Mario Kart 8’s online multiplayer mode.
The strange world of Mario Kart 8’s online multiplayer mode.
Mario Kart’s online mode is somewhat close, but most of the chatting takes place before a game starts rather than during the game, so the UI is very imposing.
After the session, I also started by looking at what other games with canned chat were doing, but I couldn’t find too many examples that encompassed all the use cases we had.
I organized a creative brainstorming session with the team to figure out what we wanted the canned chat feature to be like. It turned into a problem-solving journey that brought a clear sense of purpose to our project.
The design for directional input was completed first. It included game controllers and the Siri remote.
The game controller interaction to bring up the chat menu went through a number of iterations.
Adding safe, canned chat is much less intimidating than an open chat feature. For SongPop Party, the complexity was in supporting all the different device and input combinations.
We ended up with three solid variations of the same functions that felt perfectly at home on each device type or input mode.
A lot of the best testing and experimentation that we did took place in person. For a party game, this makes total sense. While we worked distributed most of the time (spread between three locations), our in-person sessions were very productive.
For this task, I discovered a Figma plugin called Prototyper by Aashrey Sharma which helped us to automate the controller and keyboard interactions. Later I also found an additional plugin that allowed us to test the Siri remote separately.
Once we experimented enough with a variety of controllers in hand, the designs were implemented. We were fortunate to have a beta testing group that could test even further for us, and they were pleased with how the new feature worked overall after having requested it many times.
We arranged some in-person discussions to determine the best combination of button and joystick movements. It was not something we nailed right away, as team members had different opinions on what felt intuitive or usable. The first iteration was a bit unwieldy, holding down two shoulder buttons and rotating the joystick to select a chat sticker to send. While this might have been fine for a player who is used to complex controls, we decided to simplify it so that it was more widely accessible to include:
younger kids
people who may have never used a game controller before (like my parents)
people who may have limited motor control
I came up with a few design variations and everyone agreed that a wheel format made the most sense and fit the gameplay space perfectly. With up to 8 local players looking at the same TV, we needed to fit 8 wheels without overlapping other players, scores, or gameplay buttons.
Now that we had UI in place, I created a spreadsheet to keep track of pre-made text and emoji ideas, and the entire team had the opportunity to enter their suggestions. For gameplay, the shortlisted suggestions were the ones that most accurately conveyed emotional reactions. For before and after each round, we had separate lists that helped players communicate in each context.
The wheel mode of interaction provided the basis for the single local player experience with directional or keyboard inputs. With Apple Arcade we needed to support game controllers connected to iPhones, iPads, and desktop/laptop computers (or the latter with keyboard/mouse).
The wheel size and placement that was designed for TV viewing would not be usable on a smaller device, so I came up with a full-screen version with the same wheel mechanic, just at a legible size. Because this version is only used for one person looking at the device, the team felt it was acceptable to briefly cover the screen with a semi-transparent overlay.
For the third experience, touch devices, a rectangular fly out was the solution (much like Clash Royale). Since a wheel didn’t make sense for touch interactions, a fly out provided ease of use and less screen real estate.
Clash Royal stickers are a close second, but only for the single local player experience.
For SongPop, the chat feature is mostly for online users, but it also needed to work for local games with online participants. Users could be playing on their phones or in front of a TV with a group.
The UI had to be lightweight because players wanted the ability to chat during gameplay. We worked out three distinct experiences that each of the device/input/player combinations fit into:
directional devices (online and local partiers together)
single local player (or more accurately, playing with online opponents only)
touch devices (also online only)
These formed the backbone of the feature and helped keep things not too complex to implement.
Chat wheel design for TV screens, seen here in the top left.
Full screen chat wheel design for iPhones paired with a Bluetooth game controller.
Fly out chat menu for touch devices
Prototyper, a Figma plugin by Aashrey Sharma
Design explorations for Directional Input
Apple Arcade: Touch input (iPhone & iPad), Keyboard and Mouse (MacOS), the Siri remote (Apple TV), and Directional input (game controllers paired with any of those devices)
Switch: Touch and Directional
Microsoft Store: Keyboard, Mouse, Directional, and Touch
Playstation/Xbox: Directional
There were also a fair number of input types to support:
We needed to design something usable for each device and input combination while also making sure things felt consistent enough across all the platforms.