Разработка продуктовых страниц

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

Проект делался для ежегодного тендера от ВТБ.

О продукте:

На проекте я погрузилась в UX-исследования и прошла полный цикл создания продуктовой страницы от аналитики к готовому дизайн-решению.

Разработать и протестировать современное дизайн-решение, которое поможет бизнесу раскрывать ценность продуктов банка и вести пользователей к покупке.

Задача:

Проблематики:

Дизайнер, ответственный за UX/UI продуктовой страницы Дебетовой карты

Мои активности:

4,96 из 5

Оптимизированный пользовательский опыт

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

Дизайн-решение на уровне мирового рынка

Провела конкурентный анализ и создала дизайн-решение на уровне топовых российских и зарубежных банков

Средняя оценка удовлетворения пользователей по итогам UX-исследования

Ключевые результаты:

Задачи продукта Дебетовая карта

Расшифровки интервью

Блоки про кэшбек

Сравнение со старым дизайном

Для начала мы с командой аналитики определили целевую аудиторию и проанализировали структуру и контент текущего дизайн решения, провели конкурентный анализ и сформировали список лучших UX/UI-решений для банковских продуктов. Далее, чтобы сформировать представление о проблемах, возникающих при взаимодействии со страницей, провели серию глубинных интервью и юзабилити-тестирование, по результатам которых мы выявили, какие задачи решают пользователи.

По результатам юзабилити-тестирования и глубинных интервью, команда аналитики спроектировала CJM as is и определила этапы с критичными барьерами на пути пользователя в текущем дизайн-решении. Далее совместно с дизайнерами были составлен идеальный CJM to be без барьеров и на его основе были сделаны mobile-first вайрфреймы и была спроектирована продуктовая страница.

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

Чтобы оценить понимание пользователями ценности продукта , мы провели UX-тесты нового дизайн-решения. По их результатам был определен 1 блок, требующий внесения корректировок в макет — половине респондентов было непонятно, включен или выключен тумблер «Зарплатный клиент» внутри калькулятора выгоды, и что именно он меняет в заявке. Мы перенесли тумблер выше, чтобы пользователь мог сразу настроить его, и добавили пояснение, какое именно преимущество дает статус зарплатного клиента.

Итоговая дизайн-концепция была сделана в 2-х темах, по ней была собрана дизайн-система на токенах, оптимизированная под дальнейшее масштабирование на весь сайт.

Исправленный тумблер зарплатного клиента