АО «Первоуральскбанк
Финансы, инвестиции, банки
Россия, Первоуральск
Корпоративный сайт
Май 2024
Обновить имидж компании — разработать айдентику и создать современный сайт для Первоуральскбанка. Это небольшой, но высокотехнологичный банк из Первоуральска — города, расположенного на границе Европы и Азии.
Банк сочетает в себе новейшие технологии обслуживания и лучшие традиции банковского дела. За последние 10 лет он сделал огромный скачок в развитии. Из небольшого регионального банка превратился в цифровой банк, который работает дистанционно по всей РФ. Раньше компания обслуживала клиентов только в Свердловской области, а сейчас — по всей территории страны.
Ключевая цель редизайна — сделать технологические и структурные изменения банка заметными для клиентов.
Изначально команда банка обратилась только за редизайном сайта, но мы по собственной инициативе разработали и предложили айдентику. Она настолько понравилась клиенту, что они утвердили и включили её в проект.
— Проработали структуру сайта. Продумали навигацию так, чтобы пользователи могли быстро находить нужную информацию. Сайт спроектировали по принципу воронки продаж: от привлечения внимания до мотивации оставить заявку.
— Разработали новую айдентику. Мы предложили современный логотип, уникальный фотостиль, гармоничную цветовую палитру, которая отражает технологичность и человечный подход банка.
— Собрали дизайн-систему. Описали все визуальные элементы: шрифты, цветовую палитру, компоненты интерфейса. Это упростило разработку сайта и позволило сохранить единый стиль.
— Реализовали технологическую основу. На фронтенде использовали JavaScript, а на бэкенде — 1С-Битрикс. Такой подход обеспечил высокую производительность сайта и лёгкость в управлении контентом.
— Добавили функциональность. Внедрили интерактивные элементы. Например, калькулятор кредита, который позволяет пользователям быстро и удобно рассчитывать условия кредитования с точными данными о процентных ставках, сроках и ежемесячных платежах.
Сначала прописали текстовую структуру сайта и согласовали её с клиентом. После приступили к разработке самих прототипов.
Прототипы помогают наглядно продемонстрировать, как будет выглядеть сайт до того, как начнётся этап дизайна. Это позволяет всем участникам проекта и клиенту понять, что будет на каждой странице.
Подход «Сначала структура, потом прототипы, затем дизайн» помог нам двигаться быстрее и точнее, избежав множества правок.
Чтобы разработать структуру сайта, изучали сайты конкурентов и использовали предложенные клиентом референсы. На основе этого собрали структуру, адаптируя удачные элементы под нужды проекта. Например, брали навигацию с одного сайта, баннер с другого, а потом всё это соединяли в единую структуру, объясняя клиенту, почему так лучше.
Каждую страницу собирали по воронке: привлечение, удержание, продажа. Мы учитывали, что если пользователь не готов сразу совершить покупку, он найдёт ответы на свои вопросы в следующих блоках. Так мы снимали все возможные возражения и помогали клиенту принять решение.
При разработке дизайна для Первоуральскбанка мы учитывали несколько ключевых моментов:
— «Банк из сердца России» — это важная часть его идентичности.
— Основные клиенты — представители малого и среднего бизнеса и их сотрудники.
— Банк хочет ассоциироваться с уверенностью, серьёзностью и простотой.
— Сайт должен выглядеть современно, но оставаться понятным для существующих клиентов.
Креативную концепцию построили на метафоре кошелька, в который можно складывать монеты, купюры и банковские карты. Это решение отсылает к разнообразию услуг Первоуральскбанка. Центральными элементами дизайна стали сегменты, напоминающие карманы картхолдера. Они и стали основой для баннеров на сайте. Большинство баннеров состоит из двух частей:
1. Оферная часть слева: цветной фон, название услуги, короткий слоган и призыв к действию.
2. Имиджевая часть справа: сегменты — несколько контрастных полосок одного цвета, между которыми вложено изображение или знаки монеты и сердце.
Это решение позволило сделать баннеры одновременно и информативными, и визуально привлекательными.
Разработали два варианта логотипа, которые продолжают идею креативной концепции.
Старый логотип Первоуральскбанка был в виде латинской монограммы, что не очень сочеталось с контекстом: Первоуральскбанк — российский банк, и название на русском языке. Некоторые клиенты путались и читали не «Пэ Бэ», а «Эр Вэ». Также в предыдущем логотипе не было заложено метафоры.
Варианты логотипов, которые у нас получились:
1. Прямоугольная форма символизирует кошелёк как место хранения денег. Внутри прямоугольника — круг, символизирующий монету, которую вкладывают в кошелёк. Так логотип показывает, что Первоуральскбанк сохраняет деньги клиентов.
2. Вместо круглого элемента использовали форму угловатого сердца. Она придаёт знаку больше эмоциональности и человечности. Также сердце отсылает к тому, что Первоуральскбанк — это банк из сердца России. А верхний угол формы ассоциируется с горными пиками Урала. Кроме того, угловатое сердце у многих ассоциируется с галочкой — символом выполненной задачи и полученным результатом.
Клиент выбрал второй вариант.
С помощью цветовой гаммы передали технологичность и человечность банка.
Основным цветом выбрали синий — использовали его в разделах для юр. лиц. Синий ассоциируется со стабильностью, надёжностью и профессионализмом. Также этот оттенок хорошо передаёт диджитальный имидж банка, позиционируя его как технологичного и надёжного финансового партнёра.
В разделах для физлиц использовали оранжевый. Его тёплый и позитивный тон создаёт ощущение дружелюбности и доверия.
Сочетание синего и оранжевого образует выразительный контраст. При этом они хорошо сочетаются друг с другом и создают гармоничную цветовую гамму.
Шрифты для логотипа и заголовков выбрали с учётом длинного названия банка.
Для заголовков и логотипа выбрали TT Bluescreens. Это вытянутый по вертикали шрифт, который поддерживает форму знака и логотипа. Благодаря его форме им удобно писать длинные названия и заголовки — они становятся компактными.
Для основного текста выбрали Golos Text. Это простой и читабельный шрифт без засечек. Он отлично подходит для текстов на экране и не утомляет глаза при чтении.
Разработали дизайн-систему, чтобы обеспечить единство стиля на всём сайте. В ней мы описали все элементы дизайна: от цветовой палитры и типографики до конкретных компонентов интерфейса. Этот инструмент позволяет быстро создавать новые страницы, сохраняя целостность дизайна.
Мы отказались от банальных корпоративных изображений в пользу уникальной визуальной идентичности, потому что сайт Первоуральскбанка — не попсовый продукт.
Концепция фотостиля основана на идее достижений и побед человечества. Каждое изображение вызывает ассоциации с важными открытиями или личными триумфами.
Фотографии, которые мы используем, минималистичны, с яркими тёплыми оттенками и ощущением движения вперёд — слева направо. Мы избегаем постановочных кадров и стереотипных жестов, создавая естественные и вдохновляющие образы.
С помощью фотографий создаём уникальную ассоциацию бренда с приятными и понятными клиенту вещами. Это напрямую влияет на узнаваемость и запоминаемость банка.
Примеры фотографий, которые подходят под все условия из руководства:
Мы разработали подробное руководство, как подбирать фотографии для баннеров на сайте, чтобы новые страницы не выбивались из общего стиля.
В разработке делали упор на практичность и удобство управления сайтом.
На фронтенде использовали чистый JavaScript без фреймворков. Это позволило создать лёгкий и быстрый интерфейс. Такой подход обеспечил высокую производительность и простоту в поддержке.
На бэкенде использовали «Битрикс». Выбрали его, потому что эта платформа удобна для управления сайтом и клиент сам сможет удалять, добавлять или редактировать контент.
Реализовали калькулятор кредита — один из самых сложных и интересных элементов нового сайта. Самым трудным было интегрировать формулы расчёта платежей из Excel в JavaScript. Мы протестировали несколько библиотек, чтобы найти оптимальное решение, и настроили формулу так, чтобы она корректно работала на сайте.
Калькулятор позволяет пользователям быстро и удобно рассчитывать условия кредитования, получая точную информацию о процентных ставках, сроках и ежемесячных платежах.
После запуска нового сайта количество заявок и запросов от пользователей и клиентов увеличилось в несколько раз.
Первоуральскбанк получил современный, стильный и удобный сайт, который выделяет его среди конкурентов в сегменте небольших банков. Новая айдентика и креативная концепция теперь соответствуют технологическому уровню банка и отражают его человечный подход к клиентам.
Сайт стал эффективным инструментом для привлечения клиентов, особенно в сегменте малого и среднего бизнеса. Удобная структура и интуитивно понятный интерфейс упростили поиск информации и повысили конверсию.
Результаты в цифрах — сравнение показателей за 3 месяца до и 3 месяца после обновления сайта:
В 3,2 раза увеличилась конверсия из посетителей в заявки
В 3,1 раза увеличилось количество посещений с мобильных устройств
В 1,34 уменьшился показатель отказов на ключевых страницах
В 1,42 увеличилось среднее время, проводимое пользователями на сайте
![]()
Михаил Брюханов
Председатель Совета Директоров АО «ПЕРВОУРАЛЬСКБАНК»
Запуск нового сайта банка стал одним из главных элементов комплексного ребрендинга банка. Стояла задача сделать современный, стильный, удобный сайт для клиентов, инвесторов и партнеров, который бы выделял нас среди конкурентов. Мы специализируемся на нишевом кредитовании, и наш новый сайт подчёркивает наше лидерство в некоторых продуктовых нишах.
Результаты говорят сами за себя: с момента запуска сайта количество заявок и запросов от пользователей и клиентов у нас увеличилось в 2 раза. Не менее ценным результатом мы считаем большое количество положительных отзывов от клиентов, которые прямо говорили, что у нас «классный сайт».![]()