Warehouse — innovative approach to SaaS application
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.
Warehouse — innovative approach to SaaS application
The Warehouse is an innovative Web SaaS application that helps users to store warranty data in one convenient platform.
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
The Warehouse founder assigned ANODA to develop a Web and iOS application with custom back-end and front-end solutions for the SaaS platform. The primary objective was to provide people with a handy application that helps store various product warranty data in one place.
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
Filling out a brief
First of all, we asked the Client to fill out a brief. In it, the startup founders describe in detail their vision of the future application, its main competitors, its mission and values, and provide examples of services that inspire them and what they'd like to see in a similar UX design.
Project Scoping
We estimated the scope of work. We had to develop the product from scratch. Therefore, we started with precise planning, structuring of tasks, and estimation by time.
Product Design
To achieve the best deliverables, we had to find out all the target audience's needs to provide the best product solutions. So we interviewed the potential users and highlighted their pain points to create the best application for them.
Back-end & Front-end Development
The platform had to store different data types, so we immediately focused on finding the best technological solutions for this task.
Native Mobile Development
People want to find the necessary services as quickly as possible in today's world, so creating an application is a great solution!
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
For any project, we start with a discussion of the ideas and requirements of the Client and identify how the product will benefit people. After that, we begin collecting information about the target users and the field for which the application is created. We analyze competitors, find users' pains, and ways to solve them. Finally, we estimate the project and negotiate the deadlines with the Client and start further work on the project.
UX Research
Now it was the UX design team's turn. It was necessary to research market competitors and user needs. We not only conducted several custom interviews but also read hundreds of reviews and forum pages on the experience of using a banking app or gaining financial knowledge in general. We were defining the target audience of fintech companies and analyzing competitors to choose the right UX design.
User flow
Firstly, we created a user flow map. It is a necessary step in the UX Design phase. We wanted to make sure that the product's functionality would cover customer needs and that we would be able to explain all the small chunks of the big finance system. The following 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 how customers use different platform features.
Wireframes
Another UX design stage is creating an application prototype on paper and then in Figma. At this step, we arranged all the necessary elements in the interface and discussed the Wireframes with the Client.
Moodboard
We also created a Moodboard before starting to design the interface. Moodboard reflects the general mood of the project, shows the emotions it will convey, and inspire the team during the design creation.
3 styles option
Our design team made 3 visual style options for the Warehouse application. They created several main pages for the future mobile application so the Client could choose the version they liked the most and give feedback on the UI design changes.
Final version
After negotiating 3 visual styles with the Сlient, we decided on one of them. However, the Сlient also liked several elements from the other option, so we perfectly added these elements to the main version. As a result, we created a flawless and unique application design.
UI Design
We chose a light color palette for the app's background, adding blue accents since the platform must be convenient and simple for users. Also, we added a common dark mode feature to reduce the light emitted by device screens while maintaining the minimum color contrast ratios required for readability.
UI Design
All screens
Product Design
We deliver in iterations
We wanted to create an unusual application and worried about choosing a development company. Fortunately, ANODA was ready to take on this interesting and extraordinary project and help us make everything perfect. During the project, we were always in touch with the PM and monitored the results of each stage. The team was always interested in our feedback and easily made necessary changes. We are satisfied with the final result and are grateful for the high-quality and prompt work of the ANODA team.
Product Design
Ideation & Evaluation
For any project, we start with a discussion of the ideas and requirements of the Client and identify how the product will benefit people. After that, we begin collecting information about the target users and the field for which the application is created. We analyze competitors, find users' pains, and ways to solve them.
UX Research
User flow
Firstly, we created a user flow map. It is a necessary step in the UX Design phase. We wanted to make sure that the product's functionality would cover customer needs and that we would be able to explain all the small chunks of the big finance system. The following 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 how customers use different platform features.
Wireframes
Another UX design stage is creating an application prototype on paper and then in Figma. At this step, we arranged all the necessary elements in the interface and discussed the Wireframes with the Client.
Moodboard
3 styles option
Final version
%402x.png)
.png)
.png)
.png)
%402x.png)
UI Design
UI KIT
Project planning & Zero sprint
After completing the design, 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 back-end, 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 ensure it's perfect.
All screens
We deliver in iterations
Thanks to this, the Client receives intermediate deliverables and sees the development results, 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 completing the design, 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 back-end, 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 ensure it's perfect.
Dark-mode communication
We decided to add the dark mode option since it reduces blue light that can interrupt sleep, extends battery life, can potentially reduce eye strain and dry eyes in low-light conditions, and it's just a common feature that users like.
Schedule and Reminders
Users not only can keep a list of all their warranties in the Warehouse application but also set notifications for warranty expiration dates.
Adaptability
The Warehouse app is compatible with both smartphones and tablets with any screen size.
Add item
This feature is the most important because it allows users to add their warranties to the application.
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
