BUDGETWISE

BUDGETWISE

BUDGETWISE

Mockup of the app
Mockup of the app
Mockup of the app

July - September 2023

FinTech, B2C, mobile app

UI/UX Designer

The Case Study in a Mighty Bento

The Case Study in a Mighty Bento

Because not everybody has time to read through the whole thing... Here’s the project in a bento.

Because not everybody has time to read through the whole thing... Here’s the project in a bento.

The Solution

AI integration

By leveraging AI, we've empowered the app to automatically analyze spending behaviors, offer personalized insights, and provide a chatbot to serve as your financial companion.

The Solution

AI integration

By leveraging AI, we've empowered the app to automatically analyze spending behaviors, offer personalized insights, and provide a chatbot to serve as your financial companion.

The Solution

AI integration

By leveraging AI, we've empowered the app to automatically analyze spending behaviors, offer personalized insights, and provide a chatbot to serve as your financial companion.

Starting Point

Talk of the Town: AI

Talk of the Town: AI

Talk of the Town: AI

The recent rise of AI has been taking the tech industry by storm, with AI integration now standing as a force to reshape the digital landscape. This evokes a great deal of brainstorming on how AI would help users better experience our product, Budgetwise—a budgeting app.

The recent rise of AI has been taking the tech industry by storm, with AI integration now standing as a force to reshape the digital landscape. This evokes a great deal of brainstorming on how AI would help users better experience our product, Budgetwise—a budgeting app.

Identifying the challenge

Identifying the challenge

Identifying the challenge

Challenge

How Will AI Help

How Will AI Help

How Will AI Help

The challenge now is to know what users need and how to incorporate AI to easily and more efficiently solve the problem.

The challenge now is to know what users need and how to incorporate AI to easily and more efficiently solve the problem.

Conducting research

Conducting research

Conducting research

Explore

AI and FinTech

AI and FinTech

AI and FinTech

Although AI is still gaining mixed reactions from consumers and industry leaders, various financial institutions have been exploring how generative AI would be able to help consumers in managing their finances. In an article released by PwC, it was shown that AI in financial services received an AI impact score of 3.3 (5 being the highest impact). This means that there's a high potential use case for financial services, especially in personalized financial planning (PwC, 2023).

Although AI is still gaining mixed reactions from consumers and industry leaders, various financial institutions have been exploring how generative AI would be able to help consumers in managing their finances. In an article released by PwC, it was shown that AI in financial services received an AI impact score of 3.3 (5 being the highest impact). This means that there's a high potential use case for financial services, especially in personalized financial planning (PwC, 2023).

In a survey conducted by our UX researchers on nearly 900 potential consumers of Budgetwise, they concluded that our users are looking for a comprehensive app that offers customization, integration, financial insights, and user-friendly features to effectively manage their finances.

In a survey conducted by our UX researchers on nearly 900 potential consumers of Budgetwise, they concluded that our users are looking for a comprehensive app that offers customization, integration, financial insights, and user-friendly features to effectively manage their finances.

Analysis and planning

Analysis and planning

Analysis and planning

User

Let Your Users Be Known

Let Your Users Be Known

Let Your Users Be Known

After gaining insights on user needs and behavior towards financial apps based on literary research and user research done by the researchers, the next step is to identify the users, define the pain points, and plot the user flow.

Budgeting Apps Mishaps

Budgeting Apps Mishaps

The following user pain points serves as a foundation for the design decisions for this feature:

User

Limited Customization

Limited Customization

Users seek personalized insights and recommendations specific to their financial habits, goals, and lifestyles.

User

Technical Gap in Integration

Technical Gap in Integration

Users are open to adopting technologies that improve user experiences, or offer innovative solutions, provided these align with their goals and interests.

User

Usability Challenges

Usability Challenges

Users value technologies that prioritize usability, minimize friction points, and enhance the overall usability of the app, contributing to a seamless and efficient user journey.

User

Limited Customization

Users seek personalized insights and recommendations specific to their financial habits, goals, and lifestyles.

User

Technical Gap in Integration

Users are open to adopting technologies that improve user experiences, or offer innovative solutions, provided these align with their goals and interests.

User

Usability Challenges

Users value technologies that prioritize usability, minimize friction points, and enhance the overall usability of the app, contributing to a seamless and efficient user journey.

User Personas

User Personas

User Personas

Among our diverse user base, I explore the lives and needs of two personas—Joshua and Minnie.

User

Joshua, 32

Joshua is a marketing professional who navigates life with a meticulous eye on his budget, aiming to achieve both short-term goals and long-term aspirations.

Joshua's Needs: Joshua values a budgeting app that not only tracks his expenses but also provides personalized insights.

Crafting Solutions: To create an efficient app experience for individuals seeking financial empowerment and informed decision-making.

User

Minnie, 23

Minnie is a recent graduate starting her first job as a software developer. She is embracing the transition from student life to financial autonomy.

Minnie's Needs: Minnie wants an app that offers intuitive features and easy-to-understand visualizations.

Crafting Solutions: To provide educational content and tips towards financial awareness, which will empower beginners like Emily to navigate their finances with ease.

User

Joshua, 32

Joshua is a marketing professional who navigates life with a meticulous eye on his budget, aiming to achieve both short-term goals and long-term aspirations.

Joshua's Needs: Joshua values a budgeting app that not only tracks his expenses but also provides personalized insights.

Crafting Solutions: To create an efficient app experience for individuals seeking financial empowerment and informed decision-making.

User

Minnie, 23

Minnie is a recent graduate starting her first job as a software developer. She is embracing the transition from student life to financial autonomy.

Minnie's Needs: Minnie wants an app that offers intuitive features and easy-to-understand visualizations.

Crafting Solutions: To provide educational content and tips towards financial awareness, which will empower beginners like Emily to navigate their finances with ease.

User Flow

User Flow

The user flow was mapped out to understand and identify the steps and how the AI integration will be incorporated within the app.

Shows the user flow and how AI will be intergrated in the app
Shows the user flow and how AI will be intergrated in the app
Shows the user flow and how AI will be intergrated in the app

Design

Design

Design

User
User

From Insight to Ideation

From Insight to Ideation

From Insight to Ideation

After the foundation has been laid out and all important insights have been realized, I began brainstorming and coming up with creative solutions for the problem.

Sketches

Sketches

Sketches

I listed down ideas and approaches to solve the problem. My goal was sketch out the layout for the new features of the app and make sure the flow is cohesive and efficient.

Sketch for the AI chatbot feature
Sketch for the AI chatbot feature
Sketch for the AI insights on the homescreen
Sketch for the AI insights on the homescreen
Sketch for the AI insights in full screen
Sketch for the AI insights in full screen
Sketch for the AI chatbot feature
Sketch for the AI insights on the homescreen
Sketch for the AI insights in full screen

High-fidelity wireframes

High-fidelity wireframes

High-fidelity wireframes

I worked on adding and incorporating AI elements to our existing designs.

MoneyBot (AI Chatbot)

High-fidelity wireframe of the AI chatbot
High-fidelity wireframe of the AI chatbot

Insights Card

High-fidelity wireframe of the insight card
High-fidelity wireframe of the insight card

Insights on Full Screen

High-fidelity wireframe of AI chatbot feature
High-fidelity wireframe of AI chatbot feature

MoneyBot (AI Chatbot)

High-fidelity wireframe of the AI chatbot

Insights Card

High-fidelity wireframe of the insight card

Insights on Full Screen

High-fidelity wireframe of AI chatbot feature

AI-powered Budgeting App

AI-powered Budgeting App

AI-powered Budgeting App

With the user personas in mind, the following design solutions are crafted to integrate AI into the app:

Limited Customization

Limited Customization

SOLUTION

Personalized insights and alerts

Personalized insights and alerts

This solution centered around providing personalized insights and alerts using AI. This solution is seen through an AI-generated insight card prominently displayed on the Home screen. This card offers users tailored insights and recommendations based on their budgeting habits.


How it will help Joshua: Joshua receives personalized financial insights and recommendations. This helps Joshua make informed financial decisions and stay on track with his goals.

This solution centered around providing personalized insights and alerts using AI. This solution is seen through an AI-generated insight card prominently displayed on the Home screen. This card offers users tailored insights and recommendations based on their budgeting habits.


How it will help Joshua: Joshua receives personalized financial insights and recommendations. This helps Joshua make informed financial decisions and stay on track with his goals.

Limited Customization

SOLUTION

Personalized insights and alerts

This solution centered around providing personalized insights and alerts using AI. This solution is seen through an AI-generated insight card prominently displayed on the Home screen. This card offers users tailored insights and recommendations based on their budgeting habits.


How it will help Joshua: Joshua receives personalized financial insights and recommendations. This helps Joshua make informed financial decisions and stay on track with his goals.

Technical Gap in Integration

Technical Gap in Integration

SOLUTION

AI chatbot (MoneyBot)

AI chatbot (MoneyBot)

For users looking for technology that will help them in their financial goals, I've designed MoneyBot, an AI chatbot that serves as a personalized guide throughout the user's financial journey. By leveraging AI technology, this chatbot provides tailored support as it offer insights, guidance, and advices to users looking to more effectively manage their finances.


How it will help Joshua and Minnie: Joshua and Minnie use MoneyBot as a personalized guide to help them achieve their financial goals.

For users looking for technology that will help them in their financial goals, I've designed MoneyBot, an AI chatbot that serves as a personalized guide throughout the user's financial journey. By leveraging AI technology, this chatbot provides tailored support as it offer insights, guidance, and advices to users looking to more effectively manage their finances.


How it will help Joshua and Minnie: Joshua and Minnie use MoneyBot as a personalized guide to help them achieve their financial goals.

Technical Gap in Integration

SOLUTION

AI chatbot (MoneyBot)

For users looking for technology that will help them in their financial goals, I've designed MoneyBot, an AI chatbot that serves as a personalized guide throughout the user's financial journey. By leveraging AI technology, this chatbot provides tailored support as it offer insights, guidance, and advices to users looking to more effectively manage their finances.


How it will help Joshua and Minnie: Joshua and Minnie use MoneyBot as a personalized guide to help them achieve their financial goals.

Usability Challenges

Usability Challenges

SOLUTION

Accessible AI features

Accessible AI features

To ensure the new AI features are user-friendly, these are strategically placed to make it accessible to users. This includes MoneyBot being accessible from Home page, the insight card readily available on the Home page, and AI-generated alerts.


How it will help Minnie: Minnie can easily access personalized insights and MoneyBot, helping her stay informed about her finances and enhancing her overall user experience.

To ensure the new AI features are user-friendly, these are strategically placed to make it accessible to users. This includes MoneyBot being accessible from Home page, the insight card readily available on the Home page, and AI-generated alerts.


How it will help Minnie: Minnie can easily access personalized insights and MoneyBot, helping her stay informed about her finances and enhancing her overall user experience.

Usability Challenges

SOLUTION

Accessible AI features

To ensure the new AI features are user-friendly, these are strategically placed to make it accessible to users. This includes MoneyBot being accessible from Home page, the insight card readily available on the Home page, and AI-generated alerts.


How it will help Minnie: Minnie can easily access personalized insights and MoneyBot, helping her stay informed about her finances and enhancing her overall user experience.

Reimagine your finances.

View gallery

Reimagine your finances.

View gallery

Process

The Design Refined

The designs underwent multiple iterations based on invaluable feedback from our UX researchers and fellow designers. They meticulously evaluated and addressed issues regarding usability and design hierarchy, which was extremely instrumental in refining the user experience for this feature.

The designs underwent multiple iterations based on invaluable feedback from our UX researchers and fellow designers. They meticulously evaluated and addressed issues regarding usability and design hierarchy, which was extremely instrumental in refining the user experience for this feature.

Starting Point

Adapting to New Technologies

Adapting to New Technologies

Adapting to New Technologies

Designing the AI feature for Budgetwise has been an eye-opening experience. It made me realize the endless capabilities of technology and how, as designers, we must learn to adapt to new technological advancements and understand how these would impact consumers.

Above all, ensuring the AI features aligned with users' needs and making sure the feature was user-friendly was of utmost importance, something that should be prioritized when designing.

Designing the AI feature for Budgetwise has been an eye-opening experience. It made me realize the endless capabilities of technology and how, as designers, we must learn to adapt to new technological advancements and understand how these would impact consumers.

Above all, ensuring the AI features aligned with users' needs and making sure the feature was user-friendly was of utmost importance, something that should be prioritized when designing.