The making of the TransCreditBank website

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.

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.

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.

Designing flower patterns to decorate the website.

Roughing out the key pages.

Taking photos of a conductor girl.

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?

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

Or loading money to the card?

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

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.

Putting everything together.

Drawing pretty details and putting them on the website.

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.

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.

Polishing the key pages.

Communication between the designer and technologists: