back to portfolio

vPay - payment transaction application

UX/UI redesign

The aim of the project was to improve the existing payment application through redesign – enhance the user experience, simplify navigation, and provide better oversight of transactions and user accounts. The focus was on modernizing the interface, aligning with legal regulations, and preserving the functionality that users were already accustomed to.

The aim of the project was to improve the existing payment application through redesign – enhance the user experience, simplify navigation, and provide better oversight of transactions and user accounts. The focus was on modernizing the interface, aligning with legal regulations, and preserving the functionality that users were already accustomed to.

The aim of the project was to improve the existing payment application through redesign – enhance the user experience, simplify navigation, and provide better oversight of transactions and user accounts. The focus was on modernizing the interface, aligning with legal regulations, and preserving the functionality that users were already accustomed to.

Client

Client

Vakel

Industry

Industry

Finance

Finance

Service

Service

UX/UI design

UX/UI design

Project duration

Thumbnail image for Vakel payment traffic
Thumbnail image for Vakel payment traffic
Thumbnail image for Vakel payment traffic

The goal of the project

The goal of the project was to redesign the existing payment application, focusing on modernizing the user interface and optimizing current functionalities. While the core user experience flows had to remain unchanged due to user habits and business logic, special emphasis was placed on improving problematic parts of the application. The redesign included refreshing the visual identity, introducing modern design principles, and improving usability through clearer information layout and a simplified user experience.

Drawing and wireframe

Hand drawing - lofi wireframe of the Vakel Pay application page
Wireframe of the vakel pay application page

Final prototype

High fidelity prototype of the application page Vakel Pay

Color palette

Based on the predefined colors - red, gold, and gray by which the brand is recognizable, we formed a palette of neutral, primary, and accent colors.

The selected color palette is designed to instill confidence in users, ease navigation through complex financial processes, and provide a modern visual experience. This color palette is carefully balanced between formality and accessibility, providing a sense of security and control – key values in payment transactions. The design remains modern yet maximally functional, with visual consistency across all elements of the application.

#FFFFFF

#F8F9FD

#000000

#6D6E71

#B92025

#DBBF94

Typography

The font Inter was chosen for this project, a modern sans-serif typography created with a focus on readability and digital environments. Inter is designed specifically for user interfaces, making it an ideal choice for a complex application such as a payment processing system.

Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890 ±!@#$%^&*()

Development Path

The project began with a detailed exploration of the payment industry and legislative guidelines. Competing systems were analyzed to identify best practices and potential points for improvement.

In collaboration with sector directors, the legal team, and project managers, key system requirements were defined. Based on this, use cases were developed that covered all main user flows – from registration to executing transactions.

Following this, the phase of creating initial sketches and wireframes took place, after which a complete UI system was developed with carefully chosen typography and colors. The project was finalized with the creation of an interactive prototype in the Figma tool, which was used for validation and preparation for further development.

Through thorough research, continuous collaboration with all involved teams, and an iterative design approach, a solid foundation has been established for an application that meets high standards of security, compliance, and user experience.

The goal of the project

The goal of the project was to redesign the existing payment application, focusing on modernizing the user interface and optimizing current functionalities. While the core user experience flows had to remain unchanged due to user habits and business logic, special emphasis was placed on improving problematic parts of the application. The redesign included refreshing the visual identity, introducing modern design principles, and improving usability through clearer information layout and a simplified user experience.

Drawing and wireframe

Hand drawing - lofi wireframe of the Vakel Pay application page
Wireframe of the vakel pay application page

Final prototype

High fidelity prototype of the application page Vakel Pay

Color palette

Based on the predefined colors - red, gold, and gray by which the brand is recognizable, we formed a palette of neutral, primary, and accent colors.

The selected color palette is designed to instill confidence in users, ease navigation through complex financial processes, and provide a modern visual experience. This color palette is carefully balanced between formality and accessibility, providing a sense of security and control – key values in payment transactions. The design remains modern yet maximally functional, with visual consistency across all elements of the application.

#FFFFFF

#F8F9FD

#000000

#6D6E71

#B92025

#DBBF94

Typography

The font Inter was chosen for this project, a modern sans-serif typography created with a focus on readability and digital environments. Inter is designed specifically for user interfaces, making it an ideal choice for a complex application such as a payment processing system.

Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890 ±!@#$%^&*()

Development Path

The project began with a detailed exploration of the payment industry and legislative guidelines. Competing systems were analyzed to identify best practices and potential points for improvement.

In collaboration with sector directors, the legal team, and project managers, key system requirements were defined. Based on this, use cases were developed that covered all main user flows – from registration to executing transactions.

Following this, the phase of creating initial sketches and wireframes took place, after which a complete UI system was developed with carefully chosen typography and colors. The project was finalized with the creation of an interactive prototype in the Figma tool, which was used for validation and preparation for further development.

Through thorough research, continuous collaboration with all involved teams, and an iterative design approach, a solid foundation has been established for an application that meets high standards of security, compliance, and user experience.

The goal of the project

The goal of the project was to redesign the existing payment application, focusing on modernizing the user interface and optimizing current functionalities. While the core user experience flows had to remain unchanged due to user habits and business logic, special emphasis was placed on improving problematic parts of the application. The redesign included refreshing the visual identity, introducing modern design principles, and improving usability through clearer information layout and a simplified user experience.

Drawing and wireframe

Hand drawing - lofi wireframe of the Vakel Pay application page
Wireframe of the vakel pay application page

Final prototype

High fidelity prototype of the application page Vakel Pay

Color palette

Based on the predefined colors - red, gold, and gray by which the brand is recognizable, we formed a palette of neutral, primary, and accent colors.

The selected color palette is designed to instill confidence in users, ease navigation through complex financial processes, and provide a modern visual experience. This color palette is carefully balanced between formality and accessibility, providing a sense of security and control – key values in payment transactions. The design remains modern yet maximally functional, with visual consistency across all elements of the application.

#FFFFFF

#F8F9FD

#000000

#6D6E71

#B92025

#DBBF94

Typography

The font Inter was chosen for this project, a modern sans-serif typography created with a focus on readability and digital environments. Inter is designed specifically for user interfaces, making it an ideal choice for a complex application such as a payment processing system.

Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890 ±!@#$%^&*()

Development Path

The project began with a detailed exploration of the payment industry and legislative guidelines. Competing systems were analyzed to identify best practices and potential points for improvement.

In collaboration with sector directors, the legal team, and project managers, key system requirements were defined. Based on this, use cases were developed that covered all main user flows – from registration to executing transactions.

Following this, the phase of creating initial sketches and wireframes took place, after which a complete UI system was developed with carefully chosen typography and colors. The project was finalized with the creation of an interactive prototype in the Figma tool, which was used for validation and preparation for further development.

Through thorough research, continuous collaboration with all involved teams, and an iterative design approach, a solid foundation has been established for an application that meets high standards of security, compliance, and user experience.

Would you like to collaborate?

Contact me so we can turn your ideas into impressive digital solutions.

The designer Nikola Zivanovic's image

© 2025 | Nikola Živanović

Would you like to collaborate?

Contact me so we can turn your ideas into impressive digital solutions.

The designer Nikola Zivanovic's image

© 2025 | Nikola Živanović

Would you like to collaborate?

Contact me so we can turn your ideas into impressive digital solutions.

The designer Nikola Zivanovic's image

© 2025 | Nikola Živanović