top of page

💰 Money Smarts

⏰ Aug - Oct 2020
👩‍💻 My role

Research

Wireframe

Low and Hi-fi design

Prototyping

Motion design

👨‍👩‍👧‍👦 Team

Project Manager: Rare Eyes

Illustrator: 9Block Creatives

Design Lead: Leo Nguyen

UX Researcher: Lan Nguyen

UX Designer: An Ho, Nam Ba


Setting up

Simulation Game

Animated finance 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
Overview
🌋 The Challenge
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 01
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 conduct multiple surveys and user interviews to find out more about their learning and playing habits.

 

Here are some insights that we collected:

Week 02
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 03
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 of 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 core values and respective highlight features:

Week 04 - 08
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.

E Guru 3.png
Frame 553.png
Profile 46.png
 
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. 

Asset - 16.png
Guru - 9.png
Start.png
 
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.

Opportunity.png
Surprise.png
2.png
 
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 accomplishment. 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 to their social media with a camera button.

FD - 22.png
FD - 24.png
 
6. Ranking

 

Since each user starting point is different, we avoid comparing net worth, income or anything that can be manipulated by initial manual input at all cost. 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 

Profile-1.png
Profile.png
Week 08 - 11
The Motion

 

After the design was finished, all that’s 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 can create seamless motion and have a shallow learning curve.

 

After many trial and errors, we found Principle, hence, this:

Week 12
The Hand-off

 

Reorganizing the Figma and Principle files, and, we are done!

Comments or suggestions for this project?

🙏 You're the best!

 
 
❤️ You might also like...

bottom of page