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

В 2024 году банк НОВИКОМ обновил позиционирование и визуальный стиль. За разработкой нового сайта компания обратилась к Далее. Мы не просто сделали ребрендинг платформы, но и улучшили пользовательский опыт, упростив навигацию и добавив интерактива.

Перед стартом вместе с клиентом проанализировали текущую версию сайта и поведение пользователей. Выяснили, что:

1. мобильная версия работает нестабильно, хотя почти 80% трафика — со смартфонов;
2. путь к ключевым продуктам слишком длинный;
3. отсутствуют явные акценты для частных лиц, которые составляют 75% посетителей;
4. нет удобных инструментов — калькуляторов, фильтров, быстрых сценариев;
5. формы перегружены и снижают конверсию.

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

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

В основу реализации легли UX-тренды финтеха и обновленная дизайн-концепция НОВИКОМА

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

Общий визуал системы выстроили вокруг нового бренд-стиля. Основным цветом стал фиолетовый — как символ инноваций и технологичности. Для разделения пользовательских сценариев использовали дополнительные цвета из брендбука:

1. зеленый для частных лиц, 
2. оранжевый для корпоративных клиентов, 
3. желтый для малого и среднего бизнеса,
4. графитовый для финансовых институтов.

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

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

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

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

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

Формы упростили. Оставили только необходимые поля для первичной обработки данных. Дополнительно внедрили капчу, чтобы снизить количество спам-заявок.

Разработка фронтенда без Vue и React

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

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

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

Код разместили в изолированные модули. Чтобы ограничить области видимости и не допускать конфликтов, использовали замыкания и IIFE.

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

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

В сентябре 2025 года банк НОВИКОМ анонсировал запуск нового сайта

Совместно с клиентом мы выпустили в продакшн интерактивную платформу, которая соответствует новому имиджу компании. 

1. Разработали меню и структуру сайта, сократив путь до целевого действия до 3 кликов.
2. Адаптировали интерфейс для мобильных устройств.
3. Создали дизайн в соответствии с трендами и новым стилем бренда.
4. Выделили уникальные преимущества услуг и продуктов.
5. Расширили и модернизировали функционал по всем направлениям деятельности банка НОВИКОМ.

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