Пишете крутые статьи? Публикуйте их в Workspace Media, бесплатно!
Wemakefab
Первоуральскбанк — как с помощью редизайна в 3,2 раза увеличить конверсию сайта банка
Wemakefab
WDA
2025
#Сайт под ключ#Фирменный стиль#Разработка логотипа

Первоуральскбанк — как с помощью редизайна в 3,2 раза увеличить конверсию сайта банка

1500 
15 ноя 2024 в 8:32
Wemakefab
Wemakefab Россия, Санкт-Петербург
Поделиться:
Первоуральскбанк — как с помощью редизайна в 3,2 раза увеличить конверсию сайта банка
Клиент

АО «Первоуральскбанк

Сфера

Финансы, инвестиции, банки

Регион

Россия, Первоуральск

Тип сайта

Корпоративный сайт

Сдано

Май 2024

Задача

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

Банк сочетает в себе новейшие технологии обслуживания и лучшие традиции банковского дела. За последние 10 лет он сделал огромный скачок в развитии. Из небольшого регионального банка превратился в цифровой банк, который работает дистанционно по всей РФ. Раньше компания обслуживала клиентов только в Свердловской области, а сейчас — по всей территории страны.

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

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

Решение

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

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

— Собрали дизайн-систему. Описали все визуальные элементы: шрифты, цветовую палитру, компоненты интерфейса. Это упростило разработку сайта и позволило сохранить единый стиль.

— Реализовали технологическую основу. На фронтенде использовали JavaScript, а на бэкенде — 1С-Битрикс. Такой подход обеспечил высокую производительность сайта и лёгкость в управлении контентом.

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

1Прототипы

Сначала прописали текстовую структуру сайта и согласовали её с клиентом. После приступили к разработке самих прототипов.

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

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

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

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

2Креативная концепция

При разработке дизайна для Первоуральскбанка мы учитывали несколько ключевых моментов:

— «Банк из сердца России» — это важная часть его идентичности.

— Основные клиенты — представители малого и среднего бизнеса и их сотрудники.

— Банк хочет ассоциироваться с уверенностью, серьёзностью и простотой.

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

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

1. Оферная часть слева: цветной фон, название услуги, короткий слоган и призыв к действию.

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

Это решение позволило сделать баннеры одновременно и информативными, и визуально привлекательными.

3Логотип

Разработали два варианта логотипа, которые продолжают идею креативной концепции.

Старый логотип Первоуральскбанка был в виде латинской монограммы, что не очень сочеталось с контекстом: Первоуральскбанк — российский банк, и название на русском языке. Некоторые клиенты путались и читали не «Пэ Бэ», а «Эр Вэ». Также в предыдущем логотипе не было заложено метафоры.

Варианты логотипов, которые у нас получились:

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

2. Вместо круглого элемента использовали форму угловатого сердца. Она придаёт знаку больше эмоциональности и человечности. Также сердце отсылает к тому, что Первоуральскбанк — это банк из сердца России. А верхний угол формы ассоциируется с горными пиками Урала. Кроме того, угловатое сердце у многих ассоциируется с галочкой — символом выполненной задачи и полученным результатом.

Клиент выбрал второй вариант.

4Цвета

С помощью цветовой гаммы передали технологичность и человечность банка.

Основным цветом выбрали синий — использовали его в разделах для юр. лиц. Синий ассоциируется со стабильностью, надёжностью и профессионализмом. Также этот оттенок хорошо передаёт диджитальный имидж банка, позиционируя его как технологичного и надёжного финансового партнёра.

В разделах для физлиц использовали оранжевый. Его тёплый и позитивный тон создаёт ощущение дружелюбности и доверия.

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

5Шрифты

Шрифты для логотипа и заголовков выбрали с учётом длинного названия банка.

Для заголовков и логотипа выбрали TT Bluescreens. Это вытянутый по вертикали шрифт, который поддерживает форму знака и логотипа. Благодаря его форме им удобно писать длинные названия и заголовки — они становятся компактными.

Для основного текста выбрали Golos Text. Это простой и читабельный шрифт без засечек. Он отлично подходит для текстов на экране и не утомляет глаза при чтении.

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

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

7Фотостиль

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

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

Фотографии, которые мы используем, минималистичны, с яркими тёплыми оттенками и ощущением движения вперёд — слева направо. Мы избегаем постановочных кадров и стереотипных жестов, создавая естественные и вдохновляющие образы.

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

Примеры фотографий, которые подходят под все условия из руководства:

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

8Разработка

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

На фронтенде использовали чистый JavaScript без фреймворков. Это позволило создать лёгкий и быстрый интерфейс. Такой подход обеспечил высокую производительность и простоту в поддержке.

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

Реализовали калькулятор кредита — один из самых сложных и интересных элементов нового сайта. Самым трудным было интегрировать формулы расчёта платежей из Excel в JavaScript. Мы протестировали несколько библиотек, чтобы найти оптимальное решение, и настроили формулу так, чтобы она корректно работала на сайте.

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

Результат

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

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

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

Результаты в цифрах — сравнение показателей за 3 месяца до и 3 месяца после обновления сайта:

В 3,2 раза увеличилась конверсия из посетителей в заявки

В 3,1 раза увеличилось количество посещений с мобильных устройств

В 1,34 уменьшился показатель отказов на ключевых страницах

В 1,42 увеличилось среднее время, проводимое пользователями на сайте

Отзыв клиента

Михаил Брюханов
Михаил Брюханов

Председатель Совета Директоров АО «ПЕРВОУРАЛЬСКБАНК»

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

Результаты говорят сами за себя: с момента запуска сайта количество заявок и запросов от пользователей и клиентов у нас увеличилось в 2 раза. Не менее ценным результатом мы считаем большое количество положительных отзывов от клиентов, которые прямо говорили, что у нас «классный сайт».

скан отзыва
https://pervbank.ru/

Стек технологий


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

Хотите заказать похожий проект?

Wemakefab с удовольствием обсудит вашу задачу

Оставить заявку