Стройлесбанк
Функциональный современный банковский сайт
Анализ
Проектирование
Дизайн
Верстка
Программирование
Тестирование
Интеграция
Настройка аналитики
01

О банке

КБ «СТРОЙЛЕСБАНК» (ООО) – банк с универсальной лицензией, предоставляющий услуги частным и корпоративным клиентам. Входит в число крупнейших банков в Тюменской области по величине уставного капитала. Банк содействует развитию малого и среднего бизнеса России.

На рынке с 1994 года
02
Игорь Лысенко
Account Director, D'Terra

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

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

UI Design
SEO Promotion
UX interface
QR Code
UI Design
SEO Promotion
UX interface
QR Code
03

Цель – разработать корпоративный сайт банка, отвечающий современным стандартам в области дизайна и веб-разработки.

Задачи

  • Реализовать прозрачную упрощенную структуру сайта
  • Разработать интуитивно понятный интерфейс на основе продуманных пользовательских сценариев
  • Создать функциональный UI-дизайн с ориентацией на SEO-продвижение
  • Предоставить возможность сотрудникам банка самостоятельно редактировать контент
  • Повысить конверсию и снизить отток пользователей за счет внедрения нового функционала: формы обратной связи, заявки на продукты, QR Code
  • Внедрить динамические калькуляторы для получения более качественных лидов по продуктам банка
  • Настроить маркетинговую аналитику для оценки эффективности стратегий
04

Архитектура сайта

Полное концептуальное переосмысление
Проанализирована и структурирована информация старого сайта для логического построения новых страниц и качественного наполнения веб-ресурса.
Проработанная структура и продуманная логика размещения контента обеспечили:
01
Удобный поиск информации
02
Легкое восприятие контента
03
Быстрое оформление заявок
На главной странице – продуктовая витрина с ключевыми предложениями и сгруппированными услугами.

При изменении продуктовой линейки можно легко менять содержимое карточек.

Акцентное меню позволяет пользователю быстро переходить в нужный раздел.

05

Пользовательские сценарии

Продуманная система навигации
UX-концепция разработана на основе цифрового опыта пользователей.
Продумана навигация по сайту – маршрут переходов спроектирован с учетом клиентских запросов. Переход на внутренние страницы ориентирован на совершение целевого действия: отправка заявки, заполнение формы, написание отзыва. Внимание пользователей сконцентрировано на основных продвигаемых продуктах банка.
Design / Art Direction
06

Новое визуальное исполнение

Уникальная дизайн-концепция
Анастасия Колышкина
Art Director, D'Terra

Лаконичный дизайн в фирменной стилистике банка разработан с учетом актуальных трендов и тенденций. Мы создали строгий, легкий и минималистичный дизайн, получив не перегруженный и комфортный в использовании интерфейс. Общее стилевое решение — свободное пространство и акцентные графические изображения. В основу визуального оформления легли авторские фотографии, дополненные 3d-элементами. Такой подход отражает современность и технологичность банка.

Арт-дирекшн для фотосессии

Были подобраны аналоги – визуальные референсы для съемки персонажей и прописан гайд для фотографа с рекомендациями. Готовые авторские снимки используются в ряде продуктовых страниц сайта, а также для рекламной оффлайн-продукции.

Иллюстрации

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

Цветовое решение

Использованы корпоративные цвета банка. Зеленый цвет на интуитивном уровне вызывает доверие потенциальных клиентов и партнеров к компании.

Дизайн-система

Реализована дизайн-система компонентов. Для упрощения внедрения новых страниц создан UI-kit — набор готовых элементов для дизайна интерфейса: шрифтов, иконок, форм и других визуальных составляющих.
Font
icons
Tabs
Готовые шаблонные страницы обеспечивают оперативное создание новых разделов, быстрый запуск и единообразное оформление.

Подготовлены уникальные дизайн-макеты. Прорисовано более 60 страниц в различных исполнениях и разрешениях

Этап верстки

01
Внедрена качественная адаптивная версия сайта, обеспечивающая правильное отображение на различных устройствах. Сайты с адаптивным дизайном занимают более высокие позиции в поисковых системах.
02
В мобильной версии сайта добавлено определение устройств. В зависимости от используемой ОС, на устройстве пользователя отображается иконка для скачивания приложения в Google Play или App Store.
03
Реализована версия для слабовидящих. Инклюзивный дизайн подразумевает разработку с учетом возможностей разных групп людей.
Версия для слабовидящих
Integration
07

Программирование и интеграции

Проект переведен на платформу 1C-Bitrix, что позволяет гибко масштабировать архитектуру сайта и расширить его функционал.

Редактирование контента

Внедрено решение от 1C-Bitrix – редактор для контент-менеджеров.

Сотрудники банка, пользуясь CMS, самостоятельно размещают информацию на сайте – оперативно редактируют часто обновляемый контент и добавляют продуктовые страницы с уникальной структурой, используя готовые блоки.

  • Инструмент доработан для более удобной и быстрой актуализации контента.
  • Разработан парсер для выгрузки более 200 новостей со старого сайта на новый.

Формы

Внедрили удобные для использования формы.

Динамические формы расчета

Разработаны онлайн-калькуляторы – динамические формы расчета по вкладу, кредиту и ипотеке, доступные на сайте и в блоках посадочных страниц.

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

Калькулятор вкладов и счетов
Расчет итоговой суммы вклада с учетом возможности пополнения и капитализации процентов ежегодной / ежемесячной.
Калькулятор кредитов

Расчет ежемесячного платежа с учетом основных и дополнительно заданных параметров. К примеру, для «Автокредитования» добавлены переменные: первоначальный взнос, аннуитетный / дифференцированный платеж, новый / подержанный автомобиль, со страхованием / без страхования.

Решение позволило добиться комплексной автоматизации взаимодействия с клиентами.
08

Достигнутые цели по итогам запуска

Создан технологичный сайт, отвечающий последним требованиям и стандартам в области банкинга с учетом новых дизайн-трендов.
01
Усилили имидж и повысили узнаваемость банка
02
Реализовали интуитивно понятный интерфейс и удобную навигацию
03
Повысили юзабилити сайта – доступ к любому разделу осуществляется в 2 клика
04
Увеличили точки касания с клиентами, повысили лояльность пользователей и удобство работы за счет интеграции нового функционала
05
Увеличили конверсию за счет внедрения адаптивной версии сайта, продуктовых калькуляторов и удобных форм
Екатерина Насонова
Маркетолог КБ “Стройлесбанк” (ООО)

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

Довольны взаимодействием с командой D'Terra – четко выстроенная регламентированная система работы, регулярная открытая коммуникация и предложенные решения специалистов, позволили добиться отличного результата. Благодарим за работу!

Следующий кейс
Экосистема для создания интерьерного дизайна и обустройства дома