Projects         Playground         About


Sep. – Dec. 2020, 12 weeks 

An interactive educational platform to help college students make wise financial choices.

The average student debt after graduation from college rose from $18,550 (in 2004) to $28,950 (in 2014), an increase of 56 percent. These numbers demonstrate a growing need for increased financial literacy education in young adults. Although a majority of teens wanted to learn about money management, more than half wanted to learn the easy way. Hence was the birth of Moneyveristy, a convenient and exciting financial literacy education platform.

Skills ✨
User research
UIUX design
Design for Learning
Tools 🖇
Figma, Google Suite
Collaborators 💖
Anna Yuan
Claire Lee

Project Concept

Monversity is a game-based platform that teaches young adults to effectively use various financial skills. It covers a wide range of topics including personal financial management, saving and budgeting, and long-term investments.

During the learning process, each student help a virtual character who constantly runs into earthly financial problems. The student’s job is to serve as the financial advisor and use the knowledge learned to help it make smart financial decisions. The goal of this project is to help young adults become more financially literate and make wise financial choices.

Final Platform

Click on the little arrows to see the different screens designed for the platform. The platform consists of four key stages: The Mission, the Modules, the Checkpoints, and the Rewards. 

The Mission
When the student first launches the platform, they recieve a scenario about the alien exchange student landing on the Earth. The user gets to customize the alien friend, choosing the alien’s appearance, naming the alien, and deciding which city the alien will live in. The alien has many questions on how Earthly finances work; it is the student’s role to teach the alien how to make wise decisions with Earth money. This learning by teaching method will help the user reiterate on what they have learned through the modules. 

The Modules
Each module chapter will starts with the introudction of a financial scenario that the alien friend runs into. The user’s job is to gain knowledge and help it make smart fianacial decisions. In the moduel section, the user will go through the learning materials in a mixed form of videos and articles to learn about the key terms, concepts, and principles.

The Checkpoints
On Moneyversity, the student is assessed in two ways:

  1. Conceptual questions to test the understanding of the concepts (teaching the alien character).
  2. Scenario-based questionst to test the ability to apply the knowledge acquired to make financial decisions (helping the alien make a decision).

This will allow the user to test their knowledge in a low-stakes, stress-free environment, helping them develop intuition and knowledge on how to make wise financial decisions.    

The Reward
When the student completes a module, they recieve money reward in the currency of “Allos.” The student can use this money at the store to help the alien friend achive its dream vacation in Florida. The user can also connect with their real friends on the platform via Facebook to compare the alien characters and see who else is striving to become financial experts. 

Once the user completes all the modules, they see a final ending scenario where the alien character thanks the student for helping it through the journey.

Problem Space

Through the platform, the team and I are trying meet the needs for financial literacy resources in young adults between the ages of 17 and 25 within the United States. The rising numbers of student debt demonstrate a growing need 
for increased financial literacy education in young adults.The root cause of this problem goes back to socioeconomic status. Many young adults are financially illiterate because they do not receive appropriate education in school, do not get guidance from parents, or do not know that this is a necessary knowledge before leaving home. Other causes include financially illiterate parents or not having enough money to worry about financial literacy.

How might we help students become more financially literate through an exciting educational platform?

User Research

Survey Results + Insights
The initial survey gave several insights into the problem understanding that the team and I then used to inform the design of the curriculum and website:

  • Every single participants was unsure of the definition of financial literacy and hadn’t encountered these concepts in a formal education setting.
  • Most of the respondents’ prior knowledge came from their parents or other authority figures.

This highlights two main challenges:

  1. The target demographic would have widely varying levels of financial literacy education depending on external factors.
  2. That there probably exists a level of skepticism for online education regarding sensitive topics like money and financials.

However, respondents acknowledged the existence of a clear and demonstrable need for financial literacy education. They also expressed that they want to learn about financial literacy in the context of their own lives and how this information can inform their financial decisions going forward. Finally, we found that the majority of our respondents indicated a preference for highly visual, multimedia learning tools. Participants showed a notable preference for learning using video platforms like Khan Academy over traditional learning approaches.

Learner Profile
We designed this platform for college students between the age of 17 and 25 who understand the concept of income and spending.

  • This student already has a general knowledge of student loans and may or may not have had a part-time job in the past.
  • They have at least one bank account and are aware that money exists outside of cash format. 
  • Depending on the environment, they may or may not have an in-depth knowledge on budgeting and savings. 

These past experiences may influence the attitude and disposition to learning about personal finance.

Competitor Analysis
Before diving deeper into the project, we created a competitor analysis chart to visualize the different platforms out in the market. The research showed that there isn’t a financial literacy platform that utilizes teaching-by-learning and interactive learning.

Therefore, a user between the age of 17 and 25 are in need of a multimodal learning platform that teaches various financial skills and helps them make wise decisions.

Scuplting the Experience

Before jumping into the design elements, the team and I created a quick storyboard to visualize the way the user may interact with the platform. The storyboard above is one scenario a user may end up interacting with Moneyversity.

Information Architecture
Before designing the screens, we created an information architecture diagram to list out the things that will be on the screen. This helped us determine what will be on the navigation bar and which features will be on each page.

User Journey Map
To visualize the user’s interaction with the platform, we also created a user journey map. The diagram shows the process of the interaction: From “the mission” being assigned to the process of each module, to the finishline of the interaction.

Design Wireframes

Lowfi Prototype
Based on the layout of information architecture, we then designed the lowfi prototype of the UI. While stripping down the information hierarchy only using different shades of gray, we determined the layout and the major interactions within the platform. 

User Testing Insights
Afterwards, we conducted several user testings with the wireframe platform to test if the design is usable. We asked questions such as their likes and dislikes of the features, effectiveness of user engagement, and topics they would like to learn through the platform.

The feedback we recieved were the following:

  • Users think that it would be nice to have additional resources and a reference dictionary that they can look into if they are interested in learning more about the topic.
  • Users think that it’s effective to have both articles and videos as the learning materials since it can accommodate the needs of different types of learners.
  • Users like the idea of having an alien friend and being able to customize / buy it new clothes or accessories on the way — it’s adding more fun to the learning experience.
  • Users wonder whether they can skip chapters / modules if they are already familiar with the topics covered. 
  • Users like the ‘connect with friends’ feature and think that knowing they are not alone makes the experience more fun and engaging.

Based on the user testing feedback, we edited the existing screens, such as adding an appendix dictionary, a link for external resources, and removing two videos back-to-back.

Learning Process

Course Content
Based on user testing results, we modified the course content to have from three to a total of five modules. The revised course content include Personal Banking, Saving and Budgeting, Financing Education, Life Skills, and Legal Documents. This covers a variety of financial topics that students would benefit in the future. We also added new feature where the students pre-test their knowledge for each module to opt out if they are already knowledgeable on one topic.

Learning Theories
Because this is an educational platform, we incorporated the theories we were taught in class. Some of the more prominent theories in the platform are the following:

  • Learning by teaching: The user becomes a “financial advisor” to an alien student on Earth in 
the platform. The student can see the financial impact of their decisions for the alien in a low-stakes and stress-free environment.
  • Motivation: Incorporating decision making scenarios with situations similar to the ones students face in real life, the platform provides the user a feeling of autonomy which sparks intrinsic motivation.
  • Multimedia learning: By engaging the learning materials with videos and readings (auditory and visual).
  • Scaffolding: We created “diagnostic tests” before each module, allowing users to tailor the curriculum to their needs by identifying concepts that need work or skipping familiar concepts.

Other learning theories used on the platform include backward design, extrinsic rewards, intrinsic motivation, self-efficacy, mastery, and social persuasion.

Design System

Before jumping into the high-fidality, we decided to spend some time designing the overall system language for consistency. Refer below for more detailed design system of Moneyversity.

We used the light green that symbolizes money and a contrasting navy blue to emphasize the content. Open Sans was used as the main typeface with four contrasting type sizes to ensure readability.

Final Presentation
As a final wrap up of the class, my groupmates and I presented the project on Gathertown, a virtual-interaction platform developed by a CMU alum. It was really neat to see my virtual classmates hanging out around the poster to learn more about Moneyversity.

Moneyversity Poster to Advertise the Platform
Moneyversity Poster to Promote the Platform

Final Thoughts

As someone with a stronger communication design experience, this project was a good overview of what it may be like to design a digital product. I learned that I enjoy conducting research and organizing information to craft a more intuitive user experience. I also learned how to apply different learning strategies and theories from the class to a final product. This holistic project gave me a better understanding of HCI and how research can contribute to sculpt better UIUX.

* The alien icons used in the project were created by iconcheese via The Noun Project 

Thank you for visiting ︎ Have a great day