1.0   2.0  

The making of the TransCreditBank website

Overview   Process  

Starting with the main page. Making a block that enables users to switch between banners and special offers for target client groups. Most of the bank’s clients are railroad employees, so we add a picture of a girl that evokes associations with railroads and banks.

tcb site process 01

The bank issues loans to payroll cards owners, so it already has their personal information. Deciding to put on the site a field for entering a bank card number instead of a loan calculator.

tcb site process 02

The division of clients into target groups will work as a navigation filter around the website. After a user selects a category he browses through the content related to it.

tcb site process 03

Designing flower patterns to decorate the website.

tcb site process 04

Roughing out the key pages.

tcb site process 05

Taking photos of a conductor girl.

tcb site process 06

The flagship product must stand out. The terms of credit are calculated in advance, and the money is transferred straight to the client’s bank card. OK. Putting a field for entering a bank card number in the center of the page.

And what’s around? Dreams?

tcb site process 07

No, not dreams again. Looking for a better metaphor. Road romance?

tcb site process 08

Or loading money to the card?

tcb site process 09

Or fuelling a card? That’s a good metaphor!

tcb site process 10

The client doesn’t approve.

In bank offices, the loan is advertised with the picture of a train ticket and the tag line “The loan is approved, your way is free.” OK. We’ll put a rushing train in the background, and leave the card fuelling metaphor for the Overdraft for Payroll Clients page. Now everyone is satisfied.

Taking pictures of a ticket in the hands of a client/passenger.

tcb site process 11

Putting everything together.

tcb site process 12

Drawing pretty details and putting them on the website.

tcb site process 13

The client sends us the partner photo session pictures made by Russian Railways and placed at railway stations around the country and wishes to put them on the main page. Thinking where to place railroad heroes.


Turns out we can’t use the photos due to the license problems.

The previous version of the website had a flash banner carousel on the main page. The client wants to keep the animation with the rotation of images and texts. The Studio doesn’t like Flash. Deciding to create a Javascript animation and a banners admin panel, so the website admins could easily upload pictures and change texts.

Flash prototype (links are clickable).

Art director suggests placing a calligraphic slogan in the style of old Soviet postcards on the main page.

tcb site process 18

The client rejects the calligraphy as it doesn’t comply with the corporate style.

Continuing to work on the main page. Changing its layout in the process.



Adding a brochure on payroll cards to the website.

tcb site process 24

Polishing the key pages.

tcb site process 25

Communication between the designer and technologists:

tcb site process 26

Order a design...