Redesign Concept for Qarma
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 Qarma
The Qarma app is designed to improve quality.
It provides the team, suppliers, and agencies with a quality toolbox and helps to carry out standardized, faster, and more accurate checks.
About the Client
Qarma is a fast-growing software company founded in Denmark with offices across Asia, Europe, and North America, developing simple and efficient tools in the supply chain.
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
Brief filling
First of all, we asked the client to fill out a brief. The company founder wrote in detail about their vision of the future product, its main competitors, and their mission and values and gave examples of similar services that inspired them.
Project Scoping
At this stage, we planned the mobile app design work process, discussed all the stages, time estimates, and clarified the overall scope of work.
UX Research
As always, we've started with extensive competitor research and investigated the best automotive apps. Thanks to UX research, we concluded that the main problem of such applications is the incomprehensible UX structure.
User interviews
The next step was the user interviews. We've talked to the application's target audience to understand what difficulties they face while using Qarma. Our goal was to improve the app navigation and speed up the process of mastering the platform.
UI design
After the UX research, our team worked on the visual user experience. Based on the previously created wireframes, we worked on the interface carefully, selected colors, pictures, fonts, animations, illustrations, etc., and added them 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
The client wanted to create such a design for Qarma mobile application so that, regardless of users' experience, they could quickly understand how to use the platform. So our team focused on providing the best user experience, analyzed all the design stages and the time it would take to create it.
UX Research
To create a user-friendly application for Qarma, we did UX research, during which we communicated a lot with the target audience and analyzed competitors. Thanks to this, we received many insights, highlighted what difficulties users encounter with the application, and found the best design solutions.
User flow
After analyzing the UX research results, we started working on the User Journey Map. It is a necessary step in the UX design phase. We wanted to make sure that the product functionality would cover customer needs.
Wireframes
A wireframe is a sketch that shows the location of all interface elements on the screen. We prototyped the application on paper, placed all the necessary elements in the interface in Figma, and negotiated all the details with the Сlient. Wireframes will be the basis for UI design in the future.
Moodboard
We created a Moodboard before starting to design the interface. It reflects the general mood of the project, shows the emotions it will convey, and helps us find inspiration.
3 styles option
Our design team made 3 visual style options for the Qarma app. They created several main pages for the future mobile application. The client could choose the version they liked the most and give feedback on the UI design changes.
Final version
After discussing three visual style options with the Сlient, we decided on one of them. The Сlient also liked several elements from the other option, so we harmoniously added these elements to the main version. This approach allows us to create a flawless and unique product design.
UI Design
We have developed the application interface in detail according to the previously created wireframes. Qarma app has many different functions and data, so to help users easily navigate the platform, we made the proper visual hierarchy, chose a concise style and color contrasts. Fonts play a crucial role in interface perception, and our team decided to choose the Inter font for the Qarma application.
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.
It was a great pleasure to collaborate with the ANODA team. The application design is flawless, and I'm delighted with the outcome. The results speak for themselves; the training time of the app's users was reduced from one month to one week! On top of that, the Qarma app's popularity has increased by 35% among various companies in the U.S., Europe, and Asia!
Product Design
Ideation & Evaluation
The client wanted to create such a design for Qarma mobile application so that, regardless of users' experience, they could quickly understand how to use the platform
UX Research
User flow
After analyzing the UX research results, we started working on the User Journey Map. It is a necessary step in the UX design phase. We wanted to make sure that the product functionality would cover customer needs.
Wireframes
A wireframe is a sketch that shows the location of all interface elements on the screen.
Moodboard
3 styles option
Final version
.png)
.png)
UI Design
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.
All screens
We deliver in iterations
Thanks to this, the Client receives intermediate deliverables and sees the results of the development, and we can efficiently and quickly close the tasks on the deadlines.
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.
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.
Investing
One of the key features of NeoBank is investing. Users can check their investment portfolio, strategy, and assets at any moment. Our user experience designers during their research found that the potential audience of the app was interested in financial language and opportunities for easy investment.
.png)
Transfer
The modern banking app is all about accessing various features in a few simple moves. Our user experience designers researched to learn more about the role of such an app in users' lives. We understood which features are of paramount importance and which can be hidden in the menu.
%402x.png)
Expenses
Unlike traditional banks, NeoBank not only helps users to easily transfer money and monitor their balance but also to manage their expenses. For example, the app gives an opportunity to structure them by category.
Expenses
Financial information needs to be structured well. Therefore, we have minimized the number of UI elements in the app to make users feel more confident. Here are some screens with money transferring flow in this app.
At the same time fintech UX should navigate customers easily in financial terms and other important issues. Users should stay informed about their banking conditions and their data should be secured.
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
