Всем привет! Меня зовут Владимир, я Product Designer из ОТП Банка команды «Платежи и переводы». После редизайна сервиса обмена валюты, я решил поделиться процессом реализации и рассказать, на что стоит обратить внимание в ходе работы и какие инструменты могут помочь в решении задачи.
Описание сервиса
Итак, перейдем к сути. Одним из типов платежей и переводов является сервис покупки и продажи валюты. Пользователь имеет возможность обменять доступные валютные пары по банковскому курсу без каких-либо ограничений, но если он захочет произвести обмен USD или EUR на сумму от 300 тысяч рублей, то мы предоставляем ему возможность осуществить этот перевод по курсу близкому к биржевому, который является более выгодным для клиента и обновляется каждые 20 секунд. Обменять валюту по такому курсу возможно по будням с 10:15 до 18:00 (МСК), когда работает биржа.
Цель
Цели можно разделить на две группы.
Дизайн-цели:
- максимальное сокращение пользовательского пути (обмен валют в пару кликов)
- избавление от ошибочных UX-решений, принятых при проектировании прошлого решения (например, автоподстановка всех средств с выбранного счета списания в поле суммы обмена или необходимость вручную обновлять курс по истечению 20 секунд)
И продуктовые цели:
- увеличение количества клиентов, совершающих обмен валют,
- мотивация клиента совершать более крупные сделки, за счет информирования о наличии более выгодного курса при больших объемах обмена
Перед нашей командой стояла задача переработать сервис, переписать его техническую составляющую с нуля на новом языке и освежить визуальную часть, разработанную на устаревшей дизайн-системе.
Наш банк стремительно развивается, и при разработке этого сервиса мы решились на эксперимент - не просто собрать новый интерфейс из компонентов актуальной дизайнсистемы, а сформировать новый вектор визуального развития раздела платежей.
Исследование конкурентов
Для формирования видения продукта свою работу начали со сбора существующих решений как прямых конкурентов в банковской сфере, так и приложений для отправки переводов за рубеж с конвертацией, онлайн-брокерами для инвестиций и различными сервисами для работы с цифровыми валютами. Если вы столкнулись с проблемой при сборе конкурентных приложений, то можно воспользоваться сервисами по типу Mobbin, на платформе доступно более 250 приложений и 25 000 шаблонов (скриншотов с мобильных устройств) из магазинов приложений в разных странах.
Функциональные требования. Формирование и проверка гипотез
После сбора скринов проанализировали их, и выписали функциональные возможности по каждому из приложений, как стандартные, ожидаемые пользователем, так и на первый взгляд необычные фичи.
По результатам проведенного анализа формируем единый список из возможных фич. Можно разделить их на две группы:
- Повторяющиеся: используемые у большинства конкурентов, скорее всего, для пользователя они по умолчанию ожидаемы.
- Единично встречающиеся, но имеющие потенциал полезности.
На основе списка сформулировали гипотезы и проверили их на респондентах, сделав основной упор на проверку гипотез из единично встречающихся функций. Проверить гипотезы можно проведя как количественные (опросники), так и качественные исследования (интервью). По результатам исследования, функции, получившие наибольший отклик от респондентов, преобразовываются в функциональные требования к будущему продукту.
Сбор референсов и определение концептуального видения
Так как при переработке сервиса перед нами стояла задача не только улучшить пользовательский опыт, но и сформировать новое видение для всех типов платежей и переводов, то следующим этапом мы отправились на дизайнерские ресурсы за поиском вдохновения и сбора визуальных референсов. Ресурсами в этот раз для нас выступали до боли знакомые dribbble, behance и awwwards.
Просмотрев и отобрав большое количество референсов, принял решение сфокусировать внимание пользователя на цифрах и строить визуальную составляющую на типографике цифр. Также был отобран нестандартный шрифт для усиления визуального эффекта концепта.
Отрисовка концептов
В процессе разработки сформировали более 20 различных концептов, но, в результате коллективного обсуждения и отбора, решили остановиться на двух основных вариантах. Эти варианты мы доработали до минимально необходимого проработанного флоу и по результатам юзабилити тестирования остановились на одном из них, в котором доработали моменты, вызвавшие у респондентов вопросы и затруднения.
Параллельно с этим проводили демо отдельно с лидами разработки, на котором обсуждали технические возможности и ограничениях, с которыми можем столкнуться при реализации интерфейса. Подобные обсуждения проводим периодически, до момента получения окончательного утверждения со стороны разработки.
Формирование полного флоу
По стандартам нашей команды, результатом работы дизайнера, своего рода артефактом, будет считаться подробно реализованный флоу в фигме с проработкой всех возможных состояний интерфейса (пустые, заполненные, загрузки, ошибки и т.д.), с добавлением условных операторов на развилках пользовательского пути. Флоу должен быть реализован таким образом, чтобы любой представитель соседней команды или трайба мог легко ориентироваться в макетах и, при необходимости, самостоятельно погрузиться в продукт.
После реализации в фигме полного флоу, собрали кликабельный прототип и провели исследование, перед тем, как окончательно отдать макеты в разработку.
Тестирование интерфейса и сбор обратной связи
Вывод продукта на пользователей начинается с ограниченного круга лиц, его сопровождает сбор обратной связи как в формате опросов, по результатам взаимодействия пользователя с интерфейсом, так и в формате интервью, если есть возможность.
Метрики
Также не стоит забывать и об отслеживании метрик на всех этапах раскатки продукта на пользователей – то, чем мы займемся в будущем, чтобы своевременно вносить доработки, удовлетворяющие поведению и ожиданию пользователей вашего интерфейса.
Например, один из вопросов, который мы хотим понять — будет ли пользователь обращать внимание на выгодные курсы валют. Для этого нам нужно отслеживать метрики, динамику их изменения, и сравнивать показатели с данными до переработки сервиса.
Что сейчас
В момент написания статьи сервис обмена валют находится в разработке, а насколько эффективно наше новое решение покажут метрики после выкатки обновленного сервиса в сторы. Это все, что я хотел рассказать про наш процесс работы над данным сервисом. Надеюсь, вам было полезно. Буду рад ответить вам на ваши вопросы в комментариях.
