Redesign concept for Bank of America
About the Client
Neobank is a fintech app startup with a new approach to banking services. The service can help users to view finance flows, make payments, control the balance on all cards, and see expense analytics.
Redesign concept for Bank of America
What should a perfect modern banking app look like?
We decided to combine a large number of financial features with trendy design solutions to create a mobile app that will become a favorite for users with completely different lifestyles.
About the Client
Bank of America has been providing quality banking services to millions of its customers for many years. In the interfaces of their platforms, they adhere to a rather formal style.
Solutions
Neobank — award-winning fintech app design
Mobile application design that became Top #1 fintech app design on Behance with thousands of appreciations.
NeoBank needed help with design and iOS development for the new fintech app. They wanted to provide potential customers not only with easy banking service, but also with a great tool for making new good habits on users' way to financial independence.
Solutions
Scope of Work
Project Scoping
To begin with, we adapted our design process to the tasks that will need to be performed for this project. We also had to plan an estimate of the time for each stage of the development of the banking app.
Generation of ideas
While generating ideas, we also looked for inspiration even from popular apps in the category of Fitness and Health, social networks, and other popular platforms. It was important to us that our mobile bank application should not overwhelm the human eye but not be black and white.
UX Research
We started it with extensive competitive research. We researched both large banks that have been on the market for a long time, as well as fintech startups that offer a new approach to banking services. We were able to conclude that the main problem with the online banking app is its lack of practicality.
Customer interview
The next step was user interviews. We conducted interviews with representatives of various demographic groups because the app had to be convenient for everybody. Both students and retirees are the target audience of such mobile banking apps. Lifestyle, financial status, job, mortgage payment expenses, and other things are very important. The lifestyle, personal finances, work, mortgage costs, and other requirements of our clients must be covered by one digital bank.
UI Design
We wanted to combine trendy design solutions with banking features. It was supposed to be a truly innovative approach to banking mobile app creation.
Scope of Work
Scope of Work
Brief filling
First of all, we asked NeoBank to fill out a brief. In it, the founders write in detail about their vision of the future product, its main competitors, its mission and values, and also provided examples of services that inspired them.
Project Scoping
We also realized that there is a very large scope of work ahead. We had to develop the product from scratch. Therefore, we started with clear planning, structuring of tasks, and estimation by time.
Product Design
The main advantage of NeoBank is the emphasis on outstanding user experience. In order to achieve the best deliverables, we had to find out all the needs of the target audience to provide the best product solutions.
Back-end & Front-end Development
The platform had to quickly process a large amount of data, deliver a variety of financial features and allow users to easily access any necessary information.
Native Mobile Development
Since NeoBank wanted to offer its users the most convenient fintech solutions, its founders immediately decided to start with an application.
Result
That's why we wanted to make Bank of America's interface design cleaner and more modern, to create a new cradle banking app design.
Product Design
Ideation & Evaluation
We wanted this digital banking app design to be in a modern style and provide personalized assistance on financial issues for each user. In today's busy life, it is very important to get all the necessary information with just a few clicks. We wanted to implement these ideas in the user interface of this banking mobile app.
UX Research
We always work according to the design process steps. One of its first steps is UX research. We needed to gather information about the pain points and needs of users, conduct user interviews and create a customer portrait. The following are some of the most common requests: simple withdraw money; send money; private social network; the ability to create savings; open deposit account; the ability to track personal banking; and instant access to customer manage. But the main thing is to support their own startup business and startup founders with their own startup business.
User flow
After analyzing the UX research insights, we started work on the User journey map. At this stage, it was important to make sure that users easily navigate between features in the app and achieve their goals. Everything must be perfect from the moment of registration to the bill payments. There was already a great emphasis on making the application work equally well on different mobile phone, while online banking app should work at a high level.
Wireframes
Wireframes are a tool that is relevant for working on any product, such as innovative tech startups or digital banking mobile apps. At this stage, the foundation for a better user experience is created. The largest private bank or application for digital wallet app actiwallet. No matter how large the banking app can be, the frames are the same everywhere.
Moodboard
We looked for inspiration in modern trendy designs. We were trying to find insights that will allow the bank to demonstrate that it is developing over time and is open to new technologies. Online banking app design can convey these ideas in every element of the interface.
3 styles option
Next, the department design team developed started working on the banking UI. We wanted to create an online banking app with a personal investment app design. The pages with the transaction history or paying bills features are usually filled with various numbers. We wanted users not to feel confused about such an amount of data and to confidently use financial transactions. So that new accounts can easily navigate the banking app ui and not get lost among a lot of features.
Final version
We designed 3 style options for the online banking app interface. We usually send them to Clients so they can choose the option they like. This time, we discussed these three options in a team meeting, brainstormed, and settled on one option for the mobile banking app design.
UI Design
Inter features a tall x-height to aid in the readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjust punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.
UI Design
All screens
Product Design
We deliver in iterations
The stack was chosen to ensure the highest app performance even in huge teams. There were several developers, the project manager, and the QA specialist on the project creating this financial product.
Digital banking is developing so quickly that it is necessary to constantly follow news and trends in the financial products design. Large banks sometimes do not keep up with trends, because they are focused on service and providing new financial services.
That's why we wanted to make Bank of America's interface design cleaner and more modern, to create a new cradle banking app design.
Product Design
Ideation & Evaluation
We wanted this digital banking app design to be in a modern style and provide personalized assistance on financial issues for each user. In today's busy life, it is very important to get all the necessary information with just a few clicks.
UX Research
User flow
After analyzing the UX research insights, we started work on the User journey map. At this stage, it was important to make sure that users easily navigate between features in the app and achieve their goals. Everything must be perfect from the moment of registration to the bill payments. There was already a great emphasis on making the application work equally well on different mobile phone, while online banking app should work at a high level.
Wireframes
Wireframes are a tool that is relevant for working on any product, such as innovative tech startups or digital banking mobile apps. At this stage, the foundation for a better user experience is created.
Moodboard
3 styles option
Final version
%402x.png)
UI Design
We chose a restrained color palette with bright accents. Most often we used a rich blue color. It perfectly fits the style, which is very popular in the digital banking niche. We wanted to make the banking app functional and easy to switch between on the same page, while the service app was clear and easy.
UI KIT
Project planning & Zero sprint
After the design was completed, we took time for new planning in the development team. Developers also needed to discuss the technical requirements for the project and choose technological solutions.
Web & Mobile Development
Our team recommended using React.js on the front end, Node.js on the backend, and Swift to build the app. The development was based on 2-week sprints to ensure the right level of flexibility, maximum value, and a constant feedback loop.
Final QA / Testing
Each stage of development is tested, so we are confident in the quality of the delivered product. After we finish working on it, we also do Final QA to make sure it's perfect.
While working on the user interface and app design, we focused on simplicity and clearness. Nothing superfluous, only the most necessary information. Users can concentrate on the mobile banking and information they want to receive first after opening the app. Customers can create multiple accounts, send money, check information about the largest russian investment companies, do personal banking, track account history, etc.
In the app interface, we decided not only to show the total cashback balance and recent transactions but also cashback rates for different categories. We also added the "Partners deals" category for specific stores.
The user of our online banking can check his investment portfolio and general analytics, send money, or vice versa, and get it from someone. Also, users can check their investment portfolio and general analytics at any time. He can also go to the "Stocks" tab to view detailed information about specific stocks and their charts. The UI/UX design will allow you to get visually cool graphics and at the same time be able to look into them and learn about the latest updates on the market.
First of all, we designed quick access to various categories of transfers, and also implemented the transfer money by contact list feature. If the user often makes transfers to a certain person, then their profile begins to be displayed at the top in the "Send again" block. This allows for spending less time on such a transfer.
All screens
We deliver in iterations
The client always receives an intermediate cut of the project. He knows what development processes are at work.
Thanks to transparency of work, all members of the team and the customer know exactly what and by what deadline they are working.
Project planning & Zero sprint
Once the design is complete, our design team plans the next steps and development steps. Also, our developers need time to discuss all the details of the technical requirements and choose the right solution.
Web & Mobile Development
Our team works in 2-week sprints to develop the application. This is to ensure the right level of flexibility and maximum results. For building the app we recommend using React.js on the front end, Node js on the backend, and Swift.
Final QA / Testing
We are confident in the quality of the supplied product as each application is thoroughly tested before being published on the marketplaces. Even after the release of the app, we closely follow its work and are always ready if something goes wrong.
Mobile banking app home page
On the home page of the app, we have displayed the balance of the main card and transactions list. We also added the ability to switch to other features of the platform in just a few clicks. These are things that customers use most often.
.png)
Reach your investing goals
A modern banking app is not just a digital wallet for storing credit cards. It has many additional features that help users on their way to financial freedom. In this app, for example, investment opportunities are available in which you can choose your own personal investment app design.
Turn purchases into cash rewards
Using the cashback mobile app allows customers to earn money back on purchases. It is one of the tips helping on the way to financial well-being, so this feature is becoming more and more popular. There are separate cashback services, but sometimes these functions have already been added to the online banking app.
Digital banking payments
One of the main missions of digital banking apps is to provide the ability to quickly and conveniently make various transfers. During user interviews, we found several ideas on how to make the "Transfers" page as convenient as possible.
Project planning & Zero sprint
After the design was completed, we took time for new planning in the development team. Developers also needed to discuss the technical requirements for the project and choose technological solutions.
Web & Mobile Development
Our team recommended using React.js on the front end, Node.js on the backend, and Swift to build the app. The development was based on 2-week sprints to ensure the right level of flexibility, maximum value, and a constant feedback loop.
Final QA / Testing
Each stage of development is tested, so we are confident in the quality of the delivered product. After we finish working on it, we also do Final QA to make sure it's perfect.
Delivery & Deployment
This was the last stage in our work on the creation of NeoBank. Now a fintech application has become available to users from all over the world and we were waiting for the first reviews.
Browse other cases
Coinly — advanced cryptocurrency wallet application.
One day two true crypto enthusiasts decided to create the most convenient solution for the blockchain market, and we were more than ready to help them to achieve this ambitious goal! So check out the best crypto wallet that can be in your pocket!
USA
Social Network, Management Software
Look-Alice — an awesome community of local businesses.
This unique mix of the online and offline marketplace helps offline businesses attract more clients and increase sales. Our team did efficient work creating an attractive, convenient design and smooth mobile application that encourages people to return to small local stores and support them.
USA
Social Network, Management Software
McDonald’s — traditional taste in modern design.
Exclusive deals, a personal profile to use with multiple devices, a customizable meal and more in one upgraded McDonald’s app. Keep up with current technology. ANODA company will help you create your own application to surprise your visitors.
USA
Social Network, Management Software
Contact us
Share the details of your project – like scope, timeframes, or business challenges you’d like to solve. Our team will carefully study them, and then we’ll figure out the next move together.
Project inquiries
Careers
HQ:
Kaupmehe 7-120,
10114 Tallinn, Estonia
