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

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

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

— мобильная версия работает нестабильно, хотя почти 80% трафика — со смартфонов;

— путь к ключевым продуктам слишком длинный;

— отсутствуют явные акценты для частных лиц, которые составляют 75% посетителей;

— нет удобных инструментов — калькуляторов, фильтров, быстрых сценариев;

— формы перегружены и снижают конверсию.

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

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

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

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

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

— зеленый для частных лиц,

— оранжевый для корпоративных клиентов,

— желтый для малого и среднего бизнеса,

— графитовый для финансовых институтов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

— Разработали меню и структуру сайта, сократив путь до целевого действия до 3 кликов.

— Адаптировали интерфейс для мобильных устройств.

— Создали дизайн в соответствии с трендами и новым стилем бренда.

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

— Расширили и модернизировали функционал по всем направлениям деятельности банка НОВИКОМ.

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