.png){kind=small}
MOBILE GAME DESIGN FOR SPH MEDIA PTE LTD
(launched)
WIREFRAMING, PROTOTYPING, A/B AND USABILITY TESTING
LEAD UX DESIGNER - TAN FANG HUI
collaborating with Game Designers, UI Agency (JIN),
Project Manager, Quality Assurance, Developers
SEPT 2022 - JAN 2023
TOOLS USED - FIGMA, ZEPLIN, MAZE
SPH MOBILE GAME
01
CONTEXT
Design of "兔来运转", a first-of-its-kind mobile web-app game for SPH Media Pte Ltd that was launched in January 2023
SPH Media is Singapore's largest omnichannel media network, bringing news and lifestyle content across print, digital, radio and outdoor media.
"兔来运转" is a virtual platform jumping game featuring milestone levels that offer real-life prizes, motivating players to engage in brand-related actions such as purchasing newspapers.
"兔来运转" was designed to drive newspaper sales, brand interest and reader acquisition for Shin Min Daily News, one of SPH's vernacular newspaper titles.
20,304
guest accounts created
438,117
gameplays driven
6,068
newspapers purchased
4,946
unique players redeemed ≥ 1 prize
PROBLEM
- SPH needed to garner interest and expand readership for vernacular newspaper title, Shin Min Daily News, among the young, tech-savvy generation
- SPH also aimed to engage and retain Shin Min Daily News' predominantly older readers
SPH envisioned developing a gamification solution - a simple and addictive mobile game - targeting Chinese readers aged 25 to 75 to be launched during Chinese New Year to drive newspaper sales, attract new readers and stimulate existing readers' minds.
THE CHALLENGE
"How might we boost newspaper sales by attracting and captivating a larger audience through a mobile 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 replicate the simple yet addictive "tap-and-hold" game mechanics of WeChat's "跳⼀跳" game, that was played by over 400 million users within the first 3 days of its release.
Drawing from diverse player motivational drivers and insights gained from previous gamification endeavors led by Sqkii, the game design team put forth a concept where players would strive to achieve and surpass milestone prize levels while earning tangible rewards. To progress in the game, players needed to utilise in-game energy, which could be acquired more swiftly by undertaking real-life brand actions and referring others to the game. This approach aimed to foster player retention and engagement.
DEVELOP
IDEATION
User flow diagram
I reviewed the user flow diagram and the cross-functional team discussion on the flows of this new mobile web-app game.
To optimise first impressions of the game and lower the attrition rate for the landing page and flow, the game designers and I made subsequent significant adjustments to the onboarding flow for first time players.
- Rather than mandating immediate sign-up for new players, they can begin learning and playing the game without any obligations until they reach a significant milestone level that rewards prizes, at which point they will be required to sign up in order to continue their progress and claim any real-life rewards.
This was to allow players to easily experience the game and grasp gameplay mechanics, and motivate them to progress beyond the first milestone level.
Mid-fi wireframes
With the tight project timeline, I crafted 145 mid-fi wireframes within 2.5 weeks using Figma, iterating on the sketches and aligning them with the user flow diagram.
In order to ensure learnability, usability, and monetisation opportunities, I prioritised essential elements in the players' journey. Specifically, I focused on enhancing the landing page, onboarding flow, the level selection screen, the brand action selection screen, and the referral screen.
I thus also created A/B test variations of the onboarding flow for new players, and the level selection screen.
A/B testing using MAZE
1. Onboarding flow for new players
To validate our hypothesis that shifting the sign-up flow after the game tutorial would allow players to swiftly engage with the gameplay loop within the initial 5 minutes and reduce the sign-up friction, I prototyped A/B flow variations.
Using MAZE, I conducted testing with 7 users for flow A and 7 users for flow B.
Key findings
Out of the 7 testers in flow B, 5 chose to create their account later, even when prompted after completing the onboarding game tutorial. This may have indicated that the sign up process could be a pain point if deemed not necessary in the game experience.
Therefore, in order to enhance the initial impression of the game, the game designers and I collectively concluded that it would be advantageous to modify the sign-up process to occur after the game tutorial and once players have achieved a significant milestone level.
2. "Enter code" button on level selection screen
In order to facilitate seamless access to the brand action of newspaper purchase, I designed A/B test variations for the level selection screen. The objective was to test the hypothesis that relocating the "enter code" button from within the menu to a more easily accessible area would enhance monetisation potential.
Using MAZE, I conducted testing with 7 users for variant A and 7 users for variant B.
In order to facilitate seamless navigation for players to engage in the brand action of purchasing a newspaper, I strategically positioned the 'enter code' button at the bottom left of the level selection screen, leveraging insights from the A/B testing.
Unmoderated remote testing using MAZE
To help players understand the gameplay and easily return to the web-app game, I also conducted unmoderated remote usability testing using MAZE.
Key findings
1. Landing screen
2. Onboarding game tutorial
Moderated usability testing using Discord
Using the A/B test findings, 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 page
"I would be more incentivised to play if I could see the preview of potential prizes to be won on the landing page."
2. Onboarding game tutorial
"I would like to know more about the storyline from the onboarding."
"Incorporating a progress bar as a visual indicator of my game progress would be more effective than relying on numerical values."
3. Level selection screen
"The energy refill rate is ambiguous; it is unclear whether "05:05" indicates a 5-hour or 5-minute refill time."
4. Enter passcode screen
"There's no eye icon to make passcode visible."
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 a cross-functional team discussion 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 SPH client, seeking their valuable feedback and obtaining approval.
Client highlighted concerns about the login flow, specifically regarding existing players potentially being redirected to the onboarding tutorial due to typographical errors. After thorough discussion, our Sqkii team proposed the inclusion of an interim screen when a mobile number not found in the game's database is detected. This screen would offer players the choice to proceed to the tutorial or return to the login screen.
Following the mid-fi braintrusts, I conducted a comprehensive project briefing, including the timeline and deliverables, to our UI agency.
I took charge of overseeing the key screens and assets developed by the UI designers.
In order to ensure cohesiveness between the designs and the intended game experience and objectives, I quickly familiarised myself with their working methods and effectively communicated the UI direction. Despite the initial miscommunications, I took the initiative to concisely consolidate all UI feedback, fostering a stronger collaborative dynamic.
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 comprehensive review of the internal hi-fi wireframes braintrust session, which included UX designers, the project manager, game designers, developers, and the quality assurance team.
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. This led to multiple iterations, incorporating updates to the brand actions as per the client's input.
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 performed rigorous testing on both staging and production environments, conducting multiple rounds to ensure that the final product adhered to the intended design and flow.
Given that the final game design was in Chinese, I effectively communicated the required font size adjustments to the developers, ensuring optimal readability while maintaining the integrity of the UI design.
FINAL PRODUCT LAUNCHED
EVENT RESULTS
Overall, the game demonstrated its effectiveness in driving player engagement and newspaper purchases across the various demographics during the campaign period from January 12, 2023, to February 13, 2023, while also being visually appealing and engaging.
10.77%
overall average player retention
3,259
players completing ≥ 1 brand action
1,863
players with ≥ 50 play-throughs
1,974
players purchasing ≥ 1 newspaper
END GAME SURVEY
> 61%
of end game survey respondents grew more interested in purchasing Shin Min Daily News
While older respondent groups exhibited a higher proportion of individuals who gained interest in the newspaper, over 80% of respondents from the second youngest age group (26 to 30 years old) also expressed increased interest due to the game. This demonstrates the game's potential and effectiveness in driving reader acquisition, even among younger participants.
LEARNINGS
As the lead UX designer for my inaugural project at Sqkii, I honed my time management, cross-functional collaboration, and Figma skills, enabling me to iterate rapidly within the constraints of tight timelines.
To consult with developers on technical feasibility of integrating 2D and 3D assets and to create mockups for them to test before requesting assets from the UI agency. For this project, it was only during the staging environment that the team discovered the need for the gameplay to be entirely in 3D, making a 2D background unfeasible.
Due to the broad and varied target groups and objectives, which encompassed acquisition among the younger generation and retention for the predominantly older readers, there is potential for improvement in the designs and game mechanics to better cater to each specific target group. Additionally, revisiting accessibility considerations would further enhance the overall experience.
FUTURE STEPS
Refining the design
If I were involved in future iterations of this project, I would prioritise refining the spatial system, font sizes and the 3D gameplay design. This would ensure optimal readability, improved visibility of gameplay, and easy interaction with elements on mobile devices. Additionally, I would conduct moderated in-person usability testing, specifically targeting the older players, to carefully observe and gather valuable feedback.
Designing for language accessibility features
Since the final game design was exclusively in Chinese, I'd like to explore the possibility of incorporating English as an alternative language feature. This may help overcome the language barrier, particularly for the younger generation who have English as their first language. By doing so, it may contribute to the acquisition of the younger audience and increase awareness and interest in the vernacular Shin Min Daily News Chinese newspaper.