Role: User interface design
This was a project I had to complete for a course in UI design that I took in March 2022; it was supposed to take 12 weeks, but I finished it earlier and to slightly different requirements.
In order to comprehend the best practices for designing mobile banking apps, I studied a UI design manual by Adrian. I also carried out additional research to learn more about user needs and problems.
My aim was to add a live currency converter feature to a mobile banking app while also enhancing the app's overall usability and aesthetic appeal.
%20(1).webp)
Designing this mobile banking app with live currency converter aims to improve customer satisfaction and increase usage of the currency conversion, this will in turn meet business goals and make more money.
How do we meet these business goals?
By incorporating key metrics such as conversion rate, user engagement and customer feedback and iterating the design to meet the needs of customers
My task in the course was solely the UI part of the whole experience, so I had to put these on my whiteboard as I commenced
1. Simple and clean interface: To provide a seamless user experience and make the app easy to navigate.
2. Currency converter integrated in the main menu: To make the feature easily accessible and intuitive to use.
3. Multiple layers of encryption: To ensure security and protect user's sensitive information
Let's link the user interface to the business objective, shall we?
Onboarding
Using walk-through screens for onboarding had a positive impact on key metrics such as:
Time to complete: Helped users complete the onboarding process more quickly by providing clear, step-by-step instructions on how to use the product or service.
Retention rate: Helped increase retention rates by teaching users how to use the product or service effectively, making them more likely to continue using it.
Feature adoption: Walk-through screens helped increase feature adoption by teaching users about different features of the Rondo and how to use them.
Signup
Using key metrics to measure the effectiveness of the sign-up process helped identify areas for improvement and get an understanding of its effectiveness
Sign-up rate: Measured the percentage of users who completed the sign-up process.
Abandonment rate: Measured the percentage of users who begun the sign-up process but did not complete it.
Personal details (Legal information)
For personal details, decided to break it into smaller steps, as to not let users stay on one screen for long, this decreased abandonment rate.
Figured the best idea would be to split the verification process into personal information, i.e., name, last name and DOB, and follow up with address information
Push notifications
We want our users to log back into our app as often as possible, so having a push notification system sending relevant push messages could help us do that
Verify identity
Verifying account holders is crucial for protecting user data and the business’s reputation.
This needed to be done due to regulatory requirements to help avoid errors - or fraudulent activity that our app might be used for
Using a Rondo card
After verifying the user’s identity, the first thing the user needs to start paying for their commodities is a credit card. Rondo automatically opens an account in their name and links the credit card to the account if they choose the “rondo card” option
Using a Rondo card
Naturally, they’ll need to top up the account if they want to start using the card. This is always optional, so the close button is visible in a place that users should be used to seeing by now
After doing research and deciding which features our fintech app should have. We avoided the temptation to get overly ambitious and build a complete app with all the features we could think of right away. It’s super risky and will make design and development process slow, complex, and clumsy
Instead of going all-in on the functions, focused on the functionality for our “first release”, and we’ll gradually build outwards.
This ensures a faster time to market and more time for testing and iterating.
Home screen
The home screen was designed with a simple and clean interface, displaying the customer's account information and provided quick access to the most commonly used banking services such as checking account balance, viewing transaction history, and transferring funds.
This lead to a higher likelihood of users returning to the app.
Offering referral and loyalty programs to get new customers through one of the most powerful marketing methods - word of mouth
Open a balance - first login
We want to make the whole app experience centered around our users. Our job is to suggest the quickest ways to complete specific actions and make it easy and effortless for them to navigate the app
Money transfer
We made it easy and effortless for users to access transfers. Users can access it either by clicking on our action button on our account balance card or by clicking the tab menu item right in the center of the frame
App settings and Accounts
To reduce customer-support costs and boost engagement and advocacy by allowing users to customize their apps however they want to, the app settings had to be well-designed. The goal with the settings is to make it easy for users to manage their preferences and edit every detail they might need to change.
To also view the account details of all accounts owned, it is shown in the main profile settings as well as the homepage.
Rondo mobile banking app with the live currency converter feature provided customers with a convenient and secure way to access banking services and convert currency on the go. The feature's offline availability also increases its usability and customer satisfaction. This was a side project but the success of the design would have been measured based on increased customer engagement and satisfaction
The UI professional's design manual by Adrian was a long and extensive book covering both theory and practice and really was worth it, as it provided me with good value