Redesign concept for Xero — a fresh look at the accounting software
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 Xero — a fresh look at the accounting software
Xero Accounting is a banking app used by thousands of businesses, accountants, and bookkeepers all over the world. It was founded back in 2006. Since then, digital banking app design trends have few times changed radically. So we decided to design the Xero app in a modern style.
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.
About the Client
Xero Accounting has more than 3 million subscribers who can get various banking services with just a few clicks. Such fintech solutions usually adhere to a formal style and focus on the service mostly. Sometimes they don't keep up with design trends. But users get used to modern and stylish banking mobile app designs that startup businesses provide. For a better acquisition of a new audience (especially young people) and to improve the experience of the current one, they can do a redesign.
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
UX Audit
At this stage, we analyzed the current flow of users in the app to understand how clear it is. Received data helped us to find several points that need to be improved to make banking apps work perfectly.
Generation of ideas
We brainstormed to generate the best ideas for improving the user experience in the app. We also analyzed the latest banking app design trends that would be relevant for this project.
Project Scoping
Before starting work, we discussed the general scope of tasks and deadlines for each stage. This approach allows us to work on projects quickly and efficiently.
UX Design
Our main mission is to create the best user experience. This is one of the points making future users ambassadors of the product. At this stage, we research the target audience's needs and goals.
UI Design
After UX research the team works on the visual user experience. Based on previously created wireframes, the interface is worked out in detail, colors are chosen, pictures, animations, illustrations, etc. are added to the pages.
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
Product Design
Ideation & Evaluation
Working on the redesign concept for Xero App, we wanted to develop complex fintech features in a stylish and user-friendly way. The product should not only achieve business goals but also create an outstanding user experience.
UX Research
We started with UX Research. This tool allows learning more about users' needs, experiences, and lifestyles. ANODA's team conducts customer interviews, makes competitive analyses, and creates a customer portrait. The obtained data allow us to offer the best banking app design solutions.
User flow
User Flow Map is a diagram that shows how the user achieves different goals in the banking app. For example, his path from registration to transfer money features. This tool provides more insight into the user experience of interacting with the app. Your user account will help you track any indicators: how much you send money, debt settlement records, open deposit account and etc.
Wireframes
Wireframes are a sketch that shows the layout of the user interface elements on the page. It should be as simple and schematic as possible and give an understanding of the main accents in the interface.
Moodboard
When creating a design, it is important to convey the specific emotions of the brand. Each element of the interface should convey the values of the product. In order to describe the vibe of the online banking app, we find images and design solutions with a similar mood. They inspire us to create the perfect UI design.
3 styles option
Usually, we prepare three visual style options for a mobile banking app, with a signup screen, a home screen, and a user profile screen for each one. After the Client's feedback, we create the design for all screens. In the Xero app case, we made a few options and conducted a brainstorming meeting with the team. Since digital banking app design is a difficult subject, we needed to hear the opinions of every member of the team.
Final version
After discussing 3 style options in the team, we decided to take one option of an online banking app as a basis, but add some interface elements from the second. Then we started working on the next screens of the application.
UI Design
Based on previously created wireframes, the interface is worked out in detail, colors are chosen, pictures, animations, illustrations, etc. are added to the pages. We wanted to move away from typical design solutions for banking apps and chose bright color combinations with a simple elegant font.
UI Design
All screens
Product Design
We deliver in iterations
A digital banking app design is always challenging enough. After all, there are many legal and financial aspects to consider. But this only makes the task more exciting!
Many startups now offer a new banking service model. And this allows us to look at the usual banking services in a completely new way. Mobile users can now make payments, create savings and open a deposit account with just a few clicks. And we are very happy to be able to work with such innovative products
Product Design
Ideation & Evaluation
Working on the redesign concept for Xero App, we wanted to develop complex fintech features in a stylish and user-friendly way.
UX Research
User flow
User Flow Map is a diagram that shows how the user achieves different goals in the banking app. For example, his path from registration to transfer money features. This tool provides more insight into the user experience of interacting with the app. Your user account will help you track any indicators: how much you send money, debt settlement records, open deposit account and etc.
Wireframes
Wireframes are a sketch that shows the layout of the user interface elements on the page. It should be as simple and schematic as possible and give an understanding of the main accents in the interface.
Moodboard
3 styles option
Final version
%402x.png)
.png)
.png)
.png)
%402x.png)
UI Design
UI KIT
Project planning & Zero sprint
"Zero sprint" is a term we use to explain the process of developing an action plan. This plan helps us to strictly adhere to the timeframes of the project and work qualitatively and effectively.
Web & Mobile Development
The overall development process of the application is fast enough. The project manager is constantly in touch with the customer and keeps him informed of all changes. Our specialists work quickly and efficiently, which allows a few weeks after the start of work to see the results.
Final QA / Testing
By testing the mobile app, we have the ability to provide a better application. We test its functionality, usability, and consistency.
All screens
We deliver in iterations
The main features of our work are transparency and clarity of processes for the client.
Such principles of work help us to avoid misunderstandings with the customer and allow us to make all changes at different stages of development.
Project planning & Zero sprint
"Zero sprint" is a term we use to explain the process of developing an action plan. This plan helps us to strictly adhere to the timeframes of the project and work qualitatively and effectively.
Web & Mobile Development
The overall development process of the application is fast enough. The project manager is constantly in touch with the customer and keeps him informed of all changes. Our specialists work quickly and efficiently, which allows a few weeks after the start of work to see the results.
Final QA / Testing
By testing the mobile app, we have the ability to provide a better application. We test its functionality, usability, and consistency.
Creating a new invoice
While working on the mobile banking app design, we structured the information in such a way that users could fill in the invoice step by step and not be afraid of making a mistake.
Business snapshot
Now the user will have a minimum of routine work because the platform can quickly create any report that displays insights.
Pay run
We have also created a convenient dashboard to track the status of all pay runs. Detailed information about each of them is displayed on this screen.
Mobile banking app design in details
We work passionately on every detail to get the best deliverables. Adhering to a laconic style, we placed accents in the interface with contrasting color details.
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
