BudgetBuddy
UI/UX Designer
budgetbuddy mockup

In under 13 weeks, our incredible team of 4 developers and 4 developers built this web application "BudgetBuddy", a B2B2C financial-tech web app that helps users effortlessly track, manage expenses, and achieve financial goals for not only users but also financial institutions. We presented to the public and gain positive feedback from the judges at Langara College.

Designers: Luis Baptista, Kyril Louis Evangelista, Saharat Akaradechawut(me), Darshjot Kaur Sohi
Developers: Diego Almeida, Mateo Buitrago, Shunsaku Sugita, Yohei Tarutani

Problem:

Managing personal finances brings stress, which can lead to major mental health issues such as anxiety, depression, and even suicide. According to the American Psychological Association, about 72% of adults experience financial stress. This stress can lead to poor financial decisions, increased debt, and financial instability.

Solution:

To address this, we aim to create a versatile financial management app that helps users track expenses, set shared financial goals, and gain insights to manage spending and savings.

The app will also include educational content on financial management to help users lower debt risks and make better decisions, reducing financial stress. Moreover, financial institutions frequently struggle to assess risk and provide personalized solutions because they rely too heavily on credit bureau data, which may not fully reflect a person's current circumstances, resulting in misaligned products and financial distress.

Features:
expenses
Track Expenses

Effortlessly track your expenses on-the-go so you can manage them effectively.

budget
Budget Management

Effectively manage your budget and expenses and get proper insights.

goal
Goal Management

Easily set up, manage and achieve your financial goals.

Personas:
Name:
Hiroshi
Occupation:
Relationship Manager
Age:
45
Background:

Hiroshi Nakamura has over 10 years of banking experience in Japan and additional experience as a finance manager before relocating to Canada. Currently, he serves as a Corporate Relationship Manager, focusing on SMEs and mid-sized companies. His daily routine includes contacting corporate customers, providing financial advice, and ensuring client satisfaction.

Goals:
  • Ensure customer satisfaction and facilitate loan approvals.
  • Deliver clear and accurate financial advice.
  • Strengthen and expand the corporate client base.
  • Challenges:
  • Difficulty in explaining complex financial concepts to clients.
  • Inconsistent documentation from customers.
  • Providing accurate advice despite incomplete data.
  • Behavior Consideration:

    Hiroshi provides top-notch service with personalized financial advice and solutions. He overcomes challenges like inconsistent documentation and complex concepts with patience and focus. By offering incentives like lower interest rates, he adds value and maintains client relationships through his meticulous approach.

    Name:
    Mariana
    Occupation:
    Digital Marketing Agency
    Age:
    41
    Background:

    Mariana is a driven and successful CEO managing her own digital marketing agency. Her day starts early, juggling the responsibilities of getting her 11-year-old ready for school and caring for her 1-yearold. Balancing work and motherhood, Mariana primarily works from home but frequently steps out for client meetings. She has household help, which allows her to focus on work when necessary.

    Goals:
  • Aims to streamline her financial management, clearly separating business and personal expenses.
  • Desires to learn effective budgeting and saving strategies.
  • Motivated to provide a stable financial future for her children and grow her business efficiently.
  • Challenges:
  • Struggles to keep business and personal finances separate, leading to disorganization and stress.
  • Feels overwhelmed managing finances alone without structured tools.
  • Behavior Consideration:

    Highly motivated and task-oriented, Mariana often gets bogged down by the complexities of financial management. She prefers simple, user-friendly financial tools that integrate seamlessly into her busy routine and is likely to respond well to solutions that offer clear, actionable insights with minimal setup andmaintenance.

    User Flow:
    User Flow FigmaBudgetBuddy - UserFlow
    Dashboard
    dashboard

    The dashboard provides a comprehensive overview of essential financial data, giving users a clear understanding of their financial status. It provides in-depth insights into their financial goals, an effectively organized budget, and an accurate comparison of expenses across different months. Additionally, the dashboard features a transaction list that allows users to track their spending habits. By presenting this information in an intuitive and accessible format, the dashboard empowers users to monitor their financial health effectively, offering valuable insights to help them make financial decisions effectively and stay on track with their financial objectives.

    Create/Edit Transaction
    create transaction

    The transaction creation and editing feature provides users with a streamlined form to input and manage all types of financial activities. This tool allows users to easily track expenses, make debt payments, achieve financial goals, and record income. By offering a versatile and user-friendly interface, this feature ensures that users can accurately monitor their financial activities, helping them stay organized and informed about their financial progress.

    Transaction lists
    transaction lists

    The transaction list offers a comprehensive view of all income and expense categories, organized in a detailed data table. Users can filter transactions by time period or specific categories, making it easy to focus on relevant data. Additionally, the table provides options to edit or remove any transaction, ensuring users have complete control over managing and updating their financial records efficiently.

    Budget Management
    budgetmanage

    Users can efficiently manage their budgets by categorizing them into goals, income, budgets, and debts. This organized approach users to easily track and monitor their financial activities, providing a clear overview of their financial situation and helping them stay on top of their financial goals.

    Financial Products
    financial product

    The financial products are personalized for each user, offering tailored options that align with their individual needs and preferences. This customization allows users to select products that best match their financial goals and circumstances, ensuring a more relevant and effective financial planning experience.

    Branding
    Typography:

    This set of typeface were chosen to convey the sense of professionalism and modernism of a financial tech-based web app. This combination of sans serif fonts ensures that it is readable and accessible for any type of user, and aims to lessen any possible legibility issues.

    Geologica (Title)
    Bold - ABCDEFGHIJKLMNOPQRSTUXYZ
    Medium - abcdefghijklmnopqrstuvwxyz
    Regular - 0123456789/=-()*&%$#@!
    DM Sans (Body)
    Bold - ABCDEFGHIJKLMNOPQRSTUXYZ
    Medium - abcdefghijklmnopqrstuvwxyz
    Regular - 0123456789/=-()*&%$#@!
    Colors:

    This color palette aims to convey the sense of professionalism and minimalism of a financial tech-based website, but also aims to also convey to the user that it is a platform that will help you in managing your finances and expenses.

    Primary

    #001E30

    Secondary

    #465337

    Tertiary

    #4B71AA

    Neutral

    #F4F2F3

    Iconography:

    A custom set of iconography was made for BudgetBuddy to provide more context and additional information when navigating the web app. These icons, when used in BudgetBuddy, are often accompanied with texts to highlight accessibility for every user. Maintaining a simple look to BudgetBuddy’s icons are a priority to the designers as we would like to avoid confusion when our users are navigating throughout their finances and goals.

    grid-view line-chart calendar bar-chart edit edit pie-chart setting setting mail currency-dollar x-close filter list-view visible invisible home goal expense budget debt income security profile lock chevron-up chevron-down chevron-left chevron-right lock clock log-in log-out
    UI Components
    Future Improvement
    transaction lists
    The transaction list screen:
    • Rearrange the input fields and buttons into a single column layout for mobile screens, utilizing the full width to enhance usability.
    • Remove the background from each row to create a more modern and streamlined table design.
    • Add a border radius for the table to ensure consistent design language across all components.
    • Change the color from blue to green to more effectively symbolize income, aligning with financial color conventions.
    Back to the top