Привет! Я Таня Кацубо — дизайнер в Авито. Когда я только начинала работать, столкнулась с тем, что бо́льшая часть задач продуктового дизайнера — это не отрисовка макетов и создание удобного интерфейса, а согласования, бизнес-процессы, обсуждение рисков и метрик. Всё это казалось мне сложным и скучным, пока однажды я не заметила, как сильно это напоминает продуманную настольную игру. А я такое люблю.
В статье рассказываю, как выстроены процессы в продуктовой команде Авито, показываю, с какими задачами сталкиваются дизайнеры, и пробую доказать вам, что если относиться к работе как игре — процессы могут быть куда увлекательнее. Статья будет интересна начинающим дизайнерам и тем, кто только пришёл в продуктовую команду и пока не понимает, как там выстроены процессы.
Дисклеймер
Мы с командой искали способ увеличить метрику конверсий в оплату с карточки товара. Процесс строился по методологии double diamond, а чтобы сделать процесс нагляднее — я провела аналогию с настольной игрой и нарисовала карту. Некоторые шаги проработки продукта я опустила, чтобы не растягивать материал, и оставила этапы, где дизайнер участвует больше всего.
Про то, как мы используем методологию double diamond, я тоже не буду рассказывать подробно, но вы можете узнать об этом из статьи «Продуктовые процессы в Авито» от моего коллеги Кости Шадрина.
Что внутри статьи:
Правила игры — понимание задачи
Ещё раз коротко: как мы с командой прорабатывали новый продукт «Реальный один клик»
Правила игры — понимание задачи
Первый шаг в любой настольной игре — узнать правила: в чём смысл игры, какие условия нужно выполнить, чтобы победить, как выглядит карта и куда ходить. Такой же этап есть и в работе продуктового дизайнера.
В начале квартала продакт приносит гипотезу, с которой команда будет работать — это и есть задача, требующая решения. Картой для нас служит double diamond — стандартный путь продукта в компании от построения гипотезы до выхода в продакшен. Я визуализировала эту схему так, чтобы она стала похожа на настоящую карту для настольной игры:
Получилось 2 острова: левый отражает процесс discovery, правый — delivery, а между ними — множество небольших этапов, которые проходят команды в процессе проработки продуктов.
Вызов: покупка в один клик
Сейчас стандартный пользовательский фолу покупки товара на Авито выглядит так: человеку нужно перейти в чекаут, проверить товар, перейти в оплату, получить проверочный код и оплатить.
Продакт же предложил протестировать возможность изменить этот флоу и сократить весь процесс покупки до одного шага — нажатия на кнопку «Купить в один клик». Проект мы так и назвали: «Реальный один клик».
Цель нашей игры — увеличить метрику покупок из карточки товара.
Здесь нас ждало первое препятствие: другие кнопки покупки на карточке товара. Купить товар из карточки объявления можно сразу несколькими способами:
купить с доставкой;
добавить в корзину и купить из неё;
связаться с продавцом и договориться о сделке лично.
Для всего этого на карточке товара есть отдельные кнопки, поэтому мы понимали, что добавление ещё одной могло повлиять на пользовательский флоу и снизить все метрики продукта.
Учитывая обстоятельства, мы точнее сформулировали задачу: придумать блок, который отличался бы от всех остальных на карточке, не отпугивал пользователей и не занижал метрики по другим оплатам, а наоборот — растил конверсию в оплату.
Договорились, что победой в такой игре будем считать зелёные результаты A/B-тестов и последующую раскатку продукта на пользователей Авито.
Так мы с командой освоили правила «Игры» — настало время делать первый ход.
Первая фаза игры — дискавери
На первом шаге игры ведущий обычно раздаёт карточки. В нашем случае такими карточками были тестовые макеты, которые мы отправились рисовать после обсуждения гипотезы. Без тестовых макетов сделать ходы не получится.
Проработали около ста вариантов расположения, формы и размера новой кнопки, вот несколько примеров:
После проработки разных вариантов расположения и формы блока мы решили разместить его в нижней части карточки товара под основными кнопками действия: «Добавить в корзину», «Купить с доставкой». Сделали так, чтобы отделить кнопку покупки в один клик от других и не путать пользователей.
Поместили на кнопку сумму оплаты, а ещё добавили рядом информацию о карте, чтобы сразу показать, откуда спишут деньги.
Получили на руки 100 карт с макетами для продукта «Реальный один клик». Теперь можно делать ход и двигаться на следующие поля для обсуждения макетов.
Отправились на поле «Дизайн комитет» со стопкой макетов
Тут у меня есть совет:
На каждом шаге игры обращайтесь за помощью к диско-команде или другим дизайнерам. Делать это можно неограниченное количество раз, но важно чётко формулировать проблему и вопросы, иначе всё только усложнится, а советы будут размытыми и добавят вам новых проблем.
Дизайн комитетом мы в Авито называем группу арт-директоров и других лидов, к которым можно обратиться, чтобы получить советы по доработке макетов.
Я собрала вводные по задаче, написала вопросы и пошла с этим к коллегам. Арт-директора помогли мне проработать аудиторию новой фичи, сделать оформление более простым, а кнопку более заметной.
После обсуждения макетов с арт-директорами и нескольких раундов доработки мы готовы делать следующий шаг — двигаться к продакту для согласования.
Двинулись на поле «Продакт»
Продакт помог нам финализировать макеты, определил дальнейшие шаги и дал доступ к следующему этапу — delivery.
После обсуждений и согласований с командой мы решили разместить блок «Купить в один клик» внизу карточки товара и с этим макетом двинулись на остров, где живут разработчики.
Вторая фаза игры — деливери
На участке develop правила немного меняются и появляются новые препятствия. Карты тут — это уже не макеты дизайнов, которые мы разрабатывали на прошлом шаге, а технические ограничения. Вот несколько карт, которые мы получили:
Обычно дизайн продуктов не существует в вакууме. Когда гипотеза доходит до этапа delivery, появляются дополнительные вводные, например: сложности с отображением элементов на экранах с разным разрешением, ограничения системы оплаты, несоответствие начальных ожиданий дизайнера и макетов после разработки, юридические тонкости. Все эти поля дизайнер тоже проходит вместе с командой и шаг за шагом дорабатывает макет.
Перешли на поле «Финансы»
Так как наш продукт был связан с оплатой товаров, первое поле, на которое мы отправились — отдел финансов. Здесь нужно было узнать у коллег, какие возможности и ограничения у нас есть. Например, в первой фазе игры мы поместили рядом с кнопкой оплаты логотип банка и номер карты пользователя, которая подключена к Авито.
Когда мы пришли в отдел финансов, оказалось, что определять банк и отображать его логотип в интерфейсе нет возможности, зато можно показать платёжную систему привязанной карты. Например: Visa или MasterCard.
Получив новые вводные, я пошла перерисовывать макеты. В результате получился такой набор карт:
Двинулись на поле «Юристы»
После доработок на поле финансов мы с командой отправились к юристам. Чтобы сделать оплату в один клик быстрой и простой, мы добавили на макет кнопку «Купить в один клик». Если у пользователя в мобильном приложении подключена банковская карта, то оплата должна происходить автоматически после нажатия.
Вот как это выглядело в интерфейсе:
Но юристы объяснили, что делать такую кнопку небезопасно. Человек может случайно нажать на неё и деньги тут же спишутся с карты. Чтобы идти дальше, нам нужно было найти решение, как защитить пользователей от мискликов и при этом оставить оплату быстрой и простой.
В итоге решили сделать слайдер вместо кнопки. Проработали разные варианты и остановились на таком:
Чтобы произвести оплату, человеку теперь нужно провести пальцем слайдер до конца — и только тогда деньги спишутся с карты. Благодаря такому решению мы сделали процесс оплаты более осмысленным и защитили пользователей от мискликов.
Пошли на поле «Разработка»
До этого мы решили, что будем делать слайдер с надписью «Купить в один клик» — такое решение поможет избежать случайных нажатий. А чтобы привлечь внимание пользователей к новой фиче, коллеги из дизайн комитета посоветовали нам добавить анимацию с переливом цветов на надписи «Купить в один клик».
С этим запросом мы и пришли в команду разработки. Но в процессе проработки анимации слайдера мы с разработчиками столкнулись со сложностями и получили пачку новых карт.
Сделать градиент и анимацию оказалось не самой простой задачей. Нам с разработчиками потребовалось несколько итераций, чтобы определиться с цветом перелива, скоростью и логикой этой анимации.
Ещё один вопрос возник, когда мы решали, как долго пользователю нужно будет тянуть слайдер, чтобы оплата прошла. Так как мы хотели защитить покупателей от случайных нажатий, то и слайдер тоже нужно было сделать «безопасным», чтобы от малейшего прикосновения к нему не происходило автоматической оплаты. Мы с коллегами вручную тестировали слайдер, определяли, как долго его нужно тянуть, чтобы оплата прошла успешно.
После прохождения всех участков карт с проблемами у вас на руках остаться не должно.
Битва с боссом — A/B-тест
После того как макеты согласованы, а бизнес дал добро, нас ждёт финальный босс — A/B-тест.
Условия выигрыша такие: если метрики прокрасятся зелёным — мы победили, красным — проиграли.
Наш новый продукт был рассчитан только на мобильное приложение Авито, поэтому тесты мы прокатили на пользователей iOS и Android. Одной части показывали объявления с кнопкой «Купить в один клик», а другой — стандартные объявления без этой возможности.
После проведения A/B мы увидели, что пользователи Android совсем не пользуются новой кнопкой, а пользователи iOS покупают товары с помощью быстрой оплаты, но не так часто, как нам хотелось бы. В итоге на тестах мы не получили положительных результатов, поэтому проигранная битва с боссом вернула нас в начало игры, где мы снова запустили процесс дискавери.
После первой партии мы с командой поняли, что можно доработать в продукте. Например, подумать над расположением блока, его яркостью и поработать с техническими ограничениями, чтобы для пользователей новый блок стал более заметным и понятным.
Ещё раз коротко: как мы с командой прорабатывали новый продукт «Реальный один клик»
Давайте еще раз посмотрим, как выглядело наше дизайнерское приключение:
Вместе с дискавери-командой придумали и разработали гипотезу нового продукта и отрисовали более ста макетов с дизайнами.
Собрали фидбэк от дизайн комитета и выбрали из ста макетов один. А ещё получили полезные советы, которые потом помогли на защите продукта перед бизнесом.
Отработали пачку сложностей и ограничений от коллег из юридического и финансового отделов. И и проработали все из них: сделали оплату в один клик безопасной, а также перерисовали макеты, чтобы отображать данные карты корректно.
Вместе с командой разработчиков финализировали продукт: доработали анимацию слайдера, переделали макеты под разные разрешения экранов и продумали логику оплаты с технической точки зрения.
Провели A/B-тест и поняли, что ещё есть над чем работать.
Теперь нам предстоит проделать работу над ошибками и уже с новыми версиями вновь сразиться с финальным боссом — только теперь на нашей стороне большое преимущество в виде опыта.
После всех итераций игры я сформулировала такой совет: попробуйте относиться к рабочим задачам как к настольной игре и проходите уровни с интересом.
С таким майндсетом вы сможете сместить своё внимание с неудач. Каждая пройденная партия игры даёт новые знания о пользователях и продукте, прокачивает навык договариваться с коллегами из разных отделов, да и в целом улучшает умение работать в команде. Возможно, благодаря такому подходу, процесс работы над новыми задачами станет для вас более увлекательным.
Всегда помните, что задача дизайнера в продуктовой команде — не придумать самый красивый интерфейс, а протестировать гипотезу и получить инсайты от пользователей как можно скорее. На языке продактов — сократить time to market. Прежде всего советую на всех этапах пути как можно чаще обращаться к вашей дизайн-системе. Скорее всего, там уже есть часть решений, которые используются в продукте. Вы сможете взять оттуда готовый вариант дизайна и не будете тратить время на доработки.
Спасибо за внимание к статье! Буду рада ответить на ваши вопросы в комментариях.