MONEY SMART
Financial education in the form of simulation game for student
MY ROLE
TEAM
Research
Wireframe
Low and Hi-fi design
Prototyping
Motion design
Project Manager: Rare Eyes
Illustrator: 9Block Creatives
Design Lead: Leo Nguyen
UX Researcher: Lan Nguyen
UX Designer: An Ho, Nam Ba
TIMELINE
August - October 2020 (2 months)
CLIENT
Nathan Nguyen
Setting up
Simulation Game
Financial Lesson
Overview
INTRODUCTION
Like its name, Money Smarts’s goal is to help people be smart about money.
Started off as a board game for students, Money Smarts began its journey in education in 2017, teaching financial management in a fun and exciting way. Although the game was initially introduced as a part of a 10-week finance course, it quickly gained popularity and was loved by many students. Recognizing its potential, in 2020, Nathan (the founder of Money Smarts) decided to team up with designers and artists to digitalize the board game so that it can reach more people from all ages, not just students alone.
Illustrated by 9Blocks Creative
🌋 PROBLEM
How might we help people understand and practice financial independence easily?
-
12 weeks for a ready-for-pitch animated prototype
-
Incorporating financial management knowledge into a mobile app while keeping the essence of the original board game
-
Non-generic design: bold, playful but not childish
-
Remote teamwork: 1 project manager, 3 designers, 1 researcher, and 5 artists from 4 different locations - Hanoi, Da Nang, Ho Chi Minh, and New York
-
Design team: 1 senior designer, 2 freshers (me + another designer), 1 junior researcher
Week 1
UNDERSTANDING
Our first task was to play games (It’s finally happening!): Money Smarts, Monopoly, Board Kings, Sims, Fortune City, etc. Beside the Money Smarts board game, we tried out a handful of games from different categories such as expense tracking, habit building, or games for groups to understand what is working, what is not, and how we can apply those findings into our product. We also conducted multiple surveys and user interviews to find out more about their learning and playing habits.
Here are some insights that we collected:
Week 2
THE SCOPE
This onboarding journey would adapt the progressive disclosure method. This way, instead of bombarding players with endless game instructions, we break the guide down into bite-size pieces, letting the user experience the actual game as we go.
We want to charm the investors in the same way that we impress our players. By walking them through the first journey, we hope to make an impression with our stunning graphics along with the seamless guidance and instructions.
Week 3
OUR APPROACH
Test early, fail fast
In design, nothing can be fixed without the nod of the users and testing is the most effective way to achieve that agreement. To avoid the deadly cases of assumption, we run tests constantly to verify our findings and hypothesis. However, as good as it sounds, the high demand for tests also means that we need to design, iterate, and implement quickly.
Before we could flesh out our design ideas, we needed to define the app's core values and respective highlight features:
Week 4 - 8
THE DESIGN
With the design values and feature listings on hand, we started mapping out the user flow for each feature for the next 5 weeks. Our goal by the end of Week 8 is to complete the design of the whole app and get ourselves ready for prototyping.
1. Data Visualization
Since financial education is the core of this game, it is extremely important that we present the lesson in the most digestible way possible. In order to achieve such a goal, besides breaking the lessons down into smaller pieces, we utilized geometric shapes to portray these definitions. Users can navigate through the flow by tapping on those shapes, and the information will pop out correspondingly.
2. Input Data
Our target for the set up session (the flow of the app) was to help the users fill in their data while learning the financial terminologies. There were a lot of definitions to memorize such as income, expense, asset and liability.
Hence, we broke the flow in 2 parts: Lesson and Input. Users can choose to skip the lecture if they already master the knowledge. However, in order to discourage them from doing so as much as possible, the skip option was designed in a way that challenges the users assurance of their memory. As a result, 94% testers chose to continue with the lesson.
3. Bite-sized Lessons
Financial lessons in Money Smarts were broken down into bite-size pieces and got delivered to the users via Mr. Fox - the game’s guru. But instead of giving a 90-minute lecture, Mr. Fox only pops up when an explanation is needed or when the players want to access the help center. By doing this, information in Money Smarts becomes very accessible.
In order to complete a lesson, the users will have to pass a quiz. How well they do on the quiz affects the amount of rewards they are going to receive.
4. Real-life Simulation
No matter how good a person is at managing their finances, life is filled with the unexpected. They can be risks, opportunities, or simply luck. Because of this, Money Smarts operated via a wheel of life. The outcome is unexpected but the route to financial independence (winning) depends on the player's choices.
5. Reward System
With an educational app, it is important that the user feel that they are making progress. Hence, we implemented various systems for users to track their accomplishments. These systems include ranking, inventory, and badge collection.
User’s badge and inventory are saved in their profile and can be accessed at any time. They act as the users’ wall of fame and can be shared on their social media with a camera button.
6. Ranking
Since each user's starting point is different, we avoid comparing net worth, income, or anything that can be manipulated by initial manual input at all costs. Instead, we use the Financial Freedom Score (FFS) as a scale. Furthermore, we adopt 2 types of rankings: personal and leaderboard.
1. Personal Ranking
Money Smart tracks users’ quiz average, quiz streak, log-in streak, etc., and announces the percentile of each metric. With these individual rankings, users can have an overview of their level and accomplishment.
2. Leaderboard
Users’ FFS are compared at different levels: global, regional, and custom group
Week 9 - 11
THE MOTION
After the design was finished, all that was left was animation. Easy, except for the fact that none of us are animators. Since Figma could not support the level of animation that we were aiming for, we tried out other prototyping tools such as InVision, Lottie, After Effect, etc., hoping to find one that could create seamless motion and have a shallow learning curve.
After many trials and errors, we found Principle, hence, this:
Week 12
THE HAND-OFF
Reorganizing the Figma and Principle files, and, we are done!
