Designing an AI agent : Chatbot UX & UI for a personal finance assistant app

We designed a solution that integrates a generative AI powered chatbot into a standard mobile banking app to help users gain more insight into their personal finances, from budgeting to planning.

Two iPhone mockups, one showing the opening screen of the Finshape app and the second showing some charts in an AI chat conversation on how much the person spent on dining in the given month

Goal

We teamed up with Finshape to design an AI chatbot that’s simple to use, regardless of the complex system behind it. The chatbot helps people get a better handle on their budget and plan for both the near future and long term.

Challenge

One of the main challenges of the project was to integrate the generative AI powered chatbot into a standard mobile banking interface in a way that feels natural and inviting.

Outcome

In just 3 weeks, we created a concept that drives user motivation to explore the chatbot's full potential. We also designed how it would answer finance questions, with easy-to-read charts for things like tracking expenses.

1 /

Understanding the product

How we started

In the beginning, we sat down with the client team to understand how their personal finance assistant product works and what the capabilities of the generative AI chatbot are. This was essential to understand what type of questions and answers the AI agent can support users with.

We also identified the user profile for this product and clarified research questions around personal finances, user motivation, and how to best display information for users.

2 /

First AI ideas

Integrating the AI chatbot in mobile banking

Designed multiple points where users can access the AI: the standard chatbot interaction and AI spotlight . AI spotlight featured insights about the users’ finances around overspending or optimizing.
Created a script to follow in the AI chatbot conversation, starting from simple questions (”How much did I spend on dining out last month?”) to more complex ones (”I want to buy an iPhone, how can I afford that?”)
Designed different response types. For questions that included a time period, the chatbot would provide various types of graphs. In other cases, it displayed calculations in a more visual format and suggested actions like setting up reminders.

3 /

Testing & design iteration

Refining the AI agent & chatbot integration

During the testing, we discovered that users would naturally look in their transaction history for information about their finances, even if they knew that the chatbot could help them with this.

To make the AI agent easier to access and to help users understand its value, we redesigned the initial concept by adding conversation starters in the standard mobile banking app.

Conversation starters feature questions like ”What's an amount I can realistically save?”
Testing also revealed users want the AI to help them close the gap between information and action, so we reinforced this in the chatbot interaction.

Sára Hanniker

Head of AI at

Finshape

“The UX studio team worked extremely quickly and professionally, unafraid to take on a new and challenging agentic AI project. We quickly established a shared understanding of personalized finance, the input data, and the system architecture. It was incredibly exciting to see how business design and user experience can influence, or even drive, the system architecture and the various capabilities of AI agents. The result—an actual working AI financial assistant developed by Finshape—was very well-received by financial institutions and helped convince our clients that we are reliable partners in hyperpersonalization and agentic AI delivery.”