H Bank Intelligent Teller Prototype

Summary

  • Category: Mobile banking /AI agent
  • Company: Hypothetical Bank
  • Role:Product designer
  • Competencies: Prototyping, AI assisted design, product discovery
  • Tools: Figma Make, ChatGPT
  • Background: This app prototype is a proof of concept of using an agentic AI for banking and financial processes. It started as a experimentation on reducing UI elements on most banking apps, while utilising agentic AI for decision making on which UI element to show to the user to continue with their desired outcome. It is also considered to be more accessible working with voice prompts and validation.

    For the prototype, I used Figma Make and wanted to test its capabilities.

Why Intelligent Teller and minimum UI?

Imagine having the human connection and dialogue that clients had for financial services in old days of banking, with the practicality of mobile applications - being able to do banking almost any time and from anywhere with fast service times - and AI technology to facilitate these, coming together.

This proof of concept came out of this idea of converging both the bank tellers and the new technology to do things faster through simple dialogue and not through complex UI. It is also out of usability issues faced personally during decade of online banking

Most banking applications are not easy to use. It takes time to find where things are, no matter how much they are optimised, categorised or grouped.

Users repeatedly forget the structure because of the amount of cognitive load, busy pages added with promotions of financial products and that is unfortunately what dictates the design

For example to make a transfer, one needs to find the transfer link which could not be the same entry point for international transfers. Then, the user needs to select a recipient or add one, add the amount, write a reference, make a confirmation. Although each step ensures correct entry it is also time consuming.

Agentic AI and voice recognition can change this and here is how I started designing the HBank application.

This is also an example of AI assisted design and while doing so I wanted to test Figma Make

One short prompt

The first Figma Make prompt was very basic referring only to login and AI agent prompt page. FM designed the prompt page without any input based on popular approach. It aso introduced the most used commands in banking apps as a menu without me asking for it, saving me a credit.

User persona card- fleet manager

It was already a working prototype with functional login form and working AI teller console, which answered my transaction request and opened a transaction page.

In the second prompt, I threw challenge of contrasting colours to see how the design will adapt. Since the first prototype was displayed on desktop mode, I mentioned it should be in Android format. Figma Make relaid it out as native application format.

User persona card- fleet manager

In the third prompt, I wanted to fix the layout error on the menu. I also added the request for making the results clickable, like recent transaction or account balance as hyperlinks to designated pages which was my original intention for creating minimal UI.

User persona card- fleet manager

Here is the result of the three prompts and 95% being done with the first prompt.

Dealing with ambuity

In the next iteration I dealt with one of the ambiguities I presumed and prompted Figma Make to design to direct the user to choose from multiple results. Taking the transfer flow, I added the step for selecting the recipient where the user prompt hit multiple results. Then the agent would bring up the necessary UI for the user to either quickly select the right option for agent to create the right transfer details.

In addition I prompted to use more of the given colours on the interface and make it look consistent.

Transfer flow promt screen
Transfer flow promt selection screen
Transfer flow recipient confirmation screen
Transfer flow  biometric screen
Transfer flow transfer confirmation screen

On going forward

There are many ideas and considerations for the expansion and actualisation of the app. Briefly will mention:

  • The AI teller needs to have a voice only mode making it easier to use for visually impaired users or those who have difficulty using keyboard. This is already a common practice and it can be extended to be accurate and speedy for this use case.
  • There are security concerns especially in voice only mode since reading out sensitive information like card CVV numbers in public needs consideration in terms of warnings or detection of earphones etc.
  • Most importantly this model needs to be evaluated across online banking services if it can be utilised across the board as the main application or a secondary mode of use.
  • The decisions of the AI designer in Figma Make are not always accurate and the application will need a consistent component design system with attention to use of colours, contrast, and font type.