Engaging People with Financial Literacy

An online program that teaches young people how to manage their finances and pay off debts.


This project was done for a startup that is currently in stealth. As a result, I am unable to use the company's name and logo. I will use a placeholder for the logo instead.

My role

I worked as a sole designer with the stakeholders, a front end developer, and content creator.
Creative concepts
UI Design
Animation and interactions

Defining the problem

Many people today under age 35 struggle with financial literacy. They often spend more than they earn and build up credit card debt. 

People in debt have tried previous solutions such as taking out loans to pay off their debts, taking online financial literacy, and signing up for programs that teach financial literacy by dictating their spending. 

What others have tried



The user takes out a loan to pay off debts. Now their debts are paid off and they only have to worry about one loan to pay.

The user finds themself drowning in more debt, and struggles to pay off the new loan.

The user signs up for an online class to learn financial literacy. They watches videos online.

The online lessons are long and boring, so the user loses interest and does not complete the course. 

The user signs up for a program to dictate their spending. They give the program all of their financial information, and the program tells them how much money to spend every month so they can get back on track and pay off their debts.

The user feels uncomfortable having their life dictated by a robot. 

With the understanding of the challengers of users, I created a problem statement in order to narrow the focus of my design process.
Users feel uninterested and are not incentivized to learn financial literacy.
How can we teach users financial literacy while keeping them engaged?

Researching Relevant Products

What techniques did other products use?

Although the stakeholders already did some user research, I felt it would be useful to look at other products that teach and/or engage. I looked at other education platforms, even if they did not specifically teach financial literacy to see how they teach; social media platforms to see how they engage, and grab/hold attention; and video games to see how they engage and be fun for the users. Mario is a personal favorite :)

The infinite scroll

Social media sites and apps are known for their infinite scroll function, which keeps users scrolling through content with no seeming end in sight. In education platforms, users often browse through organized sets of videos. While this can give a feeling of structure, it can feel tedious, boring, or intimidating. However, the infinite scroll keeps the user engaged, often curious to see whats next on the list of things to look at.

I considered using an infinite scroll as a way of browsing through financial literacy lessons. This way, browsing through lessons feels more natural, and can be fun.

Bitesize videos & images

One issue I discovered with online courses is that videos are long and users often lose interest. On the other hand, social media sites give users bitesize pieces of content. Users feel less intimidated when they see they need to watch a bitesize video rather than a long video. Additionally, users have to physically interact with their devices by scrolling in order to progress to the next image/video. This is another way of keeping the user engaged.

Rewarding Progress

In Super Mario Odyssey, the player must explore each level and collect "power moons" in order to progress to the next level. The player must cash in their moons to power up their hot air balloon, which then takes them to the next level. However, the player needs to cash in a certain amount of moons in order to progress.

Cashing in moons gives the player a feeling of reward for their hard work. It also gives a feeling of satisfaction that is similar to cashing in a large amount of loose change at a bank. I considered using this concept in my designs in order to give users a sense of reward and satisfaction, while also giving them a good feeling about their progress.


Mapping out the Flow

Before jumping into the designs, I felt it was necessary to map out the general flow of the learning process. This meant laying out the starting point, then the flow of each learning module, and then the user cashing in the reward.

Coins and points

Together, the stakeholders and I created a solution for incentivizing and rewarding users to continue with the financial literacy platform. As the user completes lessons and modules, they receive in-game currency in the form of coins. Then, they can cash in their coins to increase their score, which can give them an upgrade, similar to leveling up in a video game.


These upgrades were only represented in symbols. For the time being, they only give the user a feeling of progress without any real world benefit. In the future, the stakeholders intend to offer a financial incentive to users. The company would offer the user a loan to pay off their debts. Then, as the user would increase their score, their interest would decrease.

The Whiteboard + Interactions

Before jumping into the mid-fi wireframes, I always like to draw my ideas on a whiteboard and/or sketch my ideas with pencil. For the project, I was lucky enough to brainstorm ideas along side my stakeholders. This helps keep the ball rolling. After drawing out my ideas, I made lo-fi wireframes and the interactions.

The following drawings are for a module that teaches a method of budgeting known as the "50/30/20 rule".


These designs are for a website. The stakeholder's research showed that many users would use mobile. We decided to design for mobile first, and then design for desktop afterwards.

Browsing Modules (Endless scroll)

I decided to design the home page similar to the homepage of social media sites. By giving the user and endless scroll, they could begin modules effortlessly without the feeling of intimidation. Some modules would start with an image, video, insightful quote, or and easy multiple choice question.


I decided to begin the lesson with video content before moving the user interactions. Each video is short, no more than 15 seconds, and full screen. This solutions makes the user interact a little bit more by making them swipe to the next video. Additionally, the user is less intimidated by bite size videos.

A GAME THAT reviews 50/30/20 Rule

I created a short and easy game for the user to play. One way to get users to retain information is to repeat it to them. After watching a couple short videos, the user now has to play this mini game that forces them to repeat when they learned. The game is easy and fun, so that the user does not feel like they're performing some sort of tedious task.


I created a budget calculator for the user to use for themself after they have learned the concepts of the 50/30/20 rule, One issue that previous research showed was that users might take their time to apply what they learned in the lessons, and some might never get around to it at all. Here, I created a solution to make the user apply their new knowledge right away.

The profile page

I designed the profile page to contain the user's personal information and score. The stakeholders wanted the users' information for their own research, however they did not want users to feel pressured to enter information they did not want to share. Instead, they wanted users to focus more on their score, so I put the score and personal information on two separate tabs.


With the general idea of the flow of the site, I was able to start designing mid fidelity wireframes with more detail. Afterwards, I put the wireframes into a prototype for usability testing.

Browsing modules

bite size video

Budgeting game

Monthly Budget Calculator

Profile Page

Testing and Hi Fidelity

Color Palette

Before jumping into the iterations, I created a color palette for the designs from scratch. I first took into account the stakeholder's preferred color, then I thought about how the users should feel when going through the product. I wanted the users to feel excited and uplifted while going through the lessons. Additionally, I wanted the users to have a feeling of growth; and finally, I wanted them to feel like they were in good hands since they were handling finances.

Iterating in High Fidelity

I tested the prototype on 8 users. I had them go through the 50/30/20 rule module. This test was more about understanding, feeling, and general use, as opposed to ease of use.

Browsing Modules


  • Changed two icons to just current icon with score
  • Rearranged "continue lesson"
  • Rearranged basic information about each module


  • User's were more interested in their progress than being teased about their future status
  • User's felt awkward trying to continue the module. They would skip over it because they had to think for a second about where to tap
  • User's didn't like how the image broke the text

Bite Size Video


  • Added thin bar at the top to show progress of video


  • Users were not sure how long videos were or how far they were into each video. Additionally, they wanted to know from the beginning if the video was going to be seconds, minutes, or tens of minutes long. The bar assures them this is a bite size video

Budgeting Game


  • Added an intro screen in order to prepare the user for the game


  • Users were confused as to what to do when they started the game

Monthly Budget Calculator


  • Deleted "eyes" emoji
  • Changed pie chart to bar chart
  • Scaled up the panel where the user can add expenses and set the amount


  • Users did not respond positively to the emoji
  • I originally used a pie chart to keep it consistent with the previous game. However, the pie chart took up too much space. The bar chart allowed me to give the panel more space
  • Users felt the panel was too small. They needed more space to see all of their expenses

Profile Page


  • Changed tabs to change colors instead of using an underline


  • Users had slight difficulty selecting tabs


Once the prototype was done, I worked with the front end developer to flesh out some of the interactions so it could be pitched to investors.

Design Demo:

What I learned

Users like to use digital products that they understand and connect with, but the details are where users fall in love with a product. Adding personality to designs can strengthen them, and these details can be overlooked at times. At the same time, a designer should be strategic about where and how they add personality. Personality should enhance the product without distracting the user.

Next Steps