Money Matters Made Simple: Say Hello to Your AI Finance Wizard

Published in

Bootcamp

11 min readFeb 9, 2024

Imagine back in the day when people used calculators as their go-to tool for financial calculations. Fast forward to today, and we’re talking about Artificial Intelligence (AI) that’s smarter than ever.

It’s as if you’re moving from learning simple math to becoming a genius in quantum physics! Imagine if AI isn’t just about doing math anymore; what if it acts like a financial expert right in your pocket? With AI-powered personal finance apps, you can make decisions that would impress even the smartest investors.

So, let’s explore how AI could change the finance industry, making it easier to manage your money!

There is this one quote by Sam Altman, that I like

Allow me to guide you on a journey to showcase some demos of my work. Sit back, relax, and scroll through this collection at your leisure. I’ll be here on the other side when you’re ready.

Below, I have shared the entire prototype video of my application,
(Watch it fullscreen, in 4K.)

The entire prototype video.

This project has helped me learn a lot of skill sets in the domain of design. Below, I have shared a few skill sets I have learned during the process of creating this project.
The first skill set is ‘Prototyping’, which includes both internal and external prototyping, with a focus on internal prototyping. Internal prototyping enhanced the user flow of the entire project, making it more efficient and enjoyable for users.

Another valuable lesson would involve maintaining a good contrast ratio in my design, particularly the colour contrast between elements used in the UI screen. According to the Web Content Accessibility Guidelines (WCAG) 2.0, the contrast ratio between text and its background should be at least 4.5:1.

This lesson was my favourite one. I learned how to create perfect spacing harmony between components and variants. I followed the 8-point spacing system, where every spacing, height, and width are multiples of 8. Additionally, the components are multiples of 8.

Before delving into the details, it’s important to address the origin story of the project. Where did this project come from? What problem am I solving? These questions help provide context and understanding.
I received this problem statement from my design boot camp as part of my capstone project. Let me explain the problem statement in detail.

Also, I believe understanding the ‘problem size’ is also important for creating this project.
Below, I have shared the ‘Problem Size’

No design project can progress without having business goals in mind. Therefore, I have shared a few business goals related to the problem statement.

But, you may be wondering why I selected this problem statement. What drove me to choose this problem statement? What did I like about it? Let’s find out below.

There were a few constraints that came to my attention during the process. Let’s see what they were and how I resolved them.

Below are a few examples of the current AI scenes and the technologies that I am talking about.

These are some of the AI technologies available today

I did face another constraint,

Below is the app I mentioned earlier, which served as inspiration for the entire design system.

Let’s delve into the explanation of the few key screens and describe what the user experiences while using this specific app.
Imagine you’re looking at the screens of the app. What do you see and feel as a user?
I will show you the main home screen of the app. I’ve set the home screen as the starting point of the app.
Why?
I want to delve into how a person would utilize the app after completing their account registration, investing in a few plans, and essentially engaging with the product. It’s similar to picking up a game where you left off, rather than starting anew.
Imagine someone simply grabbing their phone, tapping the app icon, and encountering this screen because they’re already a customer.
Below is the main home screen, and I have described in brief what is present on the home screen,

Let’s explore the different sections of the main home screen.

Section 1

What happens when you click the “My Expense” button? Let’s find out what happens.

Section 2

Let’s take a look at another section of the main home screen. We will see what happens when we click on the “Chat AI” option present on the bottom navigation.

Section 3

Let’s explore how users can access the power of AI to analyse their portfolios.

Section 4

Let’s explore how users can access the Budget, Goals, and Bills, and use them with the help of AI.

Section 5

Let’s explore the user flow of how a user will make new investments with the help of AI.

User flow of creating new investment with AI

Section 6

Let’s explore the user flow of how a user will learn about finance, specifically finance education.

This chapter involves some things that I am secretly proud of, but they may go unnoticed by other people.
So, I don’t want them to go unnoticed, and instead, I’ll tell you my top three favourites.

Let’s take a look at the first thing: an interactive slider for adjusting and setting the budget.

Let’s take a look at the second item: a gradient colour banner for accessing/using AI.

Let’s take a look at the third item: a circular pattern for the progress or status of ongoing budgets, goals, and bills

Okay, I believe it’s time to reveal the secret of my project. The secret that underpins the entire project is the “Design Process.”
But,
first of all, if I had to sum up the entire journey in three words, they would be “ambiguity to clarity.” It’s quite a confusing path, often intimidating. I’ve already mentioned the overall constraints I faced, but let’s delve deeper into the journey I took to create this. I’ll walk you through every step so you can understand what was going through my brain.
Here’s the entire overview:

Let’s delve into each of these processes in detail and depth, essentially what I did right after understanding the problem statements and the business goals.

Step 1: Screenshots

Below are some screenshots I took, which include personal finance apps as well as finance apps with chat functions featuring similar AI capabilities.

Step 2: User

Below, I have shared who the users of my applications are or whom I have considered

Step 3: Vision

Below, you can find the 3 visions I created for the project,

Step 4: Mapping

Below you can find the User journey flow I created,

Step 5: Emotion

Below, you can find the ‘do’, ‘think’, and ‘feel’ experiences a user faces as they travel through the journey of my application, along with the pain points and opportunities for improvement.

Step 6: Ideas

Below, you can find the “How Might We” statements

Below, you can find the ideas generated from the “How Might We” statements

Step 7: Research

Below are some of the distilled insights I have listed:

Step 8: Sketch

Here are the few sketches and low-fidelity wireframes I’ve shown below, alongside the first version of the high-fidelity design,

Step 9: Testing

Let’s see how I did the usability testing,

After this step, I created the final UI design of the application, which you have experienced in this project.

So, let me talk to you about usability testing. It was a Monday morning, and I didn’t have my coffee, but I had just finished my first draft of the design. I was excited to show other people, hoping for good feedback and praise.
However, it didn’t go as expected, or should I say, my way. Some of the things I thought would work didn’t work at all, and some things I didn’t like so much, they thought were genius.
Therefore, I have selected 3 usability test samples that I would like to show you.
Below you can find the 1st usability testing:

Below, you can find the 2nd usability testing:

Below, you can find the 3rd usability testing:

Hence, usability testing has proved to be very useful and helped me learn, making me realize the flaws and shortcomings in my designs, which I could have never seen otherwise.

This project wouldn’t be completed efficiently or perfectly without this element, which I consider the underdog of the project. It’s the most important aspect.
The thing I am referring to is a “Design System.” Let’s explore a few elements of the design system I have created, which have been very helpful to me.
The First element is the Colour System or Colour Palette,

The Second element is the Text Style,

The third element is Components and Variants. Below, I have shown a few examples,

I do believe this project has a lot of potential. It needs time and care for it to flourish further. Let’s see a few possibilities…
Some aspects of the user journey need improvement, particularly certain buttons and actions that remain unclear to users.
I overlooked adding an Expense Predictor feature, which would enable users to view future upcoming expenses predicted by the AI a month in advance. I intend to incorporate this feature.
The AI chat requires more dynamism to sound less robotic and more human-like. This will likely enhance user trust and engagement. Additionally, consider enhancing prototyping in various sections with better animations and feedback.
Additionally, we can include a feature such as a leaderboard of other users and create an online community within the application. This way, people can learn and grow together.

Well, I received two awards for this capstone project, presented by UX Anudeep. I am very pleased by this gesture and also proud.

We have reached the end of the story of my project. I hope you had a great time reading it. I hope you enjoyed it!
It would be very helpful if you could provide some suggestions, remarks, or any feedback regarding the project. Feel free to share what you didn’t like and what you loved!
Your feedback would be very helpful to me so that I can improve myself and learn new things,
unlike an AI, which can improve on its own (rolling eyes)