Application born from frustration

Maciej Zieliński

11 Dec 2019
Application born from frustration
Julia Wolińska

Several dozen years ago, making purchases with a debit card was just a dream on the Polish market; without a wad of cash making a bigger transaction was futile. A dozen years ago, making a money transfer was preceded by a lengthy authorisation process. The frustration connected with a trip to one of the few available bank agencies was only surpassed by the one caused by standing in a long queue in a hospital. Several years ago, in order to pay while abroad, we needed to equip ourselves with a massive amount of cash in a currency exchange bureau. That is, unless we wished to face a costly currency conversion fees in the bank

How come then, that in a matter of several seasons we learned to uninstall payment apps if they do notfit our visual criteria? For banks and start-ups this is not a mere requirement, but a chance. The discussion concerning the “beauty contest” for the financial apps is more vivid than ever. UX (User Experience) and UI (User Interface) are bound to become a distinguishing factor in the era of PSD2 directive. Where does the success lie? Today, we are going to compare three different ways of designing the UX and UI in the financial apps.

The difference lies in the Fintechs

Financial services based on the information technology are experiencing their boom, though the specialists agree that it’s just the beginning. In the last year, only in the United States there has been a significant increase in the revenue of the fintech companies, even reaching the impressive 43% in reference to the prior year which translates into an incredible growth by 12.4 billion dollars. All it tookwas one year.

Not only are the modern solutions simpler, more comfortable and safer than those which previous generations got used to, but they are also far more personalized and nicer to use. It’s the app interfaces,credit cards and modern solutions which are meticulously prepared and tailored for the needs of the present-day user which stand behind the successes of the popularity of fintechs like “Revolut” or “N26Wygoda”.

It’s the comfort and the elegance of the utility which triumphed even over the superstitions against the payment with our phones. The fintechs have shown us a different way and they made a basis for a better standard.

Demands of the spoiled Millennials... or the visionary call for a change?

Together with the development of the modern technologies, the demands of the users of mobile devices have increased. We can criticize the current generation of young adults for being too reliant onpersonal comfort, but we can conjointly agree that their cries for an improvement has benefited us all. Online banking and payment systems have stopped being only utility based; they have become an aesthetic and enjoyable experience. We have reached a situation where the amount of savings on our credit card or the financial app is not the only signifier of prestige.

Thinking different about the UX/UI of financial services

Design is just the tip of an iceberg if its coincidental. Most companies need a fresh approach to create new products or improve the existing ones. Nothing illustrates it better than the Apple Card. When weare holding the card in our hands, we realise that its visually appealing and it has many interesting utilities, however this perception is too shallow.

It’s fascinating that Apple, unlike any other company is capable of doing the same thing so effectively. They combine known features without adding anything which is normally deemed necessary and then make a value proposition from it. The critics look down upon the card, saying that it lacks the NFC service. However, the piece of titanium with Goldman Sachs sign written over it, was never meant to be used for the contactless payment. You need to use it in the hotels reception, show it after the luxurious meal in the restaurant. You will do that, despite receiving a lower cashback than by using a phone to pay. The companies underestimate the power of beauty and prestige behind their products. Apple has created a better card than any other company not because it was innovative, but because it’s a product tailored towards their very own customer. The company perfectly reads their own clients when it realises that their needs lie in the sensation and feel of the aesthetic prestige.

Revolut – fintech technologies which molded the european market

One of the major pioneers that revolutionized the payment system is Revolut. Fintech was introduced to the Polish market in 2017 and it definitely won the hearts of our countrymen. While the banks are swearing that everything is under their control, the start-up has announced that they reached their first million of clients.

After the introduction of Revolut, many of the comforts it offered were revolutionary in Polish perception. Suddenly, we started using the foreign currency accounts which always used the beneficialconversion rates. Creating a new bank account suddenly became a cakewalk, unlike what was offered by our native banks, because of the well-rounded, neatly organised UI and UX of the app. The verification process is swiftly handled by the KYC procedures; thanks to them it took only one evening for our account to be made. The card arrived to the recipient only after a few business days. All without the damaged envelopes and redundant terms of service written in an unidentified legal terminology. All it took was a simple, elegant container which reminded the recipient of the Apple designs. Simplicity and enjoyment was the key, unlike the wonky CX (Customer Experience) of the bank accounts.

In the first half of 2018 there were 1.7 million financial start up clients and after only a year the number has grown to almost 4 million.

UX/UI design lessons from the Revolut

The advantage of Revolut wasn’t solely made by the ease of account creation or the free card distribution. Its success was decided by well thought and planned design. The clear and easy to read login screen (which can be unlocked by the usage of fingerprints or the personal code), easily readable main page and intuitive marking, everything is in touch with the key rules of UI design. The user is not distracted by the unnecessary visual elements. Big, contrasting key icons lead you to the most important functions such as making a wire transfer or checking the transaction story. What’s important is that Revolut has designed his app around the responsive grid which is following the rules of Material Design. It allows for optimal utilisation of the app no matter what resolution is allowed by the size of your mobile device.

It’s an art of designing a simple app. Revolut is minimalist but cosy and visually appealing, and unlike its rival apps it doesn’t come off as a cheap knock off. Even the simplest icon placement can make a huge difference in the art of designing the financial app

To design a newsletter

The communication with the clients is a cherry on top in establishing a good financial app. Bland, repetitive newsletters are often soulless automated responses which are sent to thousands of clients. Adaptation to the newest trends in the field of effective marketing allowed fintech to create an illusion that it doesn’t have to be that way. Its not a handwritten letter, but enough to keep the modern recipientengaged. Following the design notes of the app, we are faced with an easily readable, simple CTA, coherent design of keys or well refined microcopy. The elements are repeatable, which makes the user utilize the app instinctively after getting a hold of it. A coherent colour code reduces the reaction time to minimum. “Straight to the point”- this strategy of the brands language creates a sense of security, because the communication with the company feels sincere and accessible.

Fintech solutions in Polish banks

The trend was quickly picked up by our native banks. For the last several years they focused on optimising the payment procedures and the UX/UI of the mobile devices. Its not surprising as over 9 million of Poles have claimed that they are using the financial apps. However, finding the balance between the minimalism and utility of the interface is the biggest problem yet for the designers.

What is more, a well balanced app of the financial start-up or bank is that which is more readable and user friendly than native apps of the social medias. Now we are going to compare three methods of designing the UX and UI.

mBanks’ innovative mobile app

The clients usually do not take their time to time analyse the banking apps, unlike us of course. mBankcreated an app which, at first glance, meets all the modern design notes in the field of UI and UX.

Instead of trying to bombard the user with features, we receive clear section with consistent colouring. Not only can you easily make your money transfer, but also you can easily access the transaction story. The app is highly responsive on pretty much every single mobile device, the optimisation level will satisfy even the tablet users.

The most important icons are easily reachable by your thumb, they lie in a so-called “thumb zone”, which unfortunately isn’t the standard yet. The app was also designed on a clear grid, and the buttons generally follow the standard dimensions of 44x44 which is the size which is deemed the most comfortable to press on the screen.

There are two main reasons why you are clicking your banking app: to check your accounts’ balance and to make a money transfer. In mBank, the balance is the first, most visible element upon logging in.With only three quick clicks you can access the app and make your money transfer. The most important button which allows you to do so covers most of the space of the screen and has a bright, easily distinguishable colour.

PKO- world’s leading app design

If you want to insult a banker, tell him that the Polish banking system is out of touch and redundant. Consecutive competitions are proving that it’s just a harmful, slandering label. The IKO app which belongs to PKO Bank Polski was nominated as the best banking app... in the world! Twice in a row! This wondrous utility is used by almost 4 million people.

The tests easily show why the app is so highly regarded. A clear interface held in a toned down colour scheme allows you to access the most important functions without breaking a sweat.

The app takes full advantage of the technological advancements and innovation. Paying is made much easier because of the ability to scan a special code to make the transaction immediately. The IKO design doesn’t utilise micro interactions, animations and it doesn’t overwhelm the user with fancy decorations. However, this doesn’t mean the design is lacking in any way, the app was planned to be targeted at every eligible age group. The app is far more readable for the elderly age groups, because itcorresponds to the desktop version far more than any other banking app. Its apparent that mobile banking is not only used by the millennials.

The most commonly used functions, like making the money transfer were highlighted with a contrasting blue colour. The size of the buttons doesn’t suggest you the hierarchy of the choice of actions. Even before checking the app out, we suspected that it will have a standard hamburger menu, situated on the upper left corner. It’s a typical technique when we want to enforce a safe design which can be easily readable by every type of user

Credit Agricole, French elegance and... the very first dark mode

Messenger, iOS, Slack... each and every one of those app utilises the dark mode, which has become the leading standard in the design of the mobile apps. The mobile app of Credit Agricole follows a much different approach towards the design of UI than the IKO app. It’s much more different when compared to its desktop version.

Half-transparent buttons, elegant and minimalist design of the icons, micro interactions and micro animations all contribute to great enjoyment in learning and using the app. Of course at first its going to be a little puzzling for the older audience and the people who are less versed in the world of mobile goodies. The advanced features are hidden in the interface, so while the app seems simple, there is more than meets the eye here. What’s interesting, Credit Agricole doesn’t force the choice of options onto its user. The money transfer, transaction history or the recipient list icons have the same size and coloration. The most distinctive element of the hamburger menu is the “my products” options which isdeemed the most important and so it’s the easiest one to locate. However, the thumb-zone of the app islimited by the icons situated in the upper corner of the app. Had they been placed in the more accessible space, the app could be used entirely with your thumb.

Well designed UX/UI is a key to success!

intech is about to experience a very intense, yet productive period. We will be able to choose from many different ways of how to design the mobile apps revolving around the domain of banking. We will surely witness the rise of humble start-ups which are going to take the world of mobile banking bya storm. We will be capable of creating an enjoyable experience for millions of mobile users which will be tailored to their needs. We are faced with a chance of reimagining the once unpleasant chore of interaction with the bank into an enjoyable, easily accessible experience.

After all, designing a marvellous UX and UI is a part of designing a positive experience of any mobile user!

Most viewed


Never miss a story

Stay updated about Nextrope news as it happens.

You are subscribed

AI-Driven Frontend Automation: Elevating Developer Productivity to New Heights

Gracjan Prusik

11 Mar 2025
AI-Driven Frontend Automation: Elevating Developer Productivity to New Heights

AI Revolution in the Frontend Developer's Workshop

In today's world, programming without AI support means giving up a powerful tool that radically increases a developer's productivity and efficiency. For the modern developer, AI in frontend automation is not just a curiosity, but a key tool that enhances productivity. From automatically generating components, to refactoring, and testing – AI tools are fundamentally changing our daily work, allowing us to focus on the creative aspects of programming instead of the tedious task of writing repetitive code. In this article, I will show how these tools are most commonly used to work faster, smarter, and with greater satisfaction.

This post kicks off a series dedicated to the use of AI in frontend automation, where we will analyze and discuss specific tools, techniques, and practical use cases of AI that help developers in their everyday tasks.

AI in Frontend Automation – How It Helps with Code Refactoring

One of the most common uses of AI is improving code quality and finding errors. These tools can analyze code and suggest optimizations. As a result, we will be able to write code much faster and significantly reduce the risk of human error.

How AI Saves Us from Frustrating Bugs

Imagine this situation: you spend hours debugging an application, not understanding why data isn't being fetched. Everything seems correct, the syntax is fine, yet something isn't working. Often, the problem lies in small details that are hard to catch when reviewing the code.

Let’s take a look at an example:

function fetchData() {
    fetch("htts://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((error) => console.error(error));
}

At first glance, the code looks correct. However, upon running it, no data is retrieved. Why? There’s a typo in the URL – "htts" instead of "https." This is a classic example of an error that could cost a developer hours of frustrating debugging.

When we ask AI to refactor this code, not only will we receive a more readable version using newer patterns (async/await), but also – and most importantly – AI will automatically detect and fix the typo in the URL:

async function fetchPosts() {
    try {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/posts"
      );
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error(error);
    }
}

How AI in Frontend Automation Speeds Up UI Creation

One of the most obvious applications of AI in frontend development is generating UI components. Tools like GitHub Copilot, ChatGPT, or Claude can generate component code based on a short description or an image provided to them.

With these tools, we can create complex user interfaces in just a few seconds. Generating a complete, functional UI component often takes less than a minute. Furthermore, the generated code is typically error-free, includes appropriate animations, and is fully responsive, adapting to different screen sizes. It is important to describe exactly what we expect.

Here’s a view generated by Claude after entering the request: “Based on the loaded data, display posts. The page should be responsive. The main colors are: #CCFF89, #151515, and #E4E4E4.”

Generated posts view

AI in Code Analysis and Understanding

AI can analyze existing code and help understand it, which is particularly useful in large, complex projects or code written by someone else.

Example: Generating a summary of a function's behavior

Let’s assume we have a function for processing user data, the workings of which we don’t understand at first glance. AI can analyze the code and generate a readable explanation:

function processUserData(users) {
  return users
    .filter(user => user.isActive) // Checks the `isActive` value for each user and keeps only the objects where `isActive` is true
    .map(user => ({ 
      id: user.id, // Retrieves the `id` value from each user object
      name: `${user.firstName} ${user.lastName}`, // Creates a new string by combining `firstName` and `lastName`
      email: user.email.toLowerCase(), // Converts the email address to lowercase
    }));
}

In this case, AI not only summarizes the code's functionality but also breaks down individual operations into easier-to-understand segments.

AI in Frontend Automation – Translations and Error Detection

Every frontend developer knows that programming isn’t just about creatively building interfaces—it also involves many repetitive, tedious tasks. One of these is implementing translations for multilingual applications (i18n). Adding translations for each key in JSON files and then verifying them can be time-consuming and error-prone.

However, AI can significantly speed up this process. Using ChatGPT, DeepSeek, or Claude allows for automatic generation of translations for the user interface, as well as detecting linguistic and stylistic errors.

Example:

We have a translation file in JSON format:

{
  "welcome_message": "Welcome to our application!",
  "logout_button": "Log out",
  "error_message": "Something went wrong. Please try again later."
}

AI can automatically generate its Polish version:

{
  "welcome_message": "Witaj w naszej aplikacji!",
  "logout_button": "Wyloguj się",
  "error_message": "Coś poszło nie tak. Spróbuj ponownie później."
}

Moreover, AI can detect spelling errors or inconsistencies in translations. For example, if one part of the application uses "Log out" and another says "Exit," AI can suggest unifying the terminology.

This type of automation not only saves time but also minimizes the risk of human errors. And this is just one example – AI also assists in generating documentation, writing tests, and optimizing performance, which we will discuss in upcoming articles.

Summary

Artificial intelligence is transforming the way frontend developers work daily. From generating components and refactoring code to detecting errors, automating testing, and documentation—AI significantly accelerates and streamlines the development process. Without these tools, we would lose a lot of valuable time, which we certainly want to avoid.

In the next parts of this series, we will cover topics such as:

Stay tuned to keep up with the latest insights!

The Ultimate Web3 Backend Guide: Supercharge dApps with APIs

Tomasz Dybowski

04 Mar 2025
The Ultimate Web3 Backend Guide: Supercharge dApps with APIs

Introduction

Web3 backend development is essential for building scalable, efficient and decentralized applications (dApps) on EVM-compatible blockchains like Ethereum, Polygon, and Base. A robust Web3 backend enables off-chain computations, efficient data management and better security, ensuring seamless interaction between smart contracts, databases and frontend applications.

Unlike traditional Web2 applications that rely entirely on centralized servers, Web3 applications aim to minimize reliance on centralized entities. However, full decentralization isn't always possible or practical, especially when it comes to high-performance requirements, user authentication or storing large datasets. A well-structured backend in Web3 ensures that these limitations are addressed, allowing for a seamless user experience while maintaining decentralization where it matters most.

Furthermore, dApps require efficient backend solutions to handle real-time data processing, reduce latency, and provide smooth user interactions. Without a well-integrated backend, users may experience delays in transactions, inconsistencies in data retrieval, and inefficiencies in accessing decentralized services. Consequently, Web3 backend development is a crucial component in ensuring a balance between decentralization, security, and functionality.

This article explores:

  • When and why Web3 dApps need a backend
  • Why not all applications should be fully on-chain
  • Architecture examples of hybrid dApps
  • A comparison between APIs and blockchain-based logic

This post kicks off a Web3 backend development series, where we focus on the technical aspects of implementing Web3 backend solutions for decentralized applications.

Why Do Some Web3 Projects Need a Backend?

Web3 applications seek to achieve decentralization, but real-world constraints often necessitate hybrid architectures that include both on-chain and off-chain components. While decentralized smart contracts provide trustless execution, they come with significant limitations, such as high gas fees, slow transaction finality, and the inability to store large amounts of data. A backend helps address these challenges by handling logic and data management more efficiently while still ensuring that core transactions remain secure and verifiable on-chain.

Moreover, Web3 applications must consider user experience. Fully decentralized applications often struggle with slow transaction speeds, which can negatively impact usability. A hybrid backend allows for pre-processing operations off-chain while committing final results to the blockchain. This ensures that users experience fast and responsive interactions without compromising security and transparency.

While decentralization is a core principle of blockchain technology, many dApps still rely on a Web2-style backend for practical reasons:

1. Performance & Scalability in Web3 Backend Development

  • Smart contracts are expensive to execute and require gas fees for every interaction.
  • Offloading non-essential computations to a backend reduces costs and improves performance.
  • Caching and load balancing mechanisms in traditional backends ensure smooth dApp performance and improve response times for dApp users.
  • Event-driven architectures using tools like Redis or Kafka can help manage asynchronous data processing efficiently.

2. Web3 APIs for Data Storage and Off-Chain Access

  • Storing large amounts of data on-chain is impractical due to high costs.
  • APIs allow dApps to store & fetch off-chain data (e.g. user profiles, transaction history).
  • Decentralized storage solutions like IPFS, Arweave and Filecoin can be used for storing immutable data (e.g. NFT metadata), but a Web2 backend helps with indexing and querying structured data efficiently.

3. Advanced Logic & Data Aggregation in Web3 Backend

  • Some dApps need complex business logic that is inefficient or impossible to implement in a smart contract.
  • Backend APIs allow for data aggregation from multiple sources, including oracles (e.g. Chainlink) and off-chain databases.
  • Middleware solutions like The Graph help in indexing blockchain data efficiently, reducing the need for on-chain computation.

4. User Authentication & Role Management in Web3 dApps

  • Many applications require user logins, permissions or KYC compliance.
  • Blockchain does not natively support session-based authentication, requiring a backend for handling this logic.
  • Tools like Firebase Auth, Auth0 or Web3Auth can be used to integrate seamless authentication for Web3 applications.

5. Cost Optimization with Web3 APIs

  • Every change in a smart contract requires a new audit, costing tens of thousands of dollars.
  • By handling logic off-chain where possible, projects can minimize expensive redeployments.
  • Using layer 2 solutions like Optimism, Arbitrum and zkSync can significantly reduce gas costs.

Web3 Backend Development: Tools and Technologies

A modern Web3 backend integrates multiple tools to handle smart contract interactions, data storage, and security. Understanding these tools is crucial to developing a scalable and efficient backend for dApps. Without the right stack, developers may face inefficiencies, security risks, and scaling challenges that limit the adoption of their Web3 applications.

Unlike traditional backend development, Web3 requires additional considerations, such as decentralized authentication, smart contract integration, and secure data management across both on-chain and off-chain environments.

Here’s an overview of the essential Web3 backend tech stack:

1. API Development for Web3 Backend Services

  • Node.js is the go-to backend runtime good for Web3 applications due to its asynchronous event-driven architecture.
  • NestJS is a framework built on top of Node.js, providing modular architecture and TypeScript support for structured backend development.

2. Smart Contract Interaction Libraries for Web3 Backend

  • Ethers.js and Web3.js are TypeScript/JavaScript libraries used for interacting with Ethereum-compatible blockchains.

3. Database Solutions for Web3 Backend

  • PostgreSQL: Structured database used for storing off-chain transactional data.
  • MongoDB: NoSQL database for flexible schema data storage.
  • Firebase: A set of tools used, among other things, for user authentication.
  • The Graph: Decentralized indexing protocol used to query blockchain data efficiently.

4. Cloud Services and Hosting for Web3 APIs

When It Doesn't Make Sense to Go Fully On-Chain

Decentralization is valuable, but it comes at a cost. Fully on-chain applications suffer from performance limitations, high costs and slow execution speeds. For many use cases, a hybrid Web3 architecture that utilizes a mix of blockchain-based and off-chain components provides a more scalable and cost-effective solution.

In some cases, forcing full decentralization is unnecessary and inefficient. A hybrid Web3 architecture balances decentralization and practicality by allowing non-essential logic and data storage to be handled off-chain while maintaining trustless and verifiable interactions on-chain.

The key challenge when designing a hybrid Web3 backend is ensuring that off-chain computations remain auditable and transparent. This can be achieved through cryptographic proofs, hash commitments and off-chain data attestations that anchor trust into the blockchain while improving efficiency.

For example, Optimistic Rollups and ZK-Rollups allow computations to happen off-chain while only submitting finalized data to Ethereum, reducing fees and increasing throughput. Similarly, state channels enable fast, low-cost transactions that only require occasional settlement on-chain.

A well-balanced Web3 backend architecture ensures that critical dApp functionalities remain decentralized while offloading resource-intensive tasks to off-chain systems. This makes applications cheaper, faster and more user-friendly while still adhering to blockchain's principles of transparency and security.

Example: NFT-based Game with Off-Chain Logic

Imagine a Web3 game where users buy, trade and battle NFT-based characters. While asset ownership should be on-chain, other elements like:

  • Game logic (e.g., matchmaking, leaderboard calculations)
  • User profiles & stats
  • Off-chain notifications

can be handled off-chain to improve speed and cost-effectiveness.

Architecture Diagram

Below is an example diagram showing how a hybrid Web3 application splits responsibilities between backend and blockchain components.

Hybrid Web3 Architecture

Comparing Web3 Backend APIs vs. Blockchain-Based Logic

FeatureWeb3 Backend (API)Blockchain (Smart Contracts)
Change ManagementCan be updated easilyEvery change requires a new contract deployment
CostTraditional hosting feesHigh gas fees + costly audits
Data StorageCan store large datasetsLimited and expensive storage
SecuritySecure but relies on centralized infrastructureFully decentralized & trustless
PerformanceFast response timesLimited by blockchain throughput

Reducing Web3 Costs with AI Smart Contract Audit

One of the biggest pain points in Web3 development is the cost of smart contract audits. Each change to the contract code requires a new audit, often costing tens of thousands of dollars.

To address this issue, Nextrope is developing an AI-powered smart contract auditing tool, which:

  • Reduces audit costs by automating code analysis.
  • Speeds up development cycles by catching vulnerabilities early.
  • Improves security by providing quick feedback.

This AI-powered solution will be a game-changer for the industry, making smart contract development more cost-effective and accessible.

Conclusion

Web3 backend development plays a crucial role in scalable and efficient dApps. While full decentralization is ideal in some cases, many projects benefit from a hybrid architecture, where off-chain components optimize performance, reduce costs and improve user experience.

In future posts in this Web3 backend series, we’ll explore specific implementation details, including:

  • How to design a Web3 API for dApps
  • Best practices for integrating backend services
  • Security challenges and solutions

Stay tuned for the next article in this series!