drops. — An instant payment platform: UX/UI case study.
It’s no doubt that fintech is indeed a hot topic nowadays. Blockchain, bitcoin, P2P lending, AI, VR, tokenization and all the buzzwords are all around. But sometimes you need a better design and not just the technology to kick wicked financial problems in the ass!
Messaging is instant but usually not your payments… Here is a showcase of our chat-based interface and UX/UI challenges.
Instant payment. What is that?
Instant payment solutions require a new digital infrastructure and enable a new payment logic as well as make transactions available within 5 seconds on the account of the recipient, 24 hours a day, 365 days a year (European Central Bank)
An additional feature of this emerging technology is that you can send money by using secondary identifiers, so knowing a phone number or email address is just enough to refer to your friends, so all the customer IDs and legacy authentication processes could soon be enhanced.
Cash is still king? Numbers are saying something else!
Instant payment is now working in other European countries and the emerging trend of cashless payment is also in favor of great new services and products on the market.
In Denmark, 27% of all bank transfers were made instant payment since the system was introduced in 2014. In Eastern Europe and in Hungary however, the new payment service will be introduced on the 1st of July 2019.
Consumers will eventually be looking for instant payment solutions in Eastern Europe, and they will also be keen on selecting service providers and financial institutions who will allow them to use this technology. The market is currently lacking solutions like this, so we decided to tackle this problem!
What is drops.?
We at Family Finances developed an easily customizable, chat-based money transfer application in order to take advantage of the instant payment technology.
- The app can be used intuitively and allows you to send money through a well-known chat interface.
- Registration with secondary identifiers ensures a comfortable user experience.
- The peer-to-peer payment requests in the app simplify cost sharing.
- Communication via the built-in chatbots makes it easy to access invoices and reduces the number of late payments.
It’s a win-win situation
I believe that feasible and innovative products have never been a zero-sum game; here’s why instant payment solutions can be mutually beneficial for all parties:
- Banks can grow the number of their retail customers and the number of transactions per customer. They can also offer a new digital experience which can drive loyalty.
- Users will benefit from the easy to use, peer-to-peer transactions which is available 24/7/365. They can also share costs or split bills by initiating payment requests and they can transfer money immediately to family, friends, service providers.
- Service provider’s liquidity is enhanced due to the instant earnings. No more delays with the rent or the overheads. (As seen in this hilarious video campaign from the Middle-East.)
UX research
We made a deep dive into both qualitative and quantitative research: According to a Forbes report, 68% of Millennials use several different chat platforms on a daily basis and this trend is worldwide. According to LivePerson survey, 7 out of 10 youngsters in Western nations prefer digital communication. According to Openmarket’s research, 60% of Gen Y would like to connect with their favourite brand or business via chat. The most exciting part of my research was the finding that corporate, official text does not bother users, but in most cases it creates trust.
The idea of drops. was based on the hypothesis that chat is a well-known and intuitive interface for everyone. The user interviews have confirmed this idea, and conversations with both older and younger interviewees have turned into brainstorming sessions about the potential exploitation of chat and chatbots. We also figured out that:
- Parents would like to respond to their children’s ad hoc financial problems instantly.
- For young people, talking about personal finances feels pretty awkward.
- Chat support gives people a sense of security.
Design principles and UI challenges
When we started to work on drops. we bumped into “road-blocks” and challenges along the way. But being mindful of our design principles was helping us design a better product and helped us grow as a team improving communication and craft. Here are our principles:
- Innovative/Disruptive/Unique
We aimed at ditching the current best practices and we wanted to create a very unique experience. This means that we challenged the business-as-usual attitude. Instead of using a hamburger menu or usual 4-item tab bar, we decided to create something different. So we came up with chat-based conversations and a simple and dynamic tab bar.
“Show, don’t tell!” = High-fidelity prototyping
In order to create such an app, the collaboration between designers and developers was crucial. When designing such a novel UI, it was essential to improve our communication. Keeping in mind the best advice of the design-thinking methodology, we started to show high-fidelity prototyping to the development team and reduced the talking.
It became a communication therapy between developers and designers and we realized that our life-jacket in the ocean of team dynamics is the use of tools that actually reduces time and money spent on building an exact interaction. If you specifically show developers what kind of animations you want, you can avoid almost all the misunderstandings.
We tried Framer X, Invision Studio but ended up using Principle for modeling the UI animations. We bumped into performance issues while using Framer X and since we used to create prototypes with Framer Studio, and the transition from auto-code to React was also a bit of a hassle. Invision Studio, however, looked more promising, so we ended up using its “little brother”, Principle, because the learning curve was so extremely fast!
You can see the tab bar animation on the first video which was inspired by a kickass designer myth Oleg Frolov. The prototype was made in Principle (early-on without branding and right after we finished the wireframes). The implemented version shows that we made a couple of iterations so the interaction became much smoother. It was a real team effort:
2. Simple/Lean/Lightweight
We see banking apps similar to alien spaceships. They are overloaded with nice-to-have functions like buying highway tickets, branch locators, fx converters, etc. Heavy-weight apps with countless features won’t create delightful experiences, especially for younger generations. So we cut the feature list. Our main approach was to find a way how we might fulfill people’s needs smarter and with simplified flows.
We created a fluid interface with detailed animations. Here you can see our take on the chat-based payment flow. In the implemented version we simplified the super complex animation:
Another UI challenge was to adapt to Material Design and the Human Interface guidelines while keeping in mind that we want to create something simple and lightweight. You can see, for example on the left Android screenshot, that the bank transfer and the sharing function have been added to the top menu, while on iOS they are located at the bottom of the screen.
3.Conversational
Chat-based transactions, chat-based financial advice, chat-based everything.
Our third principle was to create an app which is also a good communication interface. We are now in the phase of mapping the financial capabilities of chatbots, finding the right platform for their construction, and examining how to integrate functionality into Facebook Messenger and other platforms.
On the market, we must see that global players already made a step forward. Chase by JP Morgen created an automatic savings chatbot. Bank of America is leading the game with its AI-driven chatbot, Erika. She is an intelligent digital assistant who helps clients make smarter financial decisions. Capital One recently launched Eno, a text chatbot that helps customers manage their money more consciously. Users can ask Eno about their account balance, payment history, and credit line and it also helps users with the onboarding process.
We are currently building chatbots with different use-cases:
…to help people save money
…to aggregate information
…to visualize transaction history
…to give insight and advice
Where are we now and what are the next steps
The application’s MVP functionalities are running on Android and iOS. Our solution is 100% white-label which means that we can customize it within minutes to fit it to any bank’s already existing branding.
We are also working on watchOS and Google assistant integration. Here is a sneak peek:
We also participated in an invitation-only hackathon powered by MKB Bank and Oracle and linked the app to the endpoints of many banking APIs.
The modular design of the application allows easy scalability and fast integration, so we are on a fast-track to show banks in Eastern Europe that payments should be instant and hassle-free!
If you enjoyed this post, click 👏 . Thanks for the support!
Follow my design journey at:
