.png){kind=small}
IN-APP GAME DESIGN FOR SO DRAMA! ENTERTAINMENT
(launched)
LEAD UX DESIGNER - TAN FANG HUI
collaborating with Game Designers, UI Agency (JIN),
Project Manager, Quality Assurance, Developers
FEB 2023 - APR 2023
USER FLOW, WIREFRAMING, PROTOTYPING, USABILITY TESTING
TOOLS USED - FIGMA, ZEPLIN
CAMOKAKIS APP GAME
05
CONTEXT
Design of "Pom-Cha-Cha", a new rhythm-matching game exclusive to the Camokakis app for So Drama! Entertainment, launched in August 2023
​
So Drama! Entertainment, a Singapore media company, offers the Camokakis app on the App Store and Google Play. The app provides music playlists, podcasts, entertainment news, and lifestyle insights. The upcoming update will introduce a new live-streaming feature showcasing various categories such as deals, family, gaming, comedy, and music. As part of the live content, the app will feature the exciting "Pom-Cha-Cha" game.
​
"Pom-Cha-Cha" is a virtual rhythm-matching game that offers cash prizes to players who achieve specific ranks and encourages players to take brand-related actions, such as referring friends to download and sign up for the Camokakis app, incentivising engagement.​
​
"Pom-Cha-Cha" was designed to drive downloads and sign ups for the Camokakis app, and increase user engagement of Camokakis App through this interactive gaming activity.
app downloads
to be updated after end of launch
PROBLEM
So Drama! Entertainment strives to generate interest and increase user-ship for Singaporean radio app Camokakis
​
So Drama! Entertainment aimed to drive app downloads, sign-ups, and user engagement by developing a gamification solution—an engaging game on the Camokakis app—targeting early adopters aged 17 to 25.
THE CHALLENGE
"How might we maximise app downloads, sign-ups and engagement through an in-app game?"
DISCOVERY & DEFINING
RESEARCH
The Game Design team conducted secondary research on various popular and successful games in the market.
- The Game Design team proposed to recreate a casual rhythm-matching game, aligned with the Camokakis app's content.
Drawing upon diverse player motivations and leveraging insights from gamification projects led by Sqkii, the game design team devised a concept where players would strive to strive to achieve ranks within a time limit to win cash prizes, catering to all skill levels. The gameplay starts simple but gradually escalates with an intense barrage of challenging notes. To retry the game, players must use in-game energy, acquired more swiftly by referring others to the game. This strategy aimed to boost player acquisition, virality, and engagement.
DEVELOP
IDEATION
User flow diagram
I collaborated closely with the game designers to map out all the user flows for this new in-app game. Additionally, I reviewed the subsequent cross-functional team discussion and the revised user flow diagram that evolved from the discussion.
To optimise the learning and gameplay experience, the game designers and I decided that immersing players in the actual game from the start, which begins at a manageable difficulty level, would be sufficient. This eliminates the need for a separate tutorial game level.​
​
To incentivise players and tap into their competitive drive, we made subsequent strategic adjustments in the user flow, which included the addition of pop-ups displaying cash prizes and high scores on the landing screen. These modifications were implemented to encourage player engagement and cater to their motivational drivers.
Lo-fi wireframes
Given the project's tight timeline, we recognised the need to adjust our workflow. We decided to have our UI agency start working on key screens and assets based on lo-fi wireframes (even before approval and iterations), while simultaneously working on the UX designs of screens.
​
Therefore, leveraging the approved user flow, I identified key screens and assets, and swiftly created lo-fi wireframes to incorporate into the project briefing for our UI agency.
​
Since this parallel approach carried inherent risks, where UI assets could potentially be created but ultimately unused, I had to ensure timely communication with our UI agency in case any adjustments were made to the UX designs during the process. This allowed for efficient updates and alignment between the two teams.
Mid-fi wireframes
​
While our UI agency was working on the above key screens and assets, I crafted 76 mid-fi wireframes within 2 weeks using Figma, iterating on the lo-fi wireframes and aligning them with the user flow diagram.
​
In order to ensure learnability, usability, and virality, I prioritised essential elements in the players' journey. Specifically, I focused on enhancing the landing page pop ups, gameplay screens, the leaderboard screen, and the referral screen.
Moderated usability testing using Discord
​
The mid-fi prototype seamlessly integrated user flows and served as the basis for a moderated remote usability study with participants as well.
​
I facilitated a user feedback session, moderating interactions with three individuals who possessed diverse gaming profiles.
​
​
Key findings from moderated usability study​
​
1. Landing screen pop ups
​
"The excessive number of pop-ups is quite bothersome. It would greatly enhance the user experience if there were an option to disable the top score pop-up with a convenient 'don't show this again' checkbox."
2. Gameplay
​
"Adding a brief scoring system explanation to the tutorial pop-ups would be helpful."
"Replacing the countdown with a 'tap to start' option empowers players with greater control when initiating the game."
"Placing the scoring feedback at the top of the screen prevents it from obstructing the incoming titles, enhancing visibility."
3. Leaderboard screen pop-up
​
"Redundant pop-ups on the game over and leaderboard screens, displaying current position, are unnecessary due to the dynamic nature of rankings."
Multiple iterations and mid-fi braintrusts
​
​
Based on player feedback, I iterated on the mid-fi wireframes and also conducted 2 mid-fi braintrust sessions with key stakeholders for further feedback and approval.
​
I led 2 cross-functional team discussions involving the project manager, game designers, developers, and the quality assurance team. During the internal braintrust, we reviewed the mid-fi wireframes, functions and features to ensure feasibility of implementation, as well as enhance game attractiveness and retention.
Subsequently, I presented the revised mid-fi wireframes to the client, seeking their valuable feedback and obtaining approval.
​
​
​
​
Additionally, I communicated the iterations made to the key screens to the UI agency, ensuring seamless coordination, and took charge of overseeing the development of them by the UI designers.
In order to ensure cohesiveness between the designs and the intended game experience and objectives, I effectively communicated the UI direction.
​
Utilising the key screens provided by our UI agency, I ensured consistency throughout all other screens by adapting them with the same style and assets, including elements such as colour scheme, buttons, backgrounds, and more.
​
I further refined the UX by implementing adjustments to the provided UI.
Hi-fi iterations and braintrusts
​
​
I conducted a collaborative hi-fi wireframes braintrust session with the project manager, game designers, developers, and the quality assurance team. Leveraging the collective expertise and insights of the team, we analysed the UI elements, functions, features and flows, and sought out any other UX challenges that players might encounter. ​
​
Taking into account the feedback gathered during the cross-functional discussion, I refined and iterated on the hi-fi wireframes. Unfortunately, due to time constraints, conducting additional usability testing on the hi-fi designs was not feasible.
​
Following that, I presented the revised hi-fi wireframes to the client for their feedback and approval. Incorporating their input, I further iterated on the wireframes, implementing copy updates and UI adjustments to improve the overall experience.
SOLUTION
I detailed all approved user flows and hi-fi wireframes into a comprehensive Single Source of Truth document for the developers and quality assurance team using Notion.
I uploaded all the hi-fi wireframes to Zeplin, enabling developers to conveniently reference and code the screens with ease.
​
​
View the hi-fi wireframes in Figma
​​
I rigorously tested the staging environment, conducting multiple rounds to ensure the final product aligned with the intended design and flow. I effectively communicated the necessary adjustments to the developers and quality assurance team.
FINAL PRODUCT LAUNCHED
EVENT RESULTS
Statistics on game effectiveness in driving Camokakis app downloads, sign ups and player engagement will be posted here soon after game launch.
player retention
overall average to be updated soon
accounts created
to be updated soon
play-throughs
to be updated soon
LEARNINGS
As the lead UX designer for this project, I embraced flexibility and creativity by devising workarounds in the workflow. For instance, I coordinated with our UI agency to handle UI element design while I simultaneously worked on mid-fi wireframes and conducted testing. I effectively communicated with our UI agency, enabling them to design the UI accordingly.
​
To discuss with developers the specific asset requirements, such as 2D isometric or 3D, before requesting them from the UI agency so as to align with development needs effectively. During the development phase of this project, the team realised that the gameplay tiles and lanes needed to be fully in 3D, rendering the 2D isometric assets unfeasible.
​
FUTURE STEPS
Refining the design
​
If I were involved in future iterations of this project, I would prioritise refining the gameplay design. This would ensure improved visibility of gameplay and easy interaction with the hit targets on mobile devices. Additionally, I would conduct moderated in-person usability testing, to carefully observe and gather valuable feedback on the gameplay design.
​
​
Designing for older players
​
In the current game launch phase, our target audience comprises early adopters aged 17-25. In future phases, which target a broader audience aged 17-55, it would then be important to consider the needs of older players. Including the older player demographic in usability testing becomes essential to identify and address potential pain points they may encounter.