5EEDAED5-6AA4-4553-94A3-AEF2477EDF6F

Фора Банк

Фора Банк
Клиент

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

Задача

Фора хотела, чтобы сайт соответствовал статусу и задачам банка, например, отвечал требованиям разных отделов и помогал им справляться с планом продаж. Еще старая версия не работала на мобильных, не подходила визуально и не справлялась с презентацией компании — мы взялись за обновление проекта. Сейчас за наполнение сайта отвечает банк.

Конкурс

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

Конкурсная концепция на примере главной страницы

Конкурсный эскиз — это только отправная точка. Предстояли большие дела: изучить услуги, схему продаж, клиентов и конкурентов банка, а после первого знакомства с сайтом мы захотели навести порядок в структуре и навигации, упростить поиск услуг и продумать подачу для частных лиц и компаний.

Структура

Когда изучили сайт Форы, то увидели, что иногда информация повторяется, часть страниц можно объединить, а вместо каталогов карт, вкладов и кредитов лучше сделать подборщик с фильтрами. Так и поступили.

Объединяем разделы, используем фильтры вместо каталогов, учитываем ссылки для сео
Преобразовываем структуру: убираем лишние страницы, добавляем подборщики

Работая над структурой, посмотрели сайты Сбербанка, ВТБ 24, Альфа-Банка, Райффайзена, Точки, Тинькоффа, ОТП, Балтинвеста, Хоум Кредита, Бинбанка, Траста. Искали хитрости в навигации, когда услуг много и они разные. Для клиента — составили отчет, для себя — базу для экспериментов с главным и внутренним меню.

Навигация

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

В первом варианте закреплен выбор раздела — для частных клиентов или компаний, а пункты меню «Банк ежедневно», «Кредиты и карты», «Вклады и инвестиции», «Страховые продукты» — сменные, они зависят от категории. Уйти от меню-гамбургера не вышло, там полная карта сайта.

Другая промежуточная версия была с двойным меню. В верхней части остались сервисные ссылки и «гамбургер», а внизу экрана — самые интересные пункты.

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

У пользователя два пути: первый — сразу перейти в раздел для частных лиц или бизнеса, второй — зайти в большое меню через «гамбургер»

Прототипы

Сайт должен меняться под задачи и планы продаж. Сегодня важны карты, завтра — ипотека, послезавтра — витрина залогового имущества. Приоритетов нет, банк часто экспериментирует и мы хотели поддержать их в этом.

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

Разводная страница

Вмонтированная в страницы навигационная деталь помогает быстро перемещаться по сайту.

Страница продукта

Уникальные страницы тоже показали в прототипах. Для всех собрали технические требования, обозначили функции и продумали содержание.

Монеты
Обмен валют
Недвижимость от «Фора Банка»
Отделения, кассы, банкоматы
Аренда сейфа
Акции

Калькулятор задумали двух сортов: первый — в виде статичной таблицы, если нет ресурсов на быструю разработку, второй — интерактивный с автоматическим расчетом.

Дизайн

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

Услуги для частных клиентов и компаний сильно отличаются, об этом явно говорит главный экран

Чтобы клиент успел подготовить тексты, изображения и данные для выгрузки калькуляторов, мы начали отрисовку с продуктов: «Кредит», «Ипотека», «Карта», «Вклад», «Акции». После перешли на уровень выше — к разводящим и другим уникальным страницам.

Типовые страницы

Экраны делятся на две части. Слева — популярные продукты, справа — место для акций и анонсов.

Страница частным клиентам
Разводная страница кредитов
Внутренняя страница кредита
Фильтр для расчета услуг

Уникальные страницы

Страницы, которые не вписывались в шаблон и сильно отличались по содержанию, нарисовали отдельно.

Онлайн-сервис
Недвижимость от Фора Банка
Адреса отделений
Монеты
Страница офиса

Адаптив

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

Будущий калькулятор

Чтобы оценивать варианты кредита или ипотеки было интереснее, мы предложили сделать интерактивный калькулятор, например, если увеличивается первый взнос, то зеленая область на объекте тоже. Если меняется стоимость авто или квартиры, то вслед появляется новая форма объекта — другая машины или площадь помещения.

Вёрстка и программирование

Настроили автоматическую подгрузку валют и подключили матрицу ставок, чтобы выводить данные во всех калькуляторах. На страницах услуг сделали разную выдачу, которая зависит от города. Если это Москва, то на странице могут появиться дополнительные блоки — такие изменения есть для каждого города.

В разработке учитывали всё, даже желания Центробанка. Например, на главной странице нужно было дать обязательные ссылки и не мешать визуальной подаче, поэтому верстальщик сделал «выдвижной» футер. Мелочь, а приятно. Сейчас за наполнение сайта отвечает клиент.


Отправьте заявку или напишите письмо info@nimax.ru

Вместе мы подберём решение и подходящий инструмент

Dikom 2.0
Корпоративный сайт и интернет магазин мебельной фабрики
Интернет магазин, дизайн, разработка
Техносила
Видео для магазина электроники и бытовой техники.
концепция, сценарий, съёмка, монтаж, цветокоррекция, озвучание, серия
Conde Nast
Делаем SEO для крупнейших глянцевых СМИ России.
SEO
Образователь­ные проекты Mail.Ru
Курсы для разработчиков от Mail.Ru и технических вузов России.
архитектура, тексты, дизайн, разработка