back
Flyclops
In-Game Emotes for Blitz Mode
Services
UI/UX, Graphic Design
Tools
Figma, Blender
Brief
The in-game emotes feature was conceived to enhance player communication in the timed Blitz mode, where text chat is restricted due to the turn-based rules. Emotes were introduced as a solution, enabling players to send messages at their discretion within the game. The design process focused on adding minimal UI to the existing gameplay screen, with emotes displayed as overlays near the player’s avatar to avoid covering the game board and clearly indicate the sender. Since its release, the feature has been almost universally adopted, with around 100,000 emotes sent daily in Blitz mode. This addition has significantly improved player engagement and interaction, making the Blitz mode more dynamic and enjoyable.
In-Game Emotes for Blitz Mode
Services
UI/UX, Graphic Design
Tools
Figma, Blender
Brief
The in-game emotes feature was conceived to enhance player communication in the timed Blitz mode, where text chat is restricted due to the turn-based rules. Emotes were introduced as a solution, enabling players to send messages at their discretion within the game. The design process focused on adding minimal UI to the existing gameplay screen, with emotes displayed as overlays near the player’s avatar to avoid covering the game board and clearly indicate the sender. Since its release, the feature has been almost universally adopted, with around 100,000 emotes sent daily in Blitz mode. This addition has significantly improved player engagement and interaction, making the Blitz mode more dynamic and enjoyable.
Original Emote Designs
Original Emote Designs
Metagame: Collectibles
Services
UI/UX
Tools
Figma
Brief
Metagame was a significant initiative aimed at enhancing user engagement and retention by introducing user vanity items such as locked emotes and avatar frames, with future plans for custom end game slams and app themes. These rewards were designed to be issued based on performance in ranked and stakes play modes, drawing inspiration from popular casual mobile games like Words with Friends. This extensive project involved the entire design and development team, with a special emphasis on the collectibles UI/UX, which I led. I opted to create a dynamic collectibles player page, ensuring it could accommodate future categories in its top navigation. The design allowed users to view all available collectibles and filter them based on their status, such as collected, locked, and equipped.
Metagame: Collectibles
Services
UI/UX
Tools
Figma
Brief
Metagame was a significant initiative aimed at enhancing user engagement and retention by introducing user vanity items such as locked emotes and avatar frames, with future plans for custom end game slams and app themes. These rewards were designed to be issued based on performance in ranked and stakes play modes, drawing inspiration from popular casual mobile games like Words with Friends. This extensive project involved the entire design and development team, with a special emphasis on the collectibles UI/UX, which I led. I opted to create a dynamic collectibles player page, ensuring it could accommodate future categories in its top navigation. The design allowed users to view all available collectibles and filter them based on their status, such as collected, locked, and equipped.
Dynamic Collectible Case
Collectibles were viewable at a larger size to entice players and show status. The modal displayed unlock requirements, allowed equipping, and let players place emote collectibles within their emote drawer, ensuring a seamless and engaging user experience.
Dynamic Collectible Case
Collectibles were viewable at a larger size to entice players and show status. The modal displayed unlock requirements, allowed equipping, and let players place emote collectibles within their emote drawer, ensuring a seamless and engaging user experience.
Metagame: Profile 2.0
Services
UI/UX
Tools
Figma
Brief
The player profile serves as the cornerstone of the metagame, emphasizing the collection of vanity items and rank badges. The new profiles needed to showcase these elements with style, transforming the profile stats from a boring list into a tribute to the player’s progress and skill. After many design iterations, the final profile design emerged as a slick, easy-to-scan interface that highlights players’ wins and progress, along with their vanity avatar frames and ranks.
Metagame: Profile 2.0
Services
UI/UX
Tools
Figma
Brief
The player profile serves as the cornerstone of the metagame, emphasizing the collection of vanity items and rank badges. The new profiles needed to showcase these elements with style, transforming the profile stats from a boring list into a tribute to the player’s progress and skill. After many design iterations, the final profile design emerged as a slick, easy-to-scan interface that highlights players’ wins and progress, along with their vanity avatar frames and ranks.
Concept Drafts
Concept Drafts
Metagame: Match Start 'VS' Screen
Services
UI/UX
Tools
Figma
Brief
The match start screen, a longstanding feature since the game’s inception, is what players see while syncing with another online player. With the metagame iteration, I aimed to prominently feature players’ vanity items and showcase their personality and style through their profile customizations. Inspired by old-school fighting game vs screens, the new design needed to balance necessary data and options with showcasing player individuality. The final design I landed on was a divided screen, highlighting both players’ unique themes, avatars, rank badges, and profile charms (a future feature I conceptualized), creating an exciting face-off while displaying the current mode and options.
Metagame: Match Start 'VS' Screen
Services
UI/UX
Tools
Figma
Brief
The match start screen, a longstanding feature since the game’s inception, is what players see while syncing with another online player. With the metagame iteration, I aimed to prominently feature players’ vanity items and showcase their personality and style through their profile customizations. Inspired by old-school fighting game vs screens, the new design needed to balance necessary data and options with showcasing player individuality. The final design I landed on was a divided screen, highlighting both players’ unique themes, avatars, rank badges, and profile charms (a future feature I conceptualized), creating an exciting face-off while displaying the current mode and options.
Initial Draft
Initial Draft
Final Design
Final Design
Themes & Theme Settings
Services
UI/UX
Tools
Figma, GenAI
Brief
Themes and Theme Settings is a pre-metagame feature designed to allow players to customize their game UI colors, enhancing their overall experience. The initial design was straightforward, adding additional menu lines to the existing player settings screen. In the long run, this feature aims to extend to game board changes, ensuring that both the UI and the player’s board are themed. Future iterations would also include premium themes available for purchase or acquired through metagame rewards. The first iteration of this design involved updating the player settings menu and creating a Flutter design theme showcase, which enabled developers to see all affected UI elements for each activated theme.
Themes & Theme Settings
Services
UI/UX
Tools
Figma, GenAI
Brief
Themes and Theme Settings is a pre-metagame feature designed to allow players to customize their game UI colors, enhancing their overall experience. The initial design was straightforward, adding additional menu lines to the existing player settings screen. In the long run, this feature aims to extend to game board changes, ensuring that both the UI and the player’s board are themed. Future iterations would also include premium themes available for purchase or acquired through metagame rewards. The first iteration of this design involved updating the player settings menu and creating a Flutter design theme showcase, which enabled developers to see all affected UI elements for each activated theme.
Early Metagame Concept
FIN