.png){kind=small}
FINANCIAL GAME HUB MOBILE DESIGN FOR POSB BANK
LEAD UX DESIGNER - TAN FANG HUI
collaborating with Game Designers, UI Agency (OWW),
Project Manager, Quality Assurance, Developers
MAY 2023 - JUN 2023
MID-FI WIREFRAMING, PROTOTYPING, USABILITY TESTING
TOOLS USED - FIGMA
FINANCIAL GAME HUB
06
CONTEXT
Design of "Smiley City" for POSB Bank, launched in August 2023. "Smiley City" is a new hub where users control an avatar named Smiley to engage with various modules focused on financial literacy.
​
POSB Bank offers personal banking products such as savings accounts, investments, insurance, personal loans and online banking services.​
​
"Smiley City" is a gamified financial literacy hub, where children earn in-game currency and personalised digital collectibles as they progress in their learning journey.​
​
"Smiley City" is designed to foster financial literacy awareness among children.
users
to be updated after end of launch
PROBLEM
POSB Bank aimed to increase financial literacy awareness among children by developing a gamified learning hub with access to various financial modules targeting children aged 7-12.​
THE CHALLENGE
"How might we enhance financial literacy awareness among children through a gamified learning hub?"
DISCOVERY & DEFINING
RESEARCH
The Game Design team conducted secondary research on various popular and successful games in the market.
Drawing upon diverse player motivations and leveraging insights from gamification projects led by Sqkii, the game design team proposed a tree-top world narrative, allowing users to guide the avatar Smiley, a squirrel, through interactions with buildings and characters to access financial modules, earn in-game currency, and unlock personalised digital collectibles. This strategy aims to boost user engagement by encouraging exploration, expression and mastery of financial knowledge.
DEVELOP
IDEATION
User flow diagram
I reviewed the user flow diagram and the cross-functional team discussion on the flows of this new financial literacy hub.
To enhance accessibility, sign-up was made optional for users unless they preferred to save their progress. We strategically adjusted the user flow, incorporating sign-up prompts to allow users to easily sign up when desired.
Mid-fi wireframes
​
I crafted mid-fi wireframes using Figma, iterating on the sketches and aligning them with the user flow diagram.
​
To optimize navigation and user understanding, I prioritized crucial elements in the players' journey. Specifically, I enhanced the level habitats, dialogue pop-ups, milestone screen, and the flow for purchasing collectibles.
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 four individuals who possessed diverse gaming profiles.
I conducted observations on participants' navigation time for the avatar Smiley in habitats, accessing modules, purchasing collectibles, changing outfits, and viewing milestones.
​
​
Key findings from moderated usability study​
​
1. Landing screen / ground level habitat
​
"Navigating to other habitat levels is not very intuitive because the 'leaft' object appears more like a swing than a lift to access those levels."
2. Milestones screen
​
"Accessing both the achieved milestones and upcoming ones is buried in the menu and lacks motivation."
3. Accessing other habitat levels pop up
​
"Adding visuals beside the various levels would provide clarity, highlighting the correlation between the different level names and the various habitat levels."
Multiple iterations and mid-fi braintrusts
​
​
Based on player feedback, I iterated on the mid-fi wireframes and also conducted a mid-fi braintrust session 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 the gamified hub's attractiveness and user retention.
Subsequently, I presented the revised mid-fi wireframes to the client for their feedback and approval.
​
​
Following the mid-fi braintrusts, I conducted a comprehensive project briefing, including the timeline and deliverables, to our UI agency.
​
In order to ensure cohesiveness between the designs and the intended game experience and objectives, I effectively communicated the UI direction.
I took charge of overseeing those key screens and assets developed by the UI designers before handing over this project.
​
FINAL PRODUCT (to be updated here after launch)
EVENT RESULTS
Statistics on gamified hub's effectiveness in fostering financial literacy among children 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 overseeing the mid-fi design phase of this project, I was responsible for creating mid-fi wireframes that effectively communicated the tree-top world narrative and the required 2D art style to the UI agency. Additionally, I collaborated with developers to assess the suitability of the tiled map assets, ensuring alignment with development needs.
​
FUTURE STEPS
Refining the design for children
​
If I were involved in future iterations of this project, considering the target audience of children aged 7-12 becomes crucial. Including these young players in moderated in-person usability testing would be essential to identify and address potential pain points they may encounter.