Personality Survey
- 🐯 Tiger
- 🐃 Ox
- 🦅 Eagle
- 🐉 Dragon
Back to Work
Karla Learn
What if Financial Literacy Was Actually Fun? Making Canadian finance less intimidating for newcomers.
Shipped MVP in 3 months
Tested with 5 international students with positive feedback
01
Project Overview
The Challenge
International students and newcomers to Canada often struggle with understanding the Canadian financial system, from credit scores to budgeting to renting. Existing resources are scattered, jargon-heavy, and don't address the unique challenges faced by people new to the country.
The Goal
Create an interactive, engaging tool that makes financial literacy accessible, culturally relevant, and even fun for newcomers navigating money in Canada for the first time.
997K+
International students in Canada (2024)
80%
Report concern about paying for their education
3 mo
Design & development timeline
02
The Solution
We created a web application that personalizes the learning experience through playful mascots, gamified progress tracking, and bite-sized modules focused on the most pressing topics for newcomers.
Course Modules
Targeted learning paths focused on the most pressing topics.
- Understanding Credit
- Learning to Budget
Multi-Browser Support
Accessible and reliable across all modern browsers.
- Chrome
- Edge
- Firefox
- Brave
Gamified Learning
Motivation built into every step of the journey.
- Progress bar & quiz feedback
- Learn Apply Grow
Meet the Mascots
After completing a short personality survey, users discover which financial mascot matches their spending style. Are they a planner or a spender? Or something else entirely?
It's the kind of thing you'd actually send to a friend — "wait, which one are you?"
03
Usability Testing
Testing Approach
Participants: international students
Tasks Performed
- Completing a personality quiz
- Checking learning progress
- Reading module content
Key Findings
- Progress bar and quiz feedback were highly motivating.
- Users appreciated plain language + visual icons.
- Navigation needed simplification—added breadcrumbs + clearer CTAs.
"I wish I had had a tool like this when I first moved here. Finding out information was difficult and this makes it more fun."
— Usability test participant
04
Design & Development
Built with: SvelteKit + Tailwind CSS
- Figma
- SvelteKit
- Tailwind CSS
- TypeScript
My Contributions
- Design system — Created component library and style guide in Figma for consistent UI.
- Front-end development — Built interactive pages and components in SvelteKit.
- Responsive groundwork — Began implementing mobile-first approach towards the end of the project timeline.
05
Lessons Learned
-
Simplicity Wins
Users valued clarity and playfulness over feature overload. Serious topics can still be approachable.
-
Accessibility Matters
Proper contrast, alt text, and screen-reader labels made the tool more inclusive for everyone.
-
End-to-End Ownership
Leading from research → testing → dev handoff built confidence in managing full UX cycles.
06
Design Brief
Goals
Make financial literacy accessible, engaging, and culturally relevant for newcomers.
Target Audience
International students and first-time Canadian residents navigating a new financial system.
UI Rationale
- Layout
- Clear card-based modules with breadcrumbs for navigation.
- Typography
- Large, legible sans-serif—friendly yet professional.
- Color
-
Purple / Green / Teal for trust + playfulness.
Accessibility
- Alt text & ARIA labels throughout
- AODA color-contrast compliance
- Tested across Chrome, Edge, Firefox, Brave
07
Research & Graphics
User Persona for the financial literacy tool
Research
User Flow
How users navigate through Karla Learn from first visit to core features.
Entry Point
Screen
Decision
Action
Destination
New User Journey
New User
→
Landing Page
→
Take Survey?
Yes
Personality Survey
↓
Mascot Reveal
↓
Create Account?
↓
Sign Up
↓
Home (Logged In)
Skip
Browse Courses
↓
Course Page
↓
View Content
Returning User
Returning User
→
Login
→
Authenticate
→
Home (Logged In)
Core Features
Learning
Browse Courses
↓
Course Page
↓
Complete Lessons
↓
Quiz Results
Profile
My Profile
↓
View Mascot
↓
Track Progress
↓
Edit Settings
Social
Friends Page
↓
Friend Profile
↓
View Progress
↓
Add Friends
Retake Survey
Retake CTA
↓
Survey
↓
New Result
↓
Update Profile
08
Final Designs
