Awkward 2
Client: Snap Finger Click
2022-
The great bunch over at Snap Finger Click brought in Infinite Continues to solve a few UI problems they were having with some of the key screens of their upcoming adult multiplayer party game Awkward 2, coming initially to PC (Steam) and then PlayStation 5 (TBC), Xbox Series X | S (TBC), and Nintendo Switch (TBC).
End Of Round Screens
Our first brief from Snap Finger Click was to find a clean way to display a myriad of disparate stats at the end of a round in Awkward 2, after the players have completed all the questions. Because the types of round in the game are so diverse, the End Of Round screen needed to be a flexible enough framework to be able to show different stat types in a readable and consistent way from round to round.
With the look and feel (including colour palette and typeface) already locked down internally before we were brought on board, we had a clear run to tackle the layout logistics straight off the bat. Below, you can see a number of blockouts as we grappled with the cleanest way to show anywhere between 1-4 stats at the same time.
End Of Round Screens (cont.)
After feedback from the client, we were able to refine the layout further, finally landing on a scalable solution in which each avatar at the bottom of the screen would animate into prominence into the centre of the screen whenever a stat pertained to that player. This allowed us to ‘pin’ any stat to the avatar, thus ensuring the layout would be future-proofed enough that the client could add in any type of stat they wanted in further updates to the game.
Below, you can see the final designs that display this concept.
“Infinite Continues' contribution to Awkward 2's UI was invaluable. Their exceptional work and keen grasp of our game's essence elevated the overall experience. Collaborating with them was a pleasure, as they consistently delivered top-notch solutions and maintained clear communication.”
Martijn van der Meulen, Studio Co-Founder, Snap Finger Click
Lobby Screen
Next up, the Lobby Screen. This was deceptively simple at first glance, although the client required the inclusion of all 8 polaroid avatars be included in a ‘fan shape’ as the tech had already been built to achieve the effect, and they were loathe to jettison it. This condensed the remaining screen real estate around it, meaning we had to tweak the size and positioning of the rest of the screen elements a lot to get the balance just right.
Below you can see final design, as the lobby fills up with more and more avatars. The entire background is a full-screen video, so we also needed to allow enough of that to shine through to engage the players as they waited to start the game.
What’s Your Number?
One style of question within the Awkward 2 framework that couldn’t be comfortably represented alongside the others (see above) was the tentatively-titled ‘What’s Your Number?’ round. The player answering the question inputs a number, and their fellow players need to guess which answer they inputted. Twitch viewers also get to answer, and their guesses also needed to be plotted on the resulting stats screen, although far less promisingly.
We ran through a couple of solutions for this that you can see below, but they all follow the idea of plotting the answers on a graph. Those that fall out of the normal range of the answerer’s number get lumped together under an area called ‘Exception Answer’ - their guesses are too far off to even register!
For this brief, we also developed some understated prize rosettes (in keeping with the pared-back, grimy art style of the game) to award to those with the closest guesses to the original number input. Twitch viewer answers were captured using the design language we developed during our other solutions, and kept separate from the main player answers.
Awkward 2 Twitch Overlay
A new format for us long-in-the-tooth veterans at Infinite Continues; an overlay screen designed exclusively for the streaming platform Twitch!
As Snap Finger Click have extensive experience in live-streaming their own games, we took their advice in how best to work up the layout for this one. Usually there’s an obvious area for the streamer to overlay their camera feed, and because Awkward 2 incorporates viewer participation, there was also a need for discrete areas to show the questions the viewers would answer (below the game feed area) and the stats and leaderboard (above the streamer’s camera).
As with most creative work, there was still a requirement for these areas to still look aesthetically pleasing even when no relevant content was being displayed, so we went with subtle versions of the game’s logo and the principal character/game show host Wick in these areas so there was still plenty of visual interest in-between the question rounds.
A full storyboard walkthrough of how a typical Twitch session might play out is shown below.
