The Financier budgeting app was designed to help college students manage expenses, set goals, and track income with tailored features based on user research. It includes goal setting, transaction tracking, analytics, a built-in calculator, and categorized money-saving tips—all built with a responsive and intuitive UI.
College students often face the challenge of budgeting without a steady income, especially during the school year. Many budgeting apps assume regular income streams, making it difficult for students who rely on savings or sporadic transfers. A common desire is a simple, low-cost tool that tracks spending while accommodating student-specific needs like meal planning and flexible financial goals. Without tools that reflect their unique situations, students struggle to stay on budget and miss out on opportunities like goal-based saving.
This was a solo project completed as part of an independent study capstone. I conducted all user research, designed the interface in Figma, and developed the web application using HTML, CSS, and JavaScript. Responsibilities included designing and executing interviews, analyzing student budgeting needs, designing and prototyping a mockup, and building a responsive and fully functional web app from the ground up.
Outline Page 1: Project Description, Learning Objectives, Learning Outcomes
Outline Page 2: Learning Outcomes cont., Deliverables
Outline Page 3: Deliverables Timeline, Research Plan
To create a product just for students, I assessed existing budgeting solutions in the market
MoneyHelper
Voya
iGrad
- MoneyHelper: Comprehensive budget planning with income tracking and categorized expenses
- Voya: Simple 50/30/20 budgeting approach with personalized monthly budgeting
- iGrad: Detailed expense categories and saving goals specifically designed for students
- MoneyHelper: Limited student-specific features and complex interface for beginners
- Voya: Generic budgeting approach not tailored for student income patterns
- iGrad: Overwhelming number of categories without clear prioritization for students
General Focus: Identifying key student expenses, how meal plans and job status shape budgeting, and common discretionary spending patterns.
Other potential questions:
Visualizing key findings from user interviews
User Research Overview – Spring 2025
Set financial goals, track expenses and income, and view weekly and monthly analytics
Cutting out any onboarding fluff, users can immediately get started creating unique financial goals they can track and complete on their own time.
Track expenses and income on an individual basis as well as meal plans and deductions.
View a visually simple, yet clean, dashboard that compiles tracked financial data and allows exporting and importing CSV files.
This landing page welcomes users with an overview of Financier's core features. Nearly all icons in this application are taken from the SF Symbols library to ensure stylistic consistency and a clean, native Apple-inspired aesthetic.
On this page, users create and track financial goals and explore organized categories of their choice.
Here, users log income and expenses, assign categories, and plan out their meals.
This section visualizes financial data with dynamic bar and pie charts. Green segments indicate healthy savings or income, and red segments flag overspending or budget breaches. Users can toggle between weekly and monthly views to track trends and spot areas for improvement. A CSV export button in the top right lets users download their data for external analysis, and a CSV import option lets users restore or load data back into the app.
A built-in calculator helps perform quick financial calculations and keeps a history log. The SF Mono typeface ensures aligned, easy-to-read digits and complements the SF Symbols icon set used throughout for a consistent, clean visual language.
Curated money-saving tips by category—Textbooks (light navy for trust and learning), Food & Dining (orange for energy and appetite), Shopping Smart (green for growth), Finance (gold for value), Transportation (teal for clarity), Housing & Utilities (reddish-orange for warmth), Health & Wellness (pink for care), Entertainment (purple for creativity)—each color symbolizes its theme and guides students to the right advice.
Financier: Interactive Budgeting App Mockup in Figma
Creating the prototype allowed me to translate user research insights into a tangible, interactive experience. The design process involved multiple iterations to refine key features like goal setting, transaction tracking, and financial analytics. The prototype validated core design decisions and demonstrated the complete user journey from onboarding to data visualization. This process helped establish a solid foundation for development by clarifying functionality and ensuring all features aligned with the specific needs of student users.
Financier was a comprehensive end-to-end project from concept through user research, design, and development. I conducted interviews with 10 college students, analyzed their budgeting challenges, and translated those insights into a functional application using HTML, CSS, and JavaScript. AI-assisted development tools helped accelerate my coding workflow.
The project reinforced the importance of user-centered design and gave me a holistic understanding of how research, design, and development work together to create effective solutions for real user needs.
I developed Magnate as an evolved version of Financier with enhanced features and a refined user experience. Key improvements in Magnate include replacing the meal plan section with a new Transaction Groups feature, adding a new notes section with markdown support via EasyMDE CDN integration, and improving WCAG compliance across the site. This spinoff project represents my continued exploration of personal finance applications and my growth as a designer and developer.