UX/UI/WEB APP

UX/UI/WEB APP

I-Flex

I-Flex

Goal

Goal

Helping users with irregular incomes save, budget, and plan using AI

Solution

Solution

Designed a web app with more focus on people with irregular income with features like AI-driven savings rules, forecasting, and spending insights

Time period

Time period

4 Weeks

Design process

Design process

Quantitative Research, User Personas, User journeys Wireframing

Tools used

Generative AI, Notebook LM, Bolt for rapid prototyping, Chat GPT, Figma, Google forms

1.Inspiration

As a freelancer, I experienced firsthand the anxiety of managing unpredictable income. One month, I’d earn enough to cover bills and save a little; the next, I’d scramble to make ends meet. What struck me most was how common this struggle was. Over coffee with friends—fellow freelancers, gig workers, and small business owners—we’d often share stories like:

“I made 4,000this month and maybe 1,200-2000 next month… How do I even plan?”
“I want to save for our trip and emergencies, but I’m terrified I’ll accidentally spend that money.”

When I researched existing tools, I found most apps and banks assume stable paychecks. This made me think “Why isn’t there a tool that works with irregular income, not against it?”

I wanted to design a solution that

As a freelancer, I experienced firsthand the anxiety of managing unpredictable income. One month, I’d earn enough to cover bills and save a little; the next, I’d scramble to make ends meet. What struck me most was how common this struggle was. Over coffee with friends—fellow freelancers, gig workers, and small business owners—we’d often share stories like:

“I made 4,000this month and maybe 1,200-2000 next month… How do I even plan?”
“I want to save for our trip and emergencies, but I’m terrified I’ll accidentally spend that money.”

When I researched existing tools, I found most apps and banks assume stable paychecks. This made me think “Why isn’t there a tool that works with irregular income, not against it?”

I wanted to design a solution that

As a freelancer, I experienced firsthand the anxiety of managing unpredictable income. One month, I’d earn enough to cover bills and save a little; the next, I’d scramble to make ends meet. What struck me most was how common this struggle was. Over coffee with friends—fellow freelancers, gig workers, and small business owners—we’d often share stories like:

“I made 4,000this month and maybe 1,200-2000 next month… How do I even plan?”
“I want to save for our trip and emergencies, but I’m terrified I’ll accidentally spend that money.”

When I researched existing tools, I found most apps and banks assume stable paychecks. This made me think “Why isn’t there a tool that works with irregular income, not against it?”

I wanted to design a solution that

2. Research & Discovery

Research

For this project, I employed both primary and secondary research methods. In my primary research, I distributed a survey via Google Forms to uncover the specific pain points of users managing irregular income and to gauge how widespread these issues are. Although I received responses from 15 participants—a sample size that is modest—it provided valuable insights that helped shape my design direction.

For my secondary research, I explored various YouTube videos and articles focusing on irregular income management and savings strategies. This additional research enriched my understanding of the broader context and further validated the findings from my primary research.




Competitor analysis
Mainstream Budgeting Apps (e.g., Mint, YNAB, Personal Capital):
I found out that there are apps focused on savings but these tools tend to assume a steady, predictable income. They typically set up budgets around fixed monthly earnings. For freelancers and gig workers, this often means:


  • Rigid Budget Structures: Users are penalized or “scolded” for overspending in lean months, without the flexibility to adjust for income fluctuations.


  • Manual Adjustments: They require constant tweaking to accommodate the unpredictable nature of irregular income, which can add to financial anxiety rather than alleviate it making it a frustrating experience for the users.


  • Lack of Emotional Support: The focus is primarily on numbers rather than understanding the emotional toll of financial instability without focusing on empowering them.


  • Specialized Apps for Freelancers:
    While there are some tools aimed at freelancers, many still fall short by not fully addressing the irregularity in income. They may offer some features like income tracking or invoicing but often don’t integrate flexible savings automation that adapts to unpredictable cash flow.

Research

For this project, I employed both primary and secondary research methods. In my primary research, I distributed a survey via Google Forms to uncover the specific pain points of users managing irregular income and to gauge how widespread these issues are. Although I received responses from 15 participants—a sample size that is modest—it provided valuable insights that helped shape my design direction.

For my secondary research, I explored various YouTube videos and articles focusing on irregular income management and savings strategies. This additional research enriched my understanding of the broader context and further validated the findings from my primary research.




Competitor analysis
Mainstream Budgeting Apps (e.g., Mint, YNAB, Personal Capital):
I found out that there are apps focused on savings but these tools tend to assume a steady, predictable income. They typically set up budgets around fixed monthly earnings. For freelancers and gig workers, this often means:


  • Rigid Budget Structures: Users are penalized or “scolded” for overspending in lean months, without the flexibility to adjust for income fluctuations.


  • Manual Adjustments: They require constant tweaking to accommodate the unpredictable nature of irregular income, which can add to financial anxiety rather than alleviate it making it a frustrating experience for the users.


  • Lack of Emotional Support: The focus is primarily on numbers rather than understanding the emotional toll of financial instability without focusing on empowering them.


  • Specialized Apps for Freelancers:
    While there are some tools aimed at freelancers, many still fall short by not fully addressing the irregularity in income. They may offer some features like income tracking or invoicing but often don’t integrate flexible savings automation that adapts to unpredictable cash flow.

3. Defining the Problem & Creating a PRD

Problem Statement

  • Identified core challenges such as unpredictable incomes, difficulty in establishing flexible savings rules, and the challenges of forecasting cash flow.

  • Focused on understanding how these issues impact users and create financial stress, guiding the direction of the project.

PRD Generation Using AI

  • Leveraging AI: I used Notebook LM to generate an initial Product Requirements Document (PRD), which provided a structured starting point.

  • Iterative Refinement: I combined the AI-generated content with insights from my research, iteratively refining the PRD to ensure it accurately addressed user pain points.

Drawing from the key takeaways, several core MVP features were identified

  • Automated Savings: Automatically adjusts savings based on fluctuations in income, ensuring users can save even in lean months.

  • Personalized Budgeting: Offers customized budgeting tools that adapt to individual financial behaviors and irregular income patterns.

  • Spending Insights: Provides clear, actionable insights into spending habits using AI, helping users identify potential areas for improvement using AI

  • Cash Flow Forecasting: Predicts future income trends using AI, enabling proactive financial planning and more effective cash management.

4. User Flows & Journey Mapping

My primary objective was to tackle the core savings challenge, which led me to develop two distinct user journeys to guide my design focus.
My primary objective was to tackle the core savings challenge, which led me to develop two distinct user journeys to guide my design focus
My primary objective was to tackle the core savings challenge, which led me to develop two distinct user journeys to guide my design focus

User Flow 1 – Forecasting & Avoiding a Cash Shortfall

  1. Dashboard Overview:
    The user accesses their real-time cash flow dashboard, which displays a forecast based on historical income and spending patterns. Potential shortfall periods are clearly highlighted.

  2. Proactive Alerts & Insights:
    The app alerts the user to upcoming lean months and provides actionable insights—suggesting budget adjustments or a temporary increase in automated savings.

  3. Scenario Simulation:
    The user can experiment with different financial scenarios (e.g., changing spending habits or saving rates) to see how these adjustments impact future cash flow.

  4. Personal Spending Habit Analyzer:
    This feature allows users to manually log their daily expenses while an AI analyzes the data to suggest personalized cost-cutting measures, helping them reach their savings goals faster. It also provides ongoing insight into their spending habits, offering the added benefit of increased financial awareness.

User Flow 1 – Forecasting & Avoiding a Cash Shortfall
  1. Dashboard Overview:
    The user accesses their real-time cash flow dashboard, which displays a forecast based on historical income and spending patterns. Potential shortfall periods are clearly highlighted.
  2. Proactive Alerts & Insights:
    The app alerts the user to upcoming lean months and provides actionable insights—suggesting budget adjustments or a temporary increase in automated savings.
  3. Scenario Simulation:
    The user can experiment with different financial scenarios (e.g., changing spending habits or saving rates) to see how these adjustments impact future cash flow.
  4. Personal Spending Habit Analyzer:
    This feature allows users to manually log their daily expenses while an AI analyzes the data to suggest personalized cost-cutting measures, helping them reach their savings goals faster. It also provides ongoing insight into their spending habits, offering the added benefit of increased financial awareness.
User Flow 1 – Forecasting & Avoiding a Cash Shortfall
  1. Dashboard Overview:
    The user accesses their real-time cash flow dashboard, which displays a forecast based on historical income and spending patterns. Potential shortfall periods are clearly highlighted.
  2. Proactive Alerts & Insights:
    The app alerts the user to upcoming lean months and provides actionable insights—suggesting budget adjustments or a temporary increase in automated savings.
  3. Scenario Simulation:
    The user can experiment with different financial scenarios (e.g., changing spending habits or saving rates) to see how these adjustments impact future cash flow.
  4. Personal Spending Habit Analyzer:
    This feature allows users to manually log their daily expenses while an AI analyzes the data to suggest personalized cost-cutting measures, helping them reach their savings goals faster. It also provides ongoing insight into their spending habits, offering the added benefit of increased financial awareness.

User Flow 2 – Setting Up AI-Driven Savings Rules
  1. Discovery:
    The user logs into the app and is greeted with an overview of their income trends. A brief tutorial introduces the benefits of AI-powered savings automation.

  2. Data Integration & Analysis:
    After granting permission, the app automatically gathers recent income and expense data. Its AI engine analyzes spending patterns to identify optimal moments for saving.

  3. Personalized Recommendations:
    Based on the analysis, the app suggests customized savings rules (for example, automated transfers during high-income days). The user reviews and tweaks these recommendations as needed.

User Flow 2 – Setting Up AI-Driven Savings Rules
  1. Discovery:
    The user logs into the app and is greeted with an overview of their income trends. A brief tutorial introduces the benefits of AI-powered savings automation.

  2. Data Integration & Analysis:
    After granting permission, the app automatically gathers recent income and expense data. Its AI engine analyzes spending patterns to identify optimal moments for saving.

  3. Personalized Recommendations:
    Based on the analysis, the app suggests customized savings rules (for example, automated transfers during high-income days). The user reviews and tweaks these recommendations as needed.

User Flow 2 – Setting Up AI-Driven Savings Rules

  1. Discovery:
    The user logs into the app and is greeted with an overview of their income trends. A brief tutorial introduces the benefits of AI-powered savings automation.

  2. Data Integration & Analysis:
    After granting permission, the app automatically gathers recent income and expense data. Its AI engine analyzes spending patterns to identify optimal moments for saving.

  3. Personalized Recommendations:
    Based on the analysis, the app suggests customized savings rules (for example, automated transfers during high-income days). The user reviews and tweaks these recommendations as needed.

Wireframing

Wireframing

My focus from the beginning was on the user flow-1 and user flow-2 so keeping that in mind I designed the essential wireframes. I made the initial wireframes on paper then made some more on Figma for a better clarity and then jumped directly on Bolt. I also created a mood board based on different design inspirations from various banking and finance related websites using Mobbin.
My focus from the beginning was on the user flow-1 and user flow-2 so keeping that in mind I designed the essential wireframes. I made the initial wireframes on paper then made some more on Figma for a better clarity and then jumped directly on Bolt. I also created a mood board based on different design inspirations from various banking and finance related websites using Mobbin.

Moodboard

Moodboard

changes after usability testing

After working on the site map which I made by conducting usability test and card sorting test I found some problems in my wireframe designs and altered it

final ui design

Prototype

Final UI design

Leveraging insights from competitor analysis, user surveys, and UI audits banking apps, I developed wireframes that addressed user pain points and design gaps. These evolved into high-fidelity, interactive prototypes built in Framer—designed to be tested with real users in the upcoming usability phase to validate key assumptions and refine the experience further.

Personal Pending Habit Analyzer lets you log daily habits and get AI-driven suggestions to cut spending and boost savings.

Budget Breakdown provides important spending insights and distributes the spending habits using AI

reflection

Personal Learnings:
As a fresher UX designer, this project was a pivotal experience that allowed me to blend traditional UX design with cutting-edge AI tools. I learned how to harness tools like Notebook LM for generating a solid PRD and Bolt for rapidly prototyping a working website. The process taught me how to translate complex data into actionable insights for design, ensuring that technology and human-centric design work hand-in-hand. This journey has broadened my skill set and reinforced my belief that designers can—and should—leverage emerging technologies to solve real-life problems.

Business Impact:
By integrating AI-driven features into the design of the financial management web app, the solution has the potential to transform how users with irregular incomes plan their savings. Although this is an MVP, the project demonstrates how digital tools can empower users to make better financial decisions and build confidence in managing unpredictable cash flows.

Thank you for viewing

©2024 All Rights Reserved by Siddharth Gore Design

Create a free website with Framer, the website builder loved by startups, designers and agencies.