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.

Lets' Talk!

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. 

Client name
John Smith, The Co-Founder
Industry
Fintech
Location
USA

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.

UX Research
UI Design
Branding
Development
Usability testing
QA
Challenge #1
NeoBank should provide the best UX design that can satisfy users with different demographics and lifestyles.
Challenge #2
NeoBank was seeking a new vision of banking services. It should not be too formal but not too fancy either.
Challenge #3
The Client had a limited timeframe and scheduled investors pitch also, so deadlines were really important.

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.

We really appreciated the opportunity to work with one of such innovative fintech startups. They were open to new ideas and paid a lot of attention to the UX design stage for mobile devices.

Client name
Jonah Odling
Industry
Marketplace
Location
USA
Challenge #1
UI/UX design will allow keeping all the best solutions of the product, but make the interface more clean and stylish.
Challenge #2
Modern fintech apps are becoming more and more user-friendly. The redesign will help make certain features more convenient.
Challenge #3
During UX research, we can find the pros and cons of the app and improve it.

Solutions

1
Quality UX research
NeoBank was looking for innovative solutions for future customers. In order to solve their needs and pains, we had to collect and analyze as much information about them as possible.
2
Design process
The product had to be created from scratch. The founders came to ANODA only with an idea. We clearly structured all processes and discussed the scope of tasks.
3
Modern Interface
We were challenged to provide a simple and user-friendly interface making people's life easier. This financial app should not look too formal like most competitors' designs.

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.

UX Research
UI Design
Branding
Development
Usability testing
QA

Solutions

1
Quality UX research
In order to offer better digital banking app design solutions, we need to understand well the pain points and needs of the target audience. To improve such notifications, display insights, and user accounts, we use only the latest data we collect during the research.
2
Design process
Depending on the globality of the redesign, we follow certain stages of the design process. Mobile banking app is always very time-consuming and interesting to work on.
3
Experienced team
We have a lot of experience in the online banking app design niche, so we are very familiar with the digital banking app design trends and have tested many solutions. We have already created Alfa bank app redesign, Cradle banking app design/digital wallet app, Actiwallet banking app design, Citibank app redesign.

Scope of Work

Our main goal was to offer a new look at banking app design "traditions". We wanted to create an interface that is as convenient as possible even for those users who use the product for the first time and know nothing about mobile banking in general.

Platforms
Desktop
Mobile Web
Tablet
IOS
Android
Design Tools
Figma
Photoshop
Illustrator
Features
Mobile App
Landing page
Corporate website
Saas Platform
CMS
Admin panel

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

Our main goal was to offer a new look at banking app design "traditions". We wanted to create an interface that is as convenient as possible even for those users who use the product for the first time and know nothing about mobile banking in general.
Platforms
Desktop
Tablet
Mobile Web
IOS
Android
Design Tools
Figma
Photoshop
Illustrator
Design Tools
Landing page
Mobile App
Corporate website
Saas Platform
Admin panel
CMS

Scope of Work

The founders of NeoBank spent more than a year looking for an agency that would help them with design and development. They understood that they were too busy with other projects and would not be able to devote much time to NeoBank. They needed a team that would also be inspired by their idea and work on it independently enough.

Platforms
Desktop
Mobile Web
Tablet
IOS
Android
Design Tools
Figma
Photoshop
Illustrator
Features
Mobile App
Landing page
Corporate website
Saas Platform
CMS
Admin panel

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

640h
of ANODA’s team working
94 screens
for Web & Mobile app
4 platforms
for a new fintech product
Nia Bautista
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

1

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.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

Create your best project now!

03
Estimation
02
Intro call
01
Brief filling
2

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.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

3

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.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

4

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.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

5

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.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

6

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.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

7

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.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

8

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.

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

9

UI Design

Typography & Colors

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

10

All screens

A banking app is always about combining features for personal financial management, confidential information storage, and a large amount of analytical data for users that display insights. Our challenge was to bring it all together in a concise, stylish interface. And we exceeded our own expectations!

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

Product Design

01
Estimate Update
02
Project planning
03
Zero sprint

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. 
Tech Tools:

We started with a big meeting where our team was able to learn more about the project and ask all their questions.

Result
430h
of ANODA’s team working
94 screens
for Web & Mobile app
4 platforms
for a new martech product
Jonah Odling

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

1

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.

03
Estimation
02
Intro call
01
Brief filling
2

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.

3

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.

The next steps were wireframing and UI design. We are also big fans of Pixel Perfect Design, so our UI elements fit perfectly into Wireframes. At this stage, it was time for one more meeting with the Client to approve the way customers use different features on the platform.

neobank sitemap
4

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.

This step is necessary so that when developing, we do not think about whether something should be added. We will already have a finished UI/UX design, which we will follow.

neobank-ipad-screen-wireframesneobank-ipad-screen-wireframes
5

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.
neobank app home screen dashboard
6

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.
7

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.
neobank portfolio screen
neobank investing screen
8

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.
9

UI KIT

Typography & Colors

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.

Feature #1
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. The interface of a digital bank contains only essential fields so that nothing distracts the user from work.

Create your best project now!

Feature #2
Business snapshot
Now the user will have a minimum of routine work because the platform can quickly create any report that displays insights. Therefore, the user will be able to spend more time generating ideas and thinking about strategic decisions.
Feature #3
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. Users also can track account history and choose a personal investment app design.
Feature #4
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. It helps to develop a high-quality digital banking app design. The user immediately understands what to pay attention to in the first place.
10

All screens

A banking app is always about combining features for personal financial management, confidential information storage, and a large amount of analytical data for users that display insights. Our challenge was to bring it all together in a concise, stylish interface. And we exceeded our own expectations!
Software Development
01
Estimate Update
02
Project planning
03
Zero sprint

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.

Tech Tools:

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.

Want to create an application?

Lets' Talk!

FEATURE #1

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.

The interface of a digital bank contains only essential fields so that nothing distracts the user from work.

Create your best project

FEATURE #2

Business snapshot

Now the user will have a minimum of routine work because the platform can quickly create any report that displays insights.

Therefore, the user will be able to spend more time generating ideas and thinking about strategic decisions.
FEATURE #3

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.

Users also can track account history and choose a personal investment app design.

Create your best project

FEATURE #4

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.

It helps to develop a high-quality digital banking app design. The user immediately understands what to pay attention to in the first place.

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.

Want to create an application?

Lets' Talk!

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
We located:

Kaupmehe 7-120,
10114 Tallinn, Estonia

Got a project on mind?

By sending this form I confirm that I have read and accept the Privacy Policy

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.