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:

  1. 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:

Tab bar animation: Prototype (left) and implemented version in Swift (right)

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:

Chat UI animation: Prototype (left) and implemented version in Swift (right)

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.

Android and iOS navigation and platform patterns


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

We made this open-banking concept for the HackYeah 2018 hackathon organized by PKO Bank Polski

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!


Source link: drops. —  An instant payment platform: UX/UI case study.


Por favor digite seu comentário!
Por favor, digite seu nome aqui

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.