Редизайн сайта банка «Йошкар-Ола»

Разработка современного и функционального
сайта для банка в Республике Марий Эл

Дата

Что сделано

Роль

JTBD, конкурентный анализ, CJM, архитектура сайта, прототипирование, дизайн

UX / UI дизайнер

Ноябрь 2023 → Август 2024

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

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

О проекте

Моя роль в проекте UX | UI дизайнер. Провела анализ рынка и конкурентов и на основе этих данных разработала JTBD. Опираясь на результаты, выстроила информационную архитектуру, составила CJM, создала дизайн-систему с нуля и передала в разработку. Обновила структуру и тексты, создала прототип и презентовала его заказчику.

Роль и вклад

Содержание

01

02

05

04

03

Повысить внимание к уникальным для региона услугам банка

Создать основу для дальнейшего развития сайта

Упростить взаимодействие пользователей с сайтом

Локальные продукты

Развитие

Удобство

Цели

Построить удобную, масштабируемую дизайн-систему и структуру сайта для оптимизации процессов и ускорения обновления

Обновить архитектуру и навигацию сайт, чтобы пользователи легко находили продукты банка

Масштабируемость

Навигация

Задачи

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

Моя задача заключалась в анализе структуры сайтов конкурентов, выявить паттерны пользовательских сценариев и UX-решений, которые влияют на восприятие банка и принятие решения. Я изучала, какие продукты и услуги представлены, на что делают акцент на сайте и какие элементы помогают упростить пользовательский путь:

Анализ конкурентов

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

У крупных банков навигация сегментирована по типам клиентов (частные лица, бизнес, самозанятые). Это снижает когнитивную нагрузку и позволяет пользователю сразу выбрать релевантный сценарий

Навигация и сегментация пользователей

Влияние на решение

На первом экране должен быть один ключевой фокус: ценность для пользователя + популярные продукты + явный следующий шаг

Первый экран либо перегружен информацией (Дом.РФ), либо сфокусирован на популярных продуктах и ключевых сценариях (Сбер, ВТБ). Сфокусированный экран подталкивает к следующему шагу

Первый экран и CTA

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

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

Каталог продуктов

Возможность оформить продукт онлайн,
а также получить помощь через онлайн-чат или виртуального помощника

Онлайн-заявки и оформление без визита в офис становятся стандартом. Отсутствие онлайн-сценария воспринимается как устаревший сервис.

Онлайн-оформление

Интерактивные инструменты и сервисы повышают уверенность, помогают выбрать продукт и стимулируют подачу заявки

Калькуляторы (ипотека, вклады, кредиты) и сервисы (мобильные приложения, бонусные программы) помогают пользователю примерить продукт, повышают вовлеченность и доверие

Инструменты и сервисы

Доверие должно быть явно показано,
а поддержка — легко доступна (контакты, чат, форма обратной связи)

История, лицензии, рейтинги, награды, отзывы. Контакты и онлайн-чат легко доступны. Это снижает тревожность и барьер принятия решения

Доверие и поддержка

Наблюдение по рынку

Критерий

Jobs to Be Done

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

Job Stories 1

Общее понимание банка

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

Main Job:

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

Job Stories 2

Понять надежность и статус банка

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

Job Stories 3

Быстрый обзор продуктов

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

Job Stories 4

Углубиться
в конкретную услугу

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

Job Stories 5

Сделать следующий шаг

Эти Job Story легли в основу JTBD Map, показывающей, как пользователь достигает своей цели, с какими проблемами сталкивается и какие UX-решения помогут ему на каждом шаге

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

Используя выводы из JTBD Map, я построила архитектуру сайта, которая логично организует контент, облегчая путь пользователя от понимания банка до оформления услуги

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

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

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

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

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

Дизайн

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

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

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

Раздел расчета кредитов
и вкладов для физических лиц

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