АО «Кредит Европа Банк (Россия)» – российский банк с иностранным капиталом, основанный в 1997 году, принадлежит к турецкой финансовой Группе FIBA, осуществляющей свою деятельность в 11 странах мира.
Деятельность Кредит Европа Банка в России сосредоточена в таких городах, как Москва, Санкт-Петербург, Казань, Екатеринбург, Уфа, Новосибирск, Ростов-на-Дону и других.
Кредит Европа Банк — универсальный банк, оказывающий широкий спектр услуг розничным и корпоративным клиентам, а также предприятиям малого и среднего бизнеса.
Цели проекта
Повышение цифровой доступности банка- Создать единую экосистему для всех сегментов клиентов (Физические лица, Малый/Средний бизнес, Корпоративный сектор) в рамках единого сайта.- Обеспечить бесшовную навигацию между разделами, чтобы каждый клиент интуитивно находил свой продукт, не теряя ощущения «единого банка».
Снижение нагрузки на колл-центр и отделения- Предоставить пользователям возможность самостоятельно решать до 80% вопросов через цифровые инструменты (калькуляторы, карты, поиск) без обращения в поддержку.
Повышение вовлеченности через UX/UI- Сделать взаимодействие с финансовой информацией (курсы, ставки) визуально приятным и понятным, чтобы у клиента формировалось доверие к бренду на уровне эмоций (через «отзывчивый дизайн» и анимации).
Обеспечение глобальной доступности- Реализовать полноценную мультиязычность (английская версия) для работы с иностранными клиентами и корпоративными партнерами без потери функционала.
Ключевые задачи разработки
Архитектура и интеграция (Frontend + Backend)- Организовать эффективное взаимодействие с бэкенд-командой для обработки больших объемов данных (обновление курсов валют, статусы отделений) в реальном времени.- Обеспечить модульность кода (Vanilla JS), позволяющую развивать разделы для МСБ и Корпоративных клиентов независимо друг от друга.
Разработка высоконагруженных виджетов- Ипотечный калькулятор: Реализовать сложную логику пересчета параметров (сумма/срок/ставка) с мгновенным отображением графика платежей без перезагрузки страницы.- Карта отделений/банкоматов: Создать интерактивную карту с кастомизацией (теги, фильтры) и функцией «обновления» для отображения актуального трафика и загруженности офисов.
Адаптивность и «Живой» интерфейс- Разработать единую систему слайдеров и каруселей для презентации продуктов, адаптивную под любые устройства (от мобильных до широкоформатных экранов).- Внедрить «отзывчивый дизайн» (резиновая верстка на HTML/CSS) для комфортного взаимодействия с формами обратной связи любой сложности.
Навигация и поиск- Создать глобальный поиск с умным вводом, охватывающий все разделы сайта (для частников и бизнеса), чтобы сократить время поиска нужного продукта до 3-5 секунд.
Особенности реализации
Унификация дизайна: Сохранение единого архитектурного стиля при верстке уникальных разделов для разных ЦА (частник vs корпоративный клиент). Это требовало создания гибкой CSS-системы (возможно, через препроцессоры или кастомные свойства).
Производительность: Оптимизация тяжелых скриптов (карты, калькуляторы) на чистом JS без использования сторонних тяжелых фреймворков для обеспечения быстрой загрузки страниц.
Качество данных: Обеспечение корректного отображения курсов валют и остатков продуктов в режиме близком к реальному времени за счет грамотной работы с API.
Процесс
1. Гибридная методология (Waterfall + Agile)
- Планирование: Жесткая фиксация макетов (дизайн-системы) на старте, чтобы обеспечить «единый архитектурный стиль» для всех разделов (частники/бизнес).
- Спринты: Разработка функциональных блоков (калькулятор, карта, поиск) спринтами с демонстрацией промежуточных результатов заказчику
2. Параллельная разработка и интеграция (Frontend + Backend)
- Договоренности по API: На этапе проектирования мы совместно с бэкенд-командой утвердили Contract-First подход (спецификацию API). Это позволило нам верстать и писать логику на моках (заглушках), пока бэкенд писал серверную часть, и соединить всё на финальных этапах без срывов сроков.
- Ежедневные стендапы: Синхронизация по эндпоинтам для карты (большой объем данных) и курсов валют (высокая частота обновления).
3. Разработка модульной архитектуры (на Vanilla JS)
- Принцип Lego: Мы разбили фронтенд на независимые модули (слайдеры, карта, поиск, калькулятор). Это позволило разным разработчикам вести свои части кода, не конфликтуя в общем репозитории.
- Микроверстка: Создание CSS-компонентов по методологии БЭМ, что гарантировало, что стили для раздела «Малый бизнес» не сломают верстку для «Частников».
4. Непрерывное тестирование и контроль качества (QA)
- Ручное тестирование: Проверка всех форм обратной связи (валидация полей, маски ввода) на 10+ типах устройств (от iPhone SE до больших мониторов).
- Тестирование API: Проверка обработки ошибок бэкенда (таймауты, ошибки 500)
- Нагрузочное тестирование карты: Проверка работы карты при одновременной фильтрации по 3-4 тегам, чтобы не было «тормозов» интерфейса.
5. Этап приемки (UAT - User Acceptance Testing)
- Передача собранных модулей внутренним тестировщикам банка (реальным сотрудникам) для проверки логики ипотечного калькулятора на соответствие реальным банковским формулам.
- Проведение кросс-браузерного тестирования (Chrome, Firefox, Safari, Edge) с акцентом на корректное отображение английской версии (верстка не должна «плыть» при смене языка, особенно при длинных словах).
Стек технологий
Pug
CSS3 (SCSS)
Rspack
Node.js 22.2.0
Результат
В процессе работ был разработан новый сайт банка с обновленной версткой и дизайном. Сайт стал более современным и удобным для пользователей.
Со стороны команды Заряд была выполнена верстка сайта по макетам команды АИС.
Перейти на сайтКоманда
Олег Лысенко
Руководитель производства
Александра Главацкая
Менеджер проектов
Екатерина Белоусько
Менеджер проектов
Павел Безуглов
Менеджер проектов
Владислав Чеменев
Frontend разработчик
Никита Холодов
Frontend разработчик
Маргарита Карпова
QA инженер
Похожие кейсы
ЖК Алгыс
Разработка сайта на Tilda
Сайт Сестрорецкого курорта ГК ЛСР
Разработка адаптивного веб-сайта
SINTEC Lubricants
Разработка веб-интерфейсов и личного кабинета на Laravel
