Разработка Frontend для ВТБ (Казахстан)

ВТБ (Казахстан) — дочерний банк
международной
финансовой группы
ВТБ,
в состав которой входит
более
20 кредитных и финансовых
организаций
по всему миру. Группа
ВТБ представлена в странах
СНГ,
включая Казахстан,
Армению,
Беларусь
и Азербайджан.

line-pattern-2 promo-laptop-desktop
SCROLL

О проекте

Мы реализовали разработку и адаптацию клиентских интерфейсов сайта ВТБ (Казахстан).

Сайт предоставляет доступ к широкому спектру услуг: от оформления кредитных продуктов и использования расчетных сервисов до поиска ближайших офисов и подачи онлайн-заявок. Мы создали интуитивно понятный и функциональный интерфейс, который отвечает потребностям клиентов и соответствует высоким стандартам банковской отрасли.

Клиент Дочерняя организация «Акционерное Общество банк ВТБ (Казахстан)»
Год разработки 2020
Сфера Финансовые услуги, онлайн-банкинг
Экспертизы Frontend разработка

Выполненные работы

01

Разработка и вёрстка
пользовательского интерфейса

02

Реализация интерактивных
элементов: калькуляторы,
формы, выпадающие списки

03

Адаптивная вёрстка
для мобильных устройств
и планшетов

04

Валидация форм и защита
через reCAPTCHA

05

Разработка карты отделений и
банкоматов с фильтрацией и
интерактивным выбором точек

06

Оптимизация
производительности
и кроссбраузерная поддержка

Кредитный
калькулятор

Онлайн-калькулятор позволяет быстро рассчитать параметры кредита: сумму, срок и ежемесячный платёж. Удобный интерфейс помогает пользователям подбирать оптимальные условия без посещения отделения.

calcleftpc

Пользователь вводит сумму и срок кредита, выбирает
тип платежей (аннуитет / равные доли).

При нажатии на кнопку «Рассчитать» мгновенно отображаются: ежемесячный платёж, общая сумма выплат, переплата и сумма ежемесячного платежа.

calcrightpc
calclbottom

В мобильной версии калькулятор собран в компактную вертикальную форму, а результаты расчёта отображаются мгновенно после нажатия кнопки.

Ежемесячный платёж, общая сумма выплат и переплата выделены контрастным блоком, что делает сценарий понятным даже на небольших экранах.

cred-bg
Заявка на кредит

Кнопка «Подать заявку на кредит» ведёт к расширенной форме, где пользователь заполняет необходимую информацию. Форма адаптирована под разные кредитные продукты и категории клиентов, что делает процесс оформления понятным и последовательным.

В зависимости от выбранного кредитного продукта динамически изменяются поля формы: вид продукта, диапазоны суммы и срока, а также текстовые пояснения. Это позволяет учитывать особенности разных программ кредитования, сохраняя при этом единую логику
и структуру заполнения.

credpc

Карта отделений
и банкоматов

На сайте реализована интерактивная карта, которая помогает быстро найти ближайшее отделение
банка, банкомат, кассу или POS-терминал. Каждая точка обслуживания отмечена маркёром,
при клике на который отображаются адрес, часы работы и контакты.

mapleftpc
maprightpc
vtb
mapinfo

Дополнительно доступна фильтрация по категориям торгово‑сервисных предприятий (например, супермаркеты, кафе, аптеки, АЗС и другие популярные локации),
где установлены терминалы и банкоматы.

Информация отображается как на карте с интерактивными маркёрами,
так и в виде списков, что делает поиск удобным на любых устройствах.

mapinfo

Раздел залогового
имущества

На сайте реализован раздел с актуальной информацией о жилой
и коммерческой недвижимости, находящейся в залоге

property

Детальная страница
объекта недвижимости

property
property

Переход на страницу объекта открывает детальную карточку с описанием, фотогалереей, техническими характеристиками, а также контактами ответственного сотрудника.

Выполненные работы

Запись и аналитика каждого звонка

Адаптивная вёрстка карточек с фотогалереей

Запись и аналитика каждого звонка

Корректное отображение данных в списках и на страницах объектов

Запись и аналитика каждого звонка

Удобная навигация и наглядная подача информации

Технические детали

При разработке интерфейсов мы использовали проверенные и надёжные
инструменты, чтобы сайт работал стабильно и был удобным для пользователей

01

Было реализовано важное
требование — работа в
Internet
Explorer 10, что является очень
сложной
задачей для
современных сайтов

02

В разработке использовался
ReactJS

03

Все интерфейсы имели
5 версий адаптивов
под различные устройства
для максимальной
совместимости