Привет, Хабр! В этой статье хочу рассказать, как мы в ОТП Банке делали новый титульный экран платежей. Это один из первых кейсов, когда в трайбе Digital мы постарались применить продуктовый подход, а именно — провести исследования текущего решения с точки зрения пользователей и данных, определить проблематику, проанализировать конкурентов, выработать концепт с учетом лучших практик и трендов, и приземлить этот концепта на нашу реальность.
Работа над новым дизайном экрана «Платежи и переводы» стала для нас не просто обновлением интерфейса, а полноценной трансформацией приложения. Старый экран выполнял свои функции, но морально устарел и не отвечал современным потребностям пользователей. В этой статье мы подробно расскажем, как нам удалось адаптировать методологию дизайн-спринта, чтобы создать нечто новое и удобное. При этом сохранить традиционные элементы, знакомые и понятные клиентам.
Анализ старого экрана
Скажем честно, от наших пользователей не было много запросов изменить экран платежей. Он успешно решал свои основные задачи, но имел ряд проблем.
-
Устаревший UI и старая дизайн-система, а точнее ее отсутствие на этом экране. Приложение разрабатывалось давно, и во многих экранах используются локальные копии компонентов. Это усложняет процессы тестирования и разработки приложения.
-
Отсутствие гибкости в настройке и наполнении экрана. То есть мы не могли быстро, без больших доработок и тестирования, включать и отключать какие-то функции экрана или настраивать их отображение.
Поэтому при подходе к редизайну мы отталкивались не только от его основных задач, но и от нашего видения на затраты и дальнейшую работу.
Поиск идей
Сначала мы собрали референсы и изучили банковские приложения на российском и зарубежных рынках. Внимательно посмотрели на решения прямых и непрямых конкурентов, так как это помогает увидеть общую картину и понять движение рынка. Хочется отметить, что не стоит фокусироваться только на больших игроках. Да, из-за количества пользователей они задают тренды и формируют привычки клиентов, но и у игроков «поменьше» тоже могут быть нестандартные и смелые решения. Поэтому важно не ограничивать себя заранее, чтобы не упустить что-то стоящее.
После исследования конкурентов мы подготовили материалы для более детального анализа и разбили его на тезисы. Что у нас получилось:
-
какие общие паттерны присутствуют;
-
чем отличаются решения;
-
что интересного или необычного удалось найти и т.д.
Взгляд на своих пользователей
Обзор конкурентов — это важная часть бизнес-стратегии, но не нужно забывать про предпочтения и поведение своих пользователей. Поэтому мы учли:
-
какой функционал популярен среди всей аудитории, а какой не очень;
-
насколько регулярно используются те или иные функции конкретными группами клиентов;
-
что в текущей реализации кажется удобным, а что, наоборот, раздражает.
Чтобы собрать количественную информацию, наша команда проанализировала данные в системах аналитики и выявила самые популярные функции среди пользователей. Работу с ними мы поставили в приоритет, а остальное отложили на будущее. Также обратили внимание на функционал, который необходим банку для вовлечения клиентов, но не очень популярен среди них.
Следующий этап: провести глубинные интервью с нашими пользователями, чтобы получить больше контекста. Исследование поможет узнать, что пользователям нравится в текущей реализации, чего не хватает и что сделано не очень удобно.
Разработка концепта: первый этап
После сбора информации мы построили user-flow, схему пользовательского пути. Она помогла посмотреть «шире» на сценарии в приложении и найти неочевидные вопросы. Например: «Что, если у пользователя не подключена СБП?». И другие случаи, которые раньше не замечались.
Метод оказался эффективным: благодаря ему появился первый концепт нового экрана платежей и переводов. Он получился удобным, ожидаемым, соответствующим привычным паттернам.
Мы посмотрели на новую концепцию и решили, что она — квинтэссенция решений других компаний, но не нашей. Отлично! Значит, такой user-flow можно использовать как структуру.
Дизайн и то, с чем мы столкнулись
Когда работаешь в рамках одного продукта долгое время, взгляд замыливается даже у опытных ребят. Поэтому мы обычно собираем мудборды разных интерфейсов, иногда даже не существующих. Так у нас получилась доска любопытных решений, которые можно попробовать в работе.
В качестве инструмента, который помог посмотреть на интерфейс по-новому, мы выбрали методологию дизайн-спринта и адаптировали ее под свои потребности.
Оставляем ссылку на оригинальное описание про дизайн-спринт от Google, если захочется больше деталей: https://designsprintkit.withgoogle.com/. Спойлер: наша команда сделала основной упор на время и проработку идеи.
Новое решение: дизайн-спринт
Дизайн-спринт — это быстрый эксперимент. Чтобы избежать хаоса и не потратить время впустую, мы составили небольшой план действий.
-
Сформулировать цель и задать основные вопросы. Это основной момент, который помогает выявить задачи спринта.
-
Провести интервью с экспертами из разных продуктовых команд банка. Чтобы получить детали о болях пользователей.
-
Полученные инсайты записать в виде вопросов. Как мы можем помочь клиентам достичь их цели? Как бизнесу увеличить показатели через этот функционал?
На первых парах следует избегать группового мышления. Лучше генерировать идеи и анализировать решения индивидуально в каждой короткой сессии. После того, как каждый подготовит свое предложение, мы вместе обсуждаем находки, голосуем, приоритизируем и «сшиваем» из набросков некого Франкенштейна. Так получается первая наработка концепта.
Разработка концепта: второй этап
Далее перед нами стоит непростая задача: разделиться снова — каждый создает своё виденье финала, а затем собраться вновь, выбрать лучшие детали, проголосовать и обсудить, и уже общими усилиями успеть в срок собрать единый прототип.
Суть этого упражнения: максимально использовать мозг каждого участника на пользу единой концепции. Сделать это быстро, «жонглируя» идеями во время совместного мозгового штурма. Вся идеология дизайн-спринта построена на постоянном разделении на индивидуальное креативное мышление, и затем сборе лучших идей в единую концепцию на групповой сессии.
Демо и тестирование
За пределами спринта мы проводим демо для основных стейкхолдеров и собираем первый фидбек. Взвесив обратную связь, вносим корректировки и отправляем прототип на сustdev в отдел UX-исследований. Проводим глубинные интервью с пользователями, чтобы уже на этом этапе выявить ошибки проектирования. Так как они могут быть неочевидны из-за замыленного взгляда или слишком глубокого погружения в контекст.
Когда результат UX-исследований готов, наша команда анализирует его и при необходимости вносим правки. Это и есть финальный этап, после чего мы получаем новую структуру интерфейса.
С помощью дизайн-спринта нам за неделю удалось создать абсолютно новый концепт разводящей страницы. Потратили на это целую рабочую неделю, четырех UI/UX-дизайнеров и арт-директора. Активно привлекали внутренних экспертов из разных трайбов.
Приземление концепции на реальность
В процессе разработки целевой концепции мы старались не ставить себе рамки. Но на стадии верхнеуровнего груминга с командой разработки и основными стейкхолдерами наш концепт приземляется на бизнес и техническую реальность. Это нормальная практика. В бизнесе ограничения будут всегда, и наша — задача научиться подстраиваться под них.
С одной стороны, это позволяет выработать видение, которое возможно реализовать сравнительно небольшими затратами. С другой — учитывает наш взгляд в будущее с точки зрения бизнеса и технологий. А также прорабатывает роадмап, который приводит нас от первого варианта реализации до целевого видения.
Очень важно…
…Находить способы выходить за рамки своего продукта. Устраивать командные посиделки и глубокий мозговой штурм. Не нужно валидировать свои решения с разработчиками и экспертами раньше времени. Лучше донести идеи до интервью с пользователями, послушать фидбек, вдохновиться, откалибровать свое видение. А потом уверенно и настойчиво идти прорабатывать и преодолевать технические ограничения. А еще не забывать зарядить себя и всю команду конкретной целью: поменять процессы и создать лучший клиентский опыт.
Это был наш первый подход к методологии дизайн-спринта. Сейчас, когда мы уже отдышались и посмотрели на проделанную работу, можем с уверенностью сказать: мы сюда еще вернемся, сделаем лучше и интерфейс, и сам процесс:)
P.S. Спасибо нашему Рroduct owner Егору за помощь в подготовке статьи:)
ссылка на оригинал статьи https://habr.com/ru/articles/841066/
Добавить комментарий