UI/UX DESIGN / FINTECH BANKING APP USING MACHINE LEARNING
Bixtr is a banking platform used to improve the management of finances. What makes Bixtr different is the Innovative UX, the power of AI. The idea is to make banking super comfortable. Bixtr is a new platform I have been designing with an ex Ubuntu colleague. We felt that the current banking offerings could be improved.
Machine learning with retail banking offers a lot of potential such as chat queries to irregularity spotting and prediction of expenses. The main features with Bixtr are understanding spending, powered by machine learning, detecting anomalies, helping to save money & powerful search. The design is now at a good stage so next step is building the front end in React native and implementing the backend for the machine learning. Scroll down to see the features explained.
INTEGRATED AI CHAT SUPPORT BOT
An Integrated AI chat-bot will help users with simple support queries, such as expenses, receipts, get to know more about a certain transactions with the addition of visual graphics to communicate this further . There is the option to still call the advisor if needed to solve more complicated queries.
USER ANOMALY DETECTION
The example below shows how the AI could be used to detect anomalies and inform you on the move via notifications. An example could be a bill payment that is higher then average.
ACTIVITY MODE MOBILE AND DESKTOP
This is the main screen used to check your account balance, transfer and make payments. You can track your outgoings and incoming transactions. Also you can link any UK bank accounts to the app. You can also filter the time by showing day only, month or year.
ACTIVITY MODE VISUAL UI ON THE DESKTOP EXPERIENCE
ACCOUNTS OVERVIEW SCREENS
The overview mode is where the user can see the total expenses that have occurred in the account with the option to see different categories of expenses in an organised form. So it is easy to track how much has been spent on individual payment types. The UI also gives the user the option to select date ranges for the payment expenses during a certain period and this updates in realtime depending on the range.
OVERVIEW UI ON THE DESKTOP EXPERIENCE
The search mode allows users to search for specific transactions that have taken place. This can be in general or there is an option for more filters such as selecting certain date ranges and selecting the amount. The search also allows the users to look for certain categories highlighted as a tag.
APPLICATION SAVINGS FEATURE
The idea behind savings is to allow users to use tools such as the pennie saver or the goals tool. The goals allows users to create contributions daily or weekly to meet personal set goals. The pennie saver allows users to round transactions to the nearest pennie done automatically or manually.
The savings tab also enables the use of contributing to investments in the cash ISA & management of pension fund savings.
SAVINGS FEATURE SCREEN ON THE DESKTOP EXPERIENCE
The savings feature is one of the highlights of the application as it helps users save money by the use of a couple of tools which are listed below in more details.
PENNIE SAVER TOOL
The pennie saver helps users to round the transaction to the nearest pound and save the remaining into a separate savings account. You have the option to allow auto mode when a transaction is made via the app it automatically rounds the pennies to the nearest pound and contributes to the savings account or you have an option to add manually, which is done by a swipe left on the transaction, which contributes to the account. You can select individual savings targets as well to help you better save and meet your goal.
The goals tool enables the user to set specific goals and add contributions daily, weekly or monthly. You can customise how much you would like contribute, by setting a deadline and add photos for inspiration to meet the goal. Once you add a contribution and target date the system will automatically update to notify you how long it will take you to reach your target. You will be notified where you are at with the goal by a bar chart highlighting your progress.
MOBILE UX MOTION INTERACTION PROTOTYPE
I thought about the UX interaction design in the application and how the user would experience using the application. I have created custom transitions to enhance the user experience.
Having created this I also did some user testing on a prototype created using In-Vision to get feedback from the users.I also built a prototype via Principle which included some of the transitions created in this video, so it would give a smooth user journey and so that you can get a realistic live feel for how it would look when developed.
EXAMPLES OF THOUGHT PROCESS INVOLVED