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.
iGrad: Budget Tool
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
General Focus: Identifying key student expenses, how meal plans and job status shape budgeting, and common discretionary spending patterns.
Other potential questions:
User Research Overview – Spring 2025
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 into a tangible, interactive experience. It helped validate design decisions, demonstrate the flow of key features like goal setting and transaction tracking, and ensure the interface was intuitive for college students. The prototype served as a proof of concept that guided development and clarified the user journey.
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.
Explore Magnate →
Building Financier taught me how to go from idea to execution—from user research and interface design to front-end development. I conducted interviews, identified key insights, prototyped in Figma, and brought it all together into a responsive budgeting app. This hands-on process helped me understand how to turn user needs into practical features and deepen my skills across the entire UX pipeline.