Привет, Хабр! В этой статье хочу рассказать, как мы в ОТП Банке делали новый титульный экран платежей. Это один из первых кейсов, когда в трайбе Digital мы постарались применить продуктовый подход, а именно - провести исследования текущего решения с точки зрения пользователей и данных, определить проблематику, проанализировать конкурентов, выработать концепт с учетом лучших практик и трендов, и приземлить этот концепта на нашу реальность.

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

Анализ старого экрана

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

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

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

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

Поиск идей

Сначала мы собрали референсы и изучили банковские приложения на российском и зарубежных рынках. Внимательно посмотрели на решения прямых и непрямых конкурентов, так как это помогает увидеть общую картину и понять движение рынка. Хочется отметить, что не стоит фокусироваться только на больших игроках. Да, из-за количества пользователей они задают тренды и формируют привычки клиентов, но и у игроков «поменьше» тоже могут быть нестандартные и смелые решения. Поэтому важно не ограничивать себя заранее, чтобы не упустить что-то стоящее.

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

• какие общие паттерны присутствуют;

• чем отличаются решения;

• что интересного или необычного удалось найти и т.д.

Взгляд на своих пользователей 

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

• какой функционал популярен среди всей аудитории, а какой не очень;

• насколько регулярно используются те или иные функции конкретными группами клиентов;

• что в текущей реализации кажется удобным, а что, наоборот, раздражает.

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

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

Разработка концепта: первый этап

После сбора информации мы построили user-flow, схему пользовательского пути. Она помогла посмотреть «шире» на сценарии в приложении и найти неочевидные вопросы. Например: «Что, если у пользователя не подключена СБП?». И другие случаи, которые раньше не замечались.

Метод оказался эффективным: благодаря ему появился первый концепт нового экрана платежей и переводов. Он получился удобным, ожидаемым, соответствующим привычным паттернам.

Мы посмотрели на новую концепцию и решили, что она — квинтэссенция решений других компаний, но не нашей. Отлично! Значит, такой user-flow можно использовать как структуру. 

Дизайн и то, с чем мы столкнулись

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

В качестве инструмента, который помог посмотреть на интерфейс по-новому, мы выбрали методологию дизайн-спринта и адаптировали ее под свои потребности.
Оставляем ссылку на оригинальное описание про дизайн-спринт от Google, если захочется больше деталей: https://designsprintkit.withgoogle.com/. Спойлер: наша команда сделала основной упор на время и проработку идеи.

Новое решение: дизайн-спринт

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

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

2. Провести интервью с экспертами из разных продуктовых команд банка. Чтобы получить детали о болях пользователей.

3. Полученные инсайты записать в виде вопросов. Как мы можем помочь клиентам достичь их цели? Как бизнесу увеличить показатели через этот функционал?

На первых парах следует избегать группового мышления. Лучше генерировать идеи и анализировать решения индивидуально в каждой короткой сессии. После того, как каждый подготовит свое предложение, мы вместе обсуждаем находки, голосуем, приоритизируем и «сшиваем» из набросков некого Франкенштейна. Так получается первая наработка концепта.

Разработка концепта: второй этап

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

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

Демо и тестирование

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

Когда результат UX-исследований готов, наша команда анализирует его и при необходимости вносим правки. Это и есть финальный этап, после чего мы получаем новую структуру интерфейса.

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

Приземление концепции на реальность

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

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

Очень важно…

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

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

P.S. Спасибо нашему Рroduct owner Егору за помощь в подготовке статьи:)