Step into the world of Build Early Money Habits, an immersive and interactive money management lesson platform tailored for children aged 10-12. This innovative project showcases the parent's journey from effortless sign-up to convenient payment processing, ensuring a delightful and user-friendly experience.
Build Early Money Habits
My role
UX Designer | UX Researcher | UI Design
Duration & Software
1 week | Figma
Problem Statement
Children need to learn good financial habits at a habit-forming age in order to make good financial habits in their adulthood because a lack of financial literacy knowledge at a young age promotes bad financial choices in the future
Challenge
Crafting a seamless user journey that guides parents or guardians through course details, ultimately prompting them to enroll and complete the purchase.
Solution
Focusing on a specific section within 'Build Early Money Habits Through CTA’s,' I seamlessly guided users from the course overview page to the purchase page, ensuring a smooth transition. This guided process facilitated a seamless confirmation of their purchase and allowed them to learn more about the course.
design process
User Research
User Interviews
Competitive Analysis
Feature Prioritization
UNDERSTAND
User Sentiment
User Testing
DEfine
IDEATE
Information Architecture (Site Map)
Card Sort Analysis
DESIGN
Low-Fidelity Prototype
Mid-Fidelity Prototyp
Annotations
feature prioritization
What features are most important for user needs? In this process, I used the MoSCoW method to determine what features are needed in BEMH.
Top Hero Section
About Build Early Money Habits
Sign Up
Bottom Hero Section
Profile
Settings
Must Have
Should Have
Course Guide
Reviews/Testimonials
Resources
Payment Page
Confirmation Page
Terms and Conditions Section & Privacy Policy
Could Have
FAQ
Parent Blog
Help Page
Social Media Links
Safety on Zoom & the Internet Page
Would Have
Child and Parent Surveys
How to use Zoom page
Careers
Site map & Card Sort
How will my features be organized? After developing important features, developing a site map, coupled with having potential users arrange the information according to their preferences, facilitated the structuring of BEMH. Despite excluding some features, it was essential to understand the platform's flow comprehensively.
Site Map
Card Sort Cards
Terms and Conditions
Educational Content
Sign up/Registration
Our Economy
Saving and Budgeting
Social Media Links
Financial Goals
Course Guide
Zoom
Entrepreneurship
Habit Forming Age
Money 101
Positive Finance Decisions
Parent Blog
FAQ
Safety
About BEMH
Stock Market
Resources
Out of the approximately 10 users who participated in the card sort, one particular sorting exercise especially caught my attention!
About
Habit Forming Age
About BEMH
Account
Sign up/Registration
Unsorted
Zoom
Social Media Links
Corporate Money
Stock Market
Our Economy
Entrepreneurship
Money Synopsis
Money 101
Positive Finance Decisions
Saving and Budgeting
Financial Goals
Help + Resources
Safety
FAQ
Terms and Conditions
Parent Blog
Resources
Courses
Educational Content
Course Guide
Competitive Analysis
What are the goals and trends similar companies are accomplishing? Researching different companies helped me align my strategies with industry benchmarks for achieving my objectives by assessing their strengths, weaknesses, opportunities, and threats.
Lemonade Day
https://lemonadeday.org/
Basic Information
- Free
- Specifically meant for 3rd-5th grade but says for all ages
- Teaches how to start and operate your own business
Strengths
- No selling of private information
- Aesthetically pleasing layout
- Sufficient amount of information on the program/resources
Weakness
- Some videos and images can be larger than scroll position
- Awkward spacing and layout in some tabs
Opportunities
- Has large business sponsors
- Has a large social media presence
- Sufficient amount of media shared on the web domain
Threats
- Not available in every state
- Received a low score on the accessibility checker. (Clickable and Titles)
Khan Academy
https://www.khanacademy.org/
Basic Information
- Free
- Grade ranges K-12
- Teach over 10 subjects
Strengths
- Does not sell data and implements “Children Privacy Notice” for younger learners
- Aesthetically pleasing designs, iconography, and layout
- Inclusive with courses presented in different language
Weakness
- Mixed Reviews ( Both negative and positive 3.5/5 )
- Resources for parents are difficult to navigate on the website
- Returning to the homepage can be complicated when clicking on the link to another tab
Opportunities
- Has large company supporters
- Large social media presence
- Gives users insights on business finances
Threats
- Received a low score for “Forms” when checked for accessibility
- Some buttons can be misleading
Money Time
https://www.moneytimekids.com/
Basic Information
- $12 monthly or $66 anally
- Age range 10-14 years old
- Teaches financially literacy and management skills
Strengths
- Offers support for in person and online learning
- Offers platform in multiple countries
- Has any easy starting process
Weakness
- Only has reviews from homeschooling parents on website
- Only shows a few reviews and does not let users access more
Opportunities
- Has won 2+ awards, one specifically for financial literacy
- Gives success story testimonies on website
Threats
- Readability score was low on accessibility checker
- Created a privacy policy but may or may not use or release any information
Low fidelity prototype
Homepage
Top Hero Section: A call-to-action (CTA) is provided to sign up for BEMH without viewing other website material such as Course Overview and About BEMH.
Main Content: General information about BEMH and its resources is located in the middle section, while the CTA for this specific project can be found in the first "Learn More" section.
Footer: The footer includes social media links as well as essential footer content such as FAQs, Contact Us, Cookie Policy, and more.
Course Overview Page
Main Content: The course overview page presents the content covered over the five-week duration, offering concise summaries of each category for quick comprehension.
CTA: Once users have reviewed the course overview, CTA to sign up for the course is conveniently provided for those who are interested after reading.
Sign Up
Progress Tracker: The footer includes social media links as well as essential footer content such as FAQs, Contact Us, Cookie Policy, and more.
Purchase Overview: The price and information section provides users with a clear overview of the course cost and its inclusions before purchasing.
Contact and Billing Information: Users can securely input their personal details, such as name, address, and email, allowing for seamless transactions.
Privacy Policy
Privacy Policy & Terms and Conditions: Users can review how their personal information is collected, used, and protected by the website or service provider, ensuring transparency and trust.
Back and Next Button: Upon selecting the back button, users will navigate to the previous screen. To proceed, users must first agree to the terms and policy, after which the button will become enabled.
Payment Page
Payment Section: The payment section enables users to securely input their card details to complete the course purchase.
Payment Type and Complete Payment: The payment types provide users with the flexibility to select their preferred payment method when purchasing the course.Upon selecting the "Complete Payment" button, the users chosen payment method will be charged, seamlessly directing them to the confirmation page.
Confirmation Page
Payment Confirmation: The confirmation message reassures users of the completion of the course purchase process.
Back to Homepage: After completing the course purchase process, the "Back to Homepage" button offers users to return to the homepage with ease.
Course Invoice: The course invoice section provides users with essential details such as the billing address, the card used for payment, the total balance paid, and the email address where all relevant information will be sent.
User sentiment
What is the general perception and emotional response to the Low Fidelity Prototype? Through presenting the prototype and conducting preliminary user testing with potential users, I gained insights into how users perceive and feel about various aspects of BEMH in its early development stages.
mid fidelity prototype
User testing report
What insights were gathered from user testing? Through a meticulously crafted series of steps informed by thorough research, I provided participants with a structured user experience journey. This allowed me to analyze and comprehend user behaviors and cognitive processes. By leveraging click evaluations, I gained valuable insights into the functionality of my designs.
Participant 1 General Profile:
College Student
20 y/o
Sociology and Psychology Major
Participant 2 General Profile:
College Student
20 y/o
Political Science and Justice Studies
Participant 3 General Profile:
Mother
54 y/o
Has children (Stay at home mom)
Participant 4 General Profile:
Father
54 y/o
Has children (Business Owner)
Key Takeaways
Efficient/User-Centric Design: Implementing a straightforward design allows parents to seamlessly navigate the platform, learn about BEMH, enroll their children, and access payment details.
Given that the timeline for BEMH was only a week, with the primary objective being to provide the platform with a basic digital experience, I am eager to expand upon it by introducing additional tasks and features to the application. However, it presented a significant challenge, from which I learned a valuable lesson in time management and the importance of prioritization in user research.
next Steps
Create prototyping within my mid-fidelity frames
Conclude any final research, extra testing, and receive feedback
Hand off my findings to the UI designer