Bank on

‍

Introduction

This is a conceptual assignment that I created as UI-part of the UX Design Institute course. In order to expand my knowledge of user interface design, I took this course from the UX Design Institute. During my training, I did exercises to practice the theory I was studying. I assembled mood boards, generated icons and selected a color palette and developed a prototype and UI design. As a result, there were 9 screens (designs) for the bank application. The duration of the project was from December 2022 - April 2023 (part-time).

• Role: UX/UI Designer
• Duration: 3 months
• Tools: Figma

‍

‍

About the project

• ‍Mood board‍

I researched potential competitors to determine where I went next, creating a mood board which later helped to develop the UI design.

• Fonts‍

Good typography is fundamental to UI design. So I chose the fonts and created a type scale for the bank application. The main goal was to meet the requirements of the brand and this are Playful, Clear and Trustworthy.

• Colour palette‍

The color palette plays a major role in conveying brand identity in the UI. I researched other products and brands of banking apps that inspired me. Before finally creating a color palette for the app that contained all the brand values.

• Icons‍

Iconography and images can greatly influence the user interface. An important aspect was to refine icons that would keep the brand values in mind: Playful, Clear and Trustworthy

• Responsive design‍

I designed three responsive desktop screens, tablet and mobile: nine screens in total.

‍

‍

The goal was to create a user interface for the new banking application. The customer would like to create a thrill in the financial world with an intuitive web application for personal banking. The design should work correctly on desktop computers, tablets and mobile devices.

‍

‍

Overview

In total, it was necessary to develop three types of screens:

🔵 My accounts

🔵 Current account

🔵 My expenses

‍

Basic wireframes for three screens were also received from the client, which are presented below. All the data in the frames had to be used in the design. The design of the user interface was to comply with the following brand principles:

• Clear

Customer - bank that works with the user’s money. Therefore, the main goal of the banking application was to develop a design that would present the information in a logical and orderly manner.

• Trustworthy

The user must first trust the product

• Colour palette

The color palette plays a major role in conveying brand identity in the UI. I researched other products and brands of banking apps that inspired me. Before finally creating a color palette for the app that contained all the brand values.

• Playful

When using the product, the user should only receive positive emotions when using the application. Playful brand identity can manifest through color, animation and shape

‍

Icons, Typography and Colors

• Icons

Using a set of icons made the interface more harmonious and user-friendly. The main criterion for selecting and refining icons was similarity and consistency.

• Typography

For the headlines, I chose the sans serif Sintony font to bring the focus to the headline. I chose Sans Serif for the body text for the easy of reading and viewing the information so that the user doesn’t  have to spend a lot of time reading the text. Having analyzed many applications and sites of banks I have concluded that many use Sans Serif. The font was supposed to be playful, clear and trustworthy so for the main text I chose Poppins.

• Colour palette

The color palette plays a major role in conveying brand identity in the UI. I researched other products and brands of banking apps that inspired me. Before finally creating a color palette for the app that contained all the brand values.

• Colors

For the font to be readable, I chose dark but not black (#1E2336). The main color I chose is blue because it is perceived as safe especially for financial applications. At the same time, it is associated with wealth. Blue combines well with orange. The orange color symbolizes energy and the user will always pay attention when viewing important information.

‍

‍

‍

Decisions in choosing a design palette

Desktop. My accounts. Beginning…

I started designing the user interface with a light blue background, a horizontal menu, and blue cards. The blue horizontal menu turned out to be too heavy, because it draws all the attention of the user, so I decided to make it white but with a shadow. This had to be done so that the menu was not the same color as the background. I chose blue because it symbolizes constancy and trust.

I wanted a color combination that was effective at attracting attention. From research, it was found that “blue on white” was the expert’s first choice for attention grabbing.  I changed the color of the vertical menu to white and it reduced screen saturation. In addition, to convey the playfulness of the interface, I chose icons with smoothed corners.

The first thing I had to do was to develop a design that was playful and understandable so the user wants to use the application, so I chose Poppins, which is often used in the design of the user interfaces. The Sintony font with a slightly square structure and smooth bar modulation was chosen for the headers. It gives any text a calm and clear feeling.

‍

Tablet

‍After I developed the desktop screens, I started developing the tablet screens. The reason for the development of tablet screens was that tablet screens are a hybrid of mobile and desktop screens.  I tried to design the tablet screens so that the user can use the app on the tablet without much effort. In order not to clutter the screen, I changed the vertical menu, to leave only icons.

‍The top menu I combined and added it all to the "Hamburger Menu".For the mobile screen, I moved most of the content outside the screen because the screen size doesn’t allow for all content. In the mobile version, I divided the virtual cards and additional accounts as there was free space on the screen to place it all together.

‍

Current account

Desktop

One of the popular pages when using a bank application is the transactions page. Having reviewed the various banking applications, I have concluded that the first thing to display is the information on the physical card that is in the client’s possession. I wanted to develop a real app design, so I paid little attention to Dribble, Behance.

On mobbin.com I found a lot of screenshots of real banking applications that helped me to implement the current project. In order for the user to distinguish the types of transactions from each other I added icons to each transaction. It separates these transactions visually from each other. In order to use all the space, I showed you how the work screen will look if the user wants to learn more about the operation of interest.

‍

‍

Tablet. Mobile

Based on the desktop screen I developed the screens of tablet and mobile application. The main criterion was to give priority to card statistics and transaction history.

I started developing screens by placing components that I used in the desktop version only in a smaller version. Since there wasn’t that much space, I took the payment status column out of the transaction history, because you can see it by clicking on the transaction status.

Mobile versions often use horizontal scrolling, I used the same action so that the user doesn’t have to learn a new pattern. In addition, the pagination indicates that the user has several card available.

‍

‍

My spendings

Desktop

The user keeps track of his spending statistics from time to time. I first created a desktop screen. For more convenient use of this application function I added a button with a period in which the user can see the statistics (12 months, 6 months, 3 months, 30 days, 7 days). This will allow the user to analyse the costs and draw conclusions about what can be reduced and what can be affordable.

After the chart I showed the “Saving Goal“ to which the user from time to time transfer money. For example, it can be monthly transfers for the upcoming vacation or purchase of an apartment.

After the introduction of all the above functions, I had some space for another block. Since the previous block was “Saving Goal”, I decided to add a block “Transfer in Saving Goal”.

This will allow the user to remember to make a timely transfer to their target goal or the user can activate a feature in which the system automatically transfers a certain amount from the main account each month.

‍

‍

Tablet. Mobile

After developing the desktop screen, I started developing the tablet and mobile screen. I used the same styling techniques I used on the desktop.

In the tablet version there was no space for buttons that would show the period in which the user would want to see statistics, so instead of a button I replaced it with a drop-down menu. This saved space and the design became more concise.

In addition, in the tablet version I showed a block with "Saving Goal" in which there is a progress scale showing how much is left to transfer money to achieve the desired goal.

In the mobile version of the screen I left the buttons that the user can click when viewing the statistics of their spending. The user likes to use horizontal scrolling so there is enough space for these buttons.

‍

‍

Accessibility

To ensure accessibility for as many users as possible, including people who unfortunately have health issues, the color contrast of all content has been checked to meet API standards.

Mostly I worked in Figma and found there is a plugin called "Stark" that helps to check the color contrast.

I paid a lot of attention to accessibility because people with visual impairment, color blindness and reading difficulties are part of the target audience of the banking application so it’s very important to consider the contrast when creating design.

‍