The making of the Alfa-Click online banking service interface

Overview   Process  

Coming up with the design concept. Thanks to the expanded menu and the Favorites panel, you get direct, hassle-free access to all the functions of the online banking service.

The Favorites panel displays custom user payment templates and links to various assets.

alfa click process 01

Moving, renaming, and deleting the old blocks while adding new ones.

alfa click process 02

The star icon next to the account’s name lets you add it to Favorites with a single click.

alfa click process 03

Rejecting the idea of jumping straight to layouts and going back to laying the groundwork first. The entire online banking service fits on 38 pages.

alfa click process 04

At the same time we’re working on the main page: defining its structure and the overall design. On this page, the bank provides helpful tips, displays new offers, introduces itself, and answers questions.

alfa click process 05

Preparing the main screen you see after logging in and designing the list of accounts.

alfa click process 06

The main page looks too busy and complex. We try to reduce the number of blocks and increase information density, which changes the overall design a bit.

alfa click process 07

Thinking through the calendar of operations. We propose to make a graphic window with a data scroller which controls the timeline view.

alfa click process 08

The client considers such visualization unnecessary. Back to the regular list.

We finish the rest of the pages and prepare them for further development.

alfa click process 09

We finish drawing the necessary icons.

alfa click process 10

Order a design...