SmartMoney

Finance Education App - course project

SmartMoney is an app designed to teach financial skills as this is a topic that is not often taught to young people. The demographics for this app are teenagers (15-17 years old) and high school teachers who want start teaching personal finance in their classrooms.

View prototype

Project impact:

Users found that the app was easy to use and if populated with the right information, can be an engaging hub to teach teens personal finance.

What I learned:

I learned that having different user groups can be challenging and sometimes the best answer if having two different user flows to address their different problems. I also learned that there are important differences in designing a mobile app vs a responsive website.

Project Overview

The problem:

According to the Consumer Financial Protection Bureau, less than 17% of high schoolers are required to take personal financial classes. This lack of education can severely impact individuals’ lives in adulthood through debt and bad financial decisions. The issue is that there is a lack of a place to go for help.

Date:

Oct 2022 to Nov 2022

The goal:

Designing a platform that teaches financial skills. A place where the information is current, easy to follow and engaging.

Role:

UX researcher and ux designer

Tools:

  • Paper notebooks
  • Google Suite
  • Figma
  • Adobe XD
  • Discord

Responsibilities:

  • Conduction research
  • Brainstorm on paper and digitally
  • Paper and digital wireframing
  • Low and high-fidelity prototyping
  • Testing prototypes
  • Conducting usability studies
  • Accounting for accessibility
  • Iterating on designs

Discovery

Research summary:

First I did secondary research to understand what problem I’m trying to solve. I looked into what are the parts of personal finance that are important for people to understand. I also looked into how financial literacy is usually taught. This is done by interviewing people and asking them a set of question concerning their view on their own financial skill level, where did they learn about personal finance and how ready they felt in their teenage years regarding this topic. For the second user base (teachers), I interviewed some people who worked in the field and asked about if personal finance was taught. If not, I asked more in dept on how teachers create teaching materials in the hope of helping me structure my learning platform design.

Persona 1: Joseph

Joseph is a high school student who needs engaging personal finance tips because he wants to learn to budget for college.

Persona 2: Julie

Julie is a high school teacher who needs a finance curriculum platform because she wants to teach her students personal finance.

Competitive audit summary

Money Masters: learn finance

Pros

  • Easy to understand
  • Easy navigation
  • Fun engaging investing game to earn real coins

Cons

  • Game confusing for newcomers
  • Ads blend in with articles
  • Only mobile app

Investimate

Pros

  • Easy to understand
  • Easy to navigate
  • Investment simulation game with real data

Cons

  • Focus only on investment
  • Limited stock options in simulation game
  • Swiping feature in lessons is buggy
  • Only mobile app

Khan Academy

Pros

  • Has in depth lecture videos with transcript
  • Can comment and ask questions
  • Mobile app and responsive website

Cons

  • Lots of content, navigation can be more confusing

Mymoney.gov

Pros

  • Has up to date information for finance in United States
  • Has links to other financial resources
  • Simple navigation

Cons

  • Limited information, mostly redirect links
  • No mobile app

First iteration

Paper sketches

Ideation started with the mobile app. I used the method of progressive enhancement. My focus here was for the primary user base (high school learners) where their schools did not offer any financial course. I want to focus on creating wireframes for lessons and bookmark features.

Low-fidelity wireframes

Dashboard

  1. Navigation of recent activities
  2. Easy to get back to current lesson from dashboard
  3. Simple and straightforward navigation available on all pages

Lesson page

  1. Easy to bookmarking lesson cards
  2. Lesson information broken down into multiple cards to keep being engaging

Profile page

  1. Simple way to toggle between student and teacher mode.
  2. Teacher mode features are greyed out in student mode.

Dashboard

  1. Navigation of recent activities
  2. Easy to get back to current lesson from dashboard
  3. Simple and straightforward navigation available on all pages

Lesson page

  1. Easy to bookmarking lesson cards
  2. Lesson information broken down into multiple cards to keep being engaging

Profile page

  1. Simple way to toggle between student and teacher mode.
  2. Teacher mode features are greyed out in student mode.

Low-fidelity prototype

User flow:

  1. User flow:
  2. Open “create a budget” chapter 3
  3. Bookmark this lesson page
  4. Toggle app to teacher mode
  5. Go back to “create a budget” chapter 3
  6. Assign the lesson to class A
  7. Add a new student to class A

Usability study summary

I conducted a moderated usability study. The study was performed on 5 participants (each study) for 2--30 minutes. The main goal of both studies was to test it ease of navigation and article layout.

Findings

Bookmarks:

Most users had a hard time finding where bookmarked items are.

Student/ Teacher mode:

Most users had trouble finding the student/ teacher toggle button.

Navigation:

Most users were annoyed that it took several clicks to navigate to individual lessons.

App consistency

Some users were confusing why only teachers had a “my classes” section

Refining the design

Bookmarks

  1. Bookmark items added in menu
  2. Using sideway menu instead to accommodate to more than 5 items in the navigation bar.

Navigation

  1. Chapters circle buttons became lists to show more information about the lesson.
  2. Subtopics are in horizontal scroll taking advantage of this mobile feature.

Student/ Teacher mode

  1. Simple tab toggle to sign as a student or teacher.
  2. Can login using Google or Facebook account.

High-fidelity prototype

  • Login as learner
  • Open “create a budget” lesson under “budgeting and managing debt”
  • Bookmark lesson page
  • Go to bookmark lessons
  • Logout

Responsive design

Homepage

  1. Browsing categories resized based on different sizes of screens.
  2. Horizontal scrolling for less important features like app reviews and recent articles

Category page

  1. Table of content to accommodate longer lesson categories page
  2. Resized table of lesson chapters based on screen size.

Proposed next step

  1. Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
  2. Create assets like hover changes for buttons and text. Create sticker sheets for all design elements like colours, fonts and components.
  3. Conduct more user research to determine any new areas of need. For example, users who wants to post their own articles.