Fintech has immensely disrupted the way business is done in the financial services industry, taking the user experience to a totally new level. With the sector's rapid growth, consumers choose e-banking, digital wallets and cryptocurrency over traditional banking en masse. A huge demand requires more innovation and hence more advanced digital products to meet customers' needs. And this means a big workload for UX designers!
Creating a fintech digital product is a challenging task. Regulation compliances, familiarity with financial jargon and cybersecurity issues - so many things UX design team in fintech should keep an eye on simultaneously.
In this article we will not be focusing on the whole process of building a fintech app. Instead, we'll look into the aspect of prototyping and using live data for your prototype, to substantially reduce development costs and save time.
Real vs Live Data in Prototyping
Sometimes the terms real and live data overlap. However, depending on the type of the project you're working on, the difference can be crucial.
Real data refers to actual data that has been collected from past transactions, user behavior, or other sources. This data can be used to create realistic and accurate prototypes that closely resemble the final product. Real-data prototypes are definitely a huge leap forward compared to dummy-data ones, but they are still static and do require pre-population of data. Of course, they are significantly more accurate than low-fidelity paper prototypes or clickable wireframes. However, in some cases it is just not enough to properly validate functionality of the prototype.
Live data, on the other hand, refers to data generated in real-time. With this type of data you can test functionality of the product under real-world conditions and identify issues that aren’t apparent “solely” using real data.
Simply put, live data is dynamic. It’s also the user’s own data, relevant to a particular user. For projects that require testing dynamic user experiences, live-data prototypes are a necessity.
Prototypes using live data closely mimic the end product in that they allow test users to interact with the prototype in real time by adding live inputs. Integrating live data into prototypes is of high value for practically any app to make a user feel more involved. So, you can imagine how especially vital it is for fintech apps, which typically involve a lot of data to show to or capture from users.
Prototyping with Live Data in Fintech
Prototyping in fintech serves to validate the functionality, security, and usability of the future final product. It largely differs from prototyping processes in other industries due to its more data-driven nature. For example, fintech prototypes need to consider the security and privacy of user data, which may not be as critical for e-commerce prototypes.
Financial services industry requires more focus on precision from UX design teams unlike other less data-heavy industries. It is particularly important for prototypes of fintech digital products to provide a degree of personalisation for test users. The core concept of fintech prototyping is capturing the right data from users, and showing them the data that are relevant to them. That's why real but not live data for a prototype of a banking app is usually not enough.
Users must test fintech apps in real-world scenarios to ensure they function correctly. This includes testing the app’s response to different user inputs, network conditions, and device types. For instance, we highly recommended to display account balances, transaction history, or investment performance in a prototype.
Live data is also widely used to test the security features of the product, such as encryption and data protection. With static data it is not easy to identify and address potential security issues that could harm the user experience. This way, live-data prototypes increase users' trust in the product.
Coding: A Common Problem in Live-Data Prototyping
Live-data prototypes are built with HTML, CSS, and Javascript most of the time, which can become an obstacle for many designers.
Creating a live-data prototype is essentially coding. Integrating the live data into prototypes involves connecting data sources using APIs, and then using HTML to display that data in a user-friendly way. Finally, encryption might be needed to ensure that the live data is secure and protected from unauthorised access.
As you can see, it's not really a job for a UX/UI designer. Instead they'll need to ask developers to create the prototype, or ideally, work together with developers in a product team on creating a live data prototype.
The main disadvantage of creating live data prototypes using this approach is not just that it's more complex, but because it's also substantially more expensive.
If you don't want to learn code or ask developers build prototypes for you, you'll have to look for alternatives. Luckily, they do exist in a form of low- or no-code prototyping tools.
Alternative: No-Code Prototyping Tools
No-code platforms are a perfect solution for UX designers. Apart from integrating live data into prototypes, they also offer a rich advanced prototyping functionality. Although it's not always common for prototyping platforms to offer functioning form inputs, we've collected several tools that do provide this option:
weave.ly
Weave.ly is a no-code prototyping tool that works as a plugin for Figma. This means that if you're a Figma designer, you won't need to import your designs to any third-party tools, but can stay inside the Figma environment. Building high-fidelity prototypes with live data is at the core of the plugin's functionality. You can easily create a prototype that will render user input dynamically, as well as register and store user data.
On top of that, weave.ly provides other features essential for fintech prototyping that have a great impact on the user experience. This includes conditional logic, complex calculations and much more.
How does it work? - In short, you'll need to assign functionalities to specific layers of your design. By linking components (building blocks), you'll determine how data flows across your design. Even if it doesn't sound straightforward at the moment, trust us, it's actually not that complicated. Furthermore, a bunch of tutorials in the weave.ly academy are there to navigate you from A to Z.
As a result, you'll get a fully functional web app that captures and stores users' live data, and of course you won't need a single line of code.
Take a look at the demo of an insurance onboarding built 100% with weave.ly.
UXPin
UXPin is a complex design tool that offers prototyping functionality along with many other features, such as wireframing, accessibility, creating UI mockups and more. Prototypes built with this tool include functioning graphs and data visualisations, sorting filters, real data and dynamic user experiences.
Their new technology UXPin Merge lets you build fully interactive and advanced prototypes in a few minutes.
UXPin is definitely a powerful tool, but what makes it different from weave.ly is that it's a separate design platform. Therefore, if you're a Figma user, you might go for a Figma plugin instead of a third-party tool.
Bravo Studio
Bravo Studios is another no-code tool that directly integrates with Figma. In a similar fashion to weave.ly it enables Figma users to tag layers of their design with various functionalities. It allows you to create functioning inputs and add conditional logic to your prototype.
However, in contrast to weave.ly it takes significantly more effort to integrate live data into your prototype. Using Bravo Studios you’ll need to setup an external database and APIs in order to data to be stored to or read from an external source. In contrast, these functionalities are integrated into weave.ly and specifically made for UX designers.
