UX/UI Design
Full Stack Development
FUNDamentals
FUNDamentals is a fun and easy-to-use web app that helps young adults learn about finances (budgeting, savings, investing etc.) by playing mini-games, trying real-life scenarios, and completing quick lessons.
***Still Under Construction***
Create an account and try it out! Otherwise, use:
Username: Callum
Password: test
UX/UI Designer, Full Stack Development
Figma, FigJam, Google Forms, Illustrator, VSCode
Final Project (University of Edinburgh, MSc Design & Digital Media)
The Challenge
Many young adults lack confidence in their financial literacy, especially when it comes to taxes, investing, and budgeting. The financial education space is cluttered with overly complex tools and uninspiring content, leaving users overwhelmed, unengaged, or unsure where to start.
The Solution
FUNDamentals is a modular, gamified financial literacy platform that teaches budgeting, debt, savings, investing, and taxes through interactive tools, short simulations, and challenges. The platform is designed to be jargon-free, easy to use, and motivating—especially for users who feel intimidated or bored by traditional finance apps.
User Research
Target Audience: Ages 18–30
Methods Used:
• Online survey (n=47)
• Competitive analysis
• Persona and journey mapping
• Pain point analysis
Quantitative Insights
• 89% would likely use a gamified financial learning app
• 70% feel least confident about investing
• 62% feel least confident about taxes
• 55% already track finances but often manually
• 66% prefer desktop for financial tasks
→ Suggests the need for simplified, gamified learning and a cross-platform UI
Qualitative Themes
• Users want less jargon and more clarity
• Need motivation and reminders to keep up habits
• Overwhelmed by tools that dump too much info at once
→ Design should be modular, visual, and progress-based
Competitive Analysis
I ran a SWOT analysis across four key competitors:
You Need A Budget, GoHenry, Banzai, NatWest Thrive
Key takeaways:
• Many tools lack gamification
• Most apps are targeted at either kids or advanced adults—few are built for students/young professionals
• Opportunities exist in simplifying learning and making tracking feel “light” and approachable
User Personas
I created four diverse personas to reflect different types of young users who struggle with financial confidence. Each one embodies unique goals, frustrations, and use cases.
1. Emily – "The Anxious Student"
Age 19 | Undergraduate | Edinburgh, UK
Nervous about money and often overwhelmed by jargon. Seeks apps that “speak her language” and help her build confidence one step at a time.
2. Jay – "The Hustling Grad"
Age 24 | Entry-level job | Manchester, UK
Juggling side gigs and student debt while trying to build savings. Motivated by progress tracking and quick wins but needs things to stay simple and jargon-free.
3. Sasha – "The Crypto Curious"
Age 28 | Freelance designer | Glasgow, UK
Creative and independent. Interested in investing, side income, and taxes, but turned off by dense terminology and traditional finance UI.
4. Marcus – "The Reluctant Saver"
Age 27 | Retail assistant | Leeds, UK
Doesn’t actively manage money unless he has to. Needs encouragement and bite-sized features to build habits gradually.
Empathy Maps
These maps helped me center the emotional and cognitive states of my users:
Common Themes:
Says:
• “I wish they taught this in school.”
• “I don’t know what to invest in.”
• “Money apps are confusing or boring.”
Thinks:
• “What if I mess up my finances early?”
• “Do I need a financial advisor to understand this?”
• “I want to feel in control.”
Feels:
• Intimidated by jargon
• Curious but cautious
• Motivated by rewards and visible progress
Does:
• Scrolls TikTok/YouTube for relatable finance content
• Tries budgeting apps but often abandons them
• Plays games and responds to goal tracking systems
User Journey Maps
Each persona follows a unique learning path in FUNDamentals, from hesitant onboarding to sustained engagement:
Emily – The Anxious Student
Starts unsure but becomes more comfortable through simplified language and visual guidance.
What can I do? Offer friendly onboarding, encourage small wins.
Jay – The Hustling Grad
Skeptical at first, then values the structure and clarity FUNDamentals provides.
What can I do?Tailor simulations for early-career stages and reduce jargon.
Sasha – The Crypto Curious
Seeks flexible, non-patronizing tools to explore investing and freelance finances.
What can I do? Add explainers, story-based examples, and crypto-lite modules.
Marcus – The Reluctant Saver
Needs external motivation and clear value before adopting routines.
What can I do? Use nudges, visual goal tracking, and friendly tone.
UX Goals
Help users feel confident navigating financial topics
Support daily financial habits through simple tools
Make learning interactive, modular, and step-by-step
Gamify the experience with rewards, streaks, and reminders
Personalize content based on user goals and behavior
User Flow
I designed the Information Architecture and User Flow to guide users from onboarding → goal selection → learning modules → simulations → progress tracking. Each tool and module is built to be:
• Lightweight and intuitive
• Interactive and explanatory
• Modular and motivational
Low Fidelity Wireframes
I began with low-fidelity wireframes to map out the core user flows—onboarding, dashboard, modules, simulations and vocabulary sections. These helped me focus on usability and hierarchy without getting distracted by visuals.
Mid Fidelity Wireframes
Next, I created mid-fidelity wireframes in Figma to refine structure and layout. I introduced modular components, simple navigation, and user-friendly prompts tailored to my three personas. Feedback at this stage led me to streamline interactions, merge screens, and adjust button placement for accessibility.
High Fidelity Prototype
I began with low-fidelity wireframes to establish layout and flow, followed by mid-fi and full-colour prototypes that reflect brand direction—vibrant, energetic, yet clean. The UI balances friendly visual cues with structured content, avoiding overwhelming information while guiding the user through clear steps.
Next steps?
• Conduct moderated user testing with clickable Figma prototypes
• Evaluate usability and feature comprehension
• Iterate on UI and UX based on user feedback
• Begin front-end development of the platform (HTML, CSS, JS only)
• Test early builds for functionality, responsiveness, and clarity
• Refine interactions, visuals, and content delivery based on test findings