.png){kind=small}
FINANCIAL GAME HUB MOBILE DESIGN FOR FI
MID-FI WIREFRAMING, PROTOTYPING, USABILITY TESTING
LEAD UX DESIGNER - TAN FANG HUI
collaborating with Game Designers, UI Agency (OWW),
Project Manager, Quality Assurance, Developers
MAY 2023 - JUN 2023
TOOLS USED - FIGMA
FINANCIAL GAME HUB
07
CONTEXT
Design of a virtual world for a financial institution, scheduled for launch in September 2023. It's a new hub where users control an avatar to engage with various modules focused on financial literacy.​
​
In this gamified financial literacy hub, children can earn in-game currency and personalised digital collectibles as they progress in their learning journey.​
​
This hub is designed to foster financial literacy awareness among children.
​
Due to confidentiality, fictional content has been added for presentation purposes and more details of the design process for this project would be released after game is launched.
users
to be updated after end of launch
PROBLEM
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 narrative, allowing users to guide the avatar 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
To maintain confidentiality, the details of the user flow diagram, mid-fi wireframes, prototyping, iterations and usability testing will be released here after the game launches.
​
​
​
​
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 in habitats, accessing modules, purchasing collectibles, changing outfits, and viewing milestones.
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 narrative and the required 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.