Редизайн сайта банка «Йошкар-Ола»
Разработка современного и функционального
сайта для банка в Республике Марий Эл
сайта для банка в Республике Марий Эл
Дата
Что сделано
Роль
JTBD, конкурентный анализ, CJM, архитектура сайта, прототипирование, дизайн
UX / UI дизайнер
Ноябрь 2023 → Август 2024
С развитием финтеха ожидания пользователей к банковским сервисам изменились. Редизайн должен был превратить сайт в полноценный цифровой канал взаимодействия пользователей с банком.
Банк долгое время был офлайн-ориентированным. Сайт банка разрабатывался в 2000-х годах и носил в основном информационный характер, без продуманных пользовательских сценариев. Из-за отсутствия конкуренции в регионе не было необходимости уделять внимание удобству и визуальной подаче сайта.
О проекте
Моя роль в проекте UX | UI дизайнер. Провела анализ рынка и конкурентов и на основе этих данных разработала JTBD. Опираясь на результаты, выстроила информационную архитектуру, составила CJM, создала дизайн-систему с нуля и передала в разработку. Обновила структуру и тексты, создала прототип, сделала дизайн ключевых страниц и презентовала его заказчику.
Роль и вклад
Проблемы на сайте до редизайна
01 — Проблема
Чтобы определить, какой должна быть новая структура, я посмотрела, как эту задачу решают другие банки. В конкурентном анализе выделила два принципа: начинать навигацию с выбора аудитории и организовывать продукты по понятным категориям
Главная проблема старого сайта была не в отсутствии информации, а в том, что она не была организована вокруг понятных пользовательских задач. Отсутствовало нативное взаимодействие.
Как помочь пользователю понять, что предлагает банк?
На основе этих выводов построила новую структуру. Вместо длинного списка разделов пользователь получает понятную точку входа:
Частным клиентам / Бизнесу → Категория продукта → Конкретный продукт
Частным клиентам / Бизнесу → Категория продукта → Конкретный продукт
Главные экраны я проектировала от задачи быстро понять банк и сразу сделать следующий шаг. Поэтому здесь фокус на акционное предложение и витрина популярных продуктов. Дополнительно предусмотрен переход в мобильное приложение как альтернативный сценарий взаимодействия.
02 — Проблема
Даже когда пользователь понимал, в каком направлении искать, путь оставался слишком длинным. На старом сайте информация раскрывалась через множество уровней навигации, а конечной точкой мог стать большой PDF-файл на стороннем сервисе:
Как сократить путь до информации?
Я сделала продуктовые страницы самостоятельной точкой получения информации.
На странице пользователь последовательно получает:
что это → кому подходит → условия → преимущества → следующий шаг
На странице пользователь последовательно получает:
что это → кому подходит → условия → преимущества → следующий шаг
03 — Проблема
Для уникальных продуктов я выделила отдельное место в структуре сайта: добавила их в пункты меню в шапке и вынесла в карточки с услугами. Для каждого продукта также создала отдельную страницу, где понятно объясняется, что это за продукт, для чего он нужен и в чем его ценность.
У банка есть два собственных продукта, которыми заказчик хотел выделиться на рынке. Но в старой структуре сайта пользователь не встречал их. Это была уже не только пользовательская проблема, но и отдельный бизнес-запрос клиента.
Как показать то, чем банк действительно отличается?
04 — Проблема
В конкурентных сервисах контакты, чат и формы являются частью пользовательского сценария, а не спрятаны отдельно. Поэтому добавила точки контакта непосредственно в сценарии пользователя:
изучил продукт → возник вопрос → связался с банком
изучил продукт → возник вопрос → связался с банком
После изучения продукта пользователь может захотеть уточнить условия или начать оформление.
На старом сайте для этого не было привычного и понятного сценария.
На старом сайте для этого не было привычного и понятного сценария.
Что делать, если информации недостаточно?
Для уникальных продуктов я выделила отдельное место в структуре сайта: добавила их в пункты меню в шапке и вынесла в карточки с услугами. Для каждого продукта также создала отдельную страницу, где понятно объясняется, что это за продукт, для чего он нужен и в чем его ценность.
Процесс работы над сайтом также включал разработку дизайн-системы. Было создано более 40 компонентов с различными состояниями, задан стиль иконок и иллюстраций, прописаны правила применения шрифта и типографики на сайте, а также нотации для разработчиков.
Дизайн-система
- Нет структуры → новая архитектура и навигация помогают понять, какие продукты есть и где их искать.
- Нужное найти сложно → продуктовые страницы сокращают путь до информации и избавляют от необходимости искать ответ во внешних PDF.
- Уникальные продукты никто не видит → два собственных продукта получили отдельный пункт в основной навигации и стали самостоятельной точкой входа.
- Нет легкой коммуникации → формы и другие точки контакта позволяют перейти от изучения продукта к взаимодействию с банком.
Все решения собраны на единой дизайн-системе, которая обеспечивает целостность интерфейсов и позволяет масштабировать сайт.
В результате редизайн перестал быть просто визуальным обновлением.
Я пересобрала путь пользователя от первого знакомства с банком до взаимодействия с ним.
Я пересобрала путь пользователя от первого знакомства с банком до взаимодействия с ним.
Как решения сложились в единый сценарий