Разработка айдентики и создание нового сайта для Первоуральскбанка

Главное о кейсе

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

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

Задача: обновить имидж компании — разработать айдентику и создать новый сайт.

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

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

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

— в 3,2 раза увеличилась конверсия из посетителей в заявки;
— в 3,1 раза увеличилось количество посещений с мобильных устройств;
— в 1,34 уменьшился показатель отказов на ключевых страницах;
— в 1,42 увеличилось среднее время, проводимое пользователями на сайте.

Как проект изменил жизнь пользователей

1) Улучшил восприятие банка.

Обновлённый дизайн и айдентика создали образ современного, надёжного и технологичного банка, что повысило доверие клиентов.

2) Сделал информацию о банковских продуктах и услугах более понятной и доступной.

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

3) Упростил финансовые расчёты.

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

4) Расширил географию обращений.

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

5) Увеличил вовлечённость.

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

Бизнес-задача и ее решение

1) Обновление имиджа банка.

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

• Креативную концепцию построили на метафоре кошелька, в который можно складывать монеты, купюры и банковские карты.

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

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

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

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

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

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

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

• С помощью фотостиля дополнили креативную концепцию.

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

• Чтобы обеспечить единство стиля на всём сайте, разработали дизайн-систему.

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

2) Улучшение пользовательского опыта и повышение конверсии.

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

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

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

Крафт (мастерство), реализация, технические детали

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

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

1) Важно смотреть на диджитал-проекты шире изначального запроса.

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

2) Внешний образ компании должен соответствовать её внутренним изменениям.

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

Скриншоты

Комментарий заказчика

«Мы ставили агентству Wemakefab задачу сделать комплексный ребрендинг, включая айдентику, логотип, сайт, все материалы в соответствии со стратегией развития банка на ближайшие 3–5 лет. За последние несколько лет Первоуральскбанк изменился до неузнаваемости и с технологической точки зрения, и с точки зрения расширения продуктовой линейки, и с точки зрения географии. При этом бренд, айдентика, сайт были совершенно устаревшими и не соответствовали тому, что делал банк и чего он уже достиг к этому времени.

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

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

Рекомендуем Wemakefab как надёжного и ответственного подрядчика в области цифровизации бизнеса и создания качественных диджитал-продуктов».