Banq

Banq is a concept designed to showcase best practices of creating a banking app. With a scalable design system and modern look.

Featured
Highlighted section

Fintech has become an integral part of our daily lives, when considering the apps we use to make payments, and manage our money.

After researching all the most popular apps within fintech, I noticed that many of them still have design inconsistencies.

Onboarding

If a user opens the app without being logged in, three slides that can be swiped presenting the main benefits of the app are shown.

User flowUser flow
User flow
User flowUser flow

A conclusion that many product designers have reached, is to create a single page for sign up and login. This makes a lot of sense, considering that both features in this case require a code received by SMS to proceed.

The following part of the onboarding flow shows how the sign up process works. Login works in a very similar way, but only asking for the SMS code and PIN number.

User flow
User flow
User flow
User flow
User flow
User flowUser flow
User flow
User flow

Top Level Features

On the home screen, we can see a summary of the information that is the most useful to the user. Such as balance for each currency, and recent transaction history.

We can also see an 'Insights' section with two different cards. One for spending statistics, and the other one visualizing a savings goal.

User flowUser flow
User flowUser flow
User flowUser flow
User flowUser flow
User flow

Furthermore, we can see the outlines of the transactions, individual transaction information, spending, and savings screen.

Essential Features

The most important part of a banking app is payment logic. Here we can see the initial screens for the cards overview, payment, and top-up with the option to add money to the account.

User flowUser flow
User flow
User flow
User flow
User flow

We can also see the account screen with an overview of options, and an upgrade button highlighted in blue.

Website

The Banq app is supported by a website. It follows the same design methodology, and acts as a way to promote and educate potential customers on the product. The source file can be viewed here.

User flow
User flow
User flow
User flow
User flow
User flow
User flow
User flow
User flow
User flow

Project Structure

To make the design scalable, and easier to hand over to a developer, the design for both mobile and web are organized as design systems.

As different needs emerge in the future, these design systems can be expanded upon to accommodate more functionality.

User flow
User flowUser flowUser flowUser flowUser flow
User flow
User flow
User flow