Разработка фичи для «Яндекс.Почты»

Или что такое Курсовая в Яндексе.

Ivan Kuzmin
Дизайн-кабак

--

В конце 2k19 мне посчастливилось поучаствовать в проекте “Курсовая от Яндекса”. Суть проекта — собрать команду из 4 человек, которые учились на UX/UI дизайнеров, и дать продуктовую задачу с ментором на месяц и посмотреть как они будут вариться в этом котле.

Про задачу

Задача касалась веб-клиента Яндекс.Почты и звучала так

Есть свободная зона в почте, когда письма не выбраны, необходимо придумать полезную фичу и протестировать ее

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

Подготовка

Организуем командные взаимодействие, для этого используем сервис Notion.

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

Доски на проекте

Погнали! Составляем список недельных спринтов по итогу которых проводим встречу с куратором.

  1. Исследования — собираем информацию.
  2. Вайфрейминг — проектируем взаимодействие.
  3. Макет и тестирование — рисуем.
  4. Презентация — защищаемся.

Собираемся за круглым столом и генерируем идеи-гипотезы для проверки на исследованиях.

Спринт первый. Исследования.

Цель наших исследований выяснить какая информация хранится в почте и какие сложности при взаимодействии испытывает пользователь.

Качественные опросы

Настало время спросить у людей как они пользуются почтой.

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

Вопросы составляем таким образом чтобы понять какой контент храниться на почте и проверить наши гипотезы.

28 человек опрошено, отброшены часть гипотез и составлены вопросы для проверки количественными исследованиями.

Количественные опросы

Количественные исследования помогают собрать конкретные цифры об аудитории и подтвердить или опровергнуть факты которые получили на этапе качественных исследований.

Готовим вопросы для размещения в социальных сетях через сервис Google Forms и активно репостим, чтобы увеличить охват аудитории.
Вуаля, 200+ человек ответили на вопросы и вот что узнали ↓.

Анализ конкурентов

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

  1. Фильтр по группам у новой почты Mail.ru
  2. Вкладка с умным списком писем у Spark
  3. Оплаты штрафов налогов в Mail.ru
  4. В экосистеме Apple события из писем попадают в календарь

Итоги первого спринта

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

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

Люди положительно относятся к рекомендациям, если они соответствуют их интересам

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

Ниже рассмотрим работу над умной выдачей писем и рекомендательными сервисами — функционал который достался мне.

Спринт второй. Wireframing.

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

Решение с лентой в соц.сетях кажется интересным. Лента выводит контент по важности и включает в себя статические блоки для быстрого доступа, остановимся на этой идеи.

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

Рекомендация сервисов Яндекса

Мысль которая меня не отпускает с начала проекта

Почта это большой кластер знаний о пользователе, который можно использовать для рекомендации сервисов Яндекса.

К примеру “Почта” знает на какие концерты ты пойдешь или ходил и рекомендует похожие через сервис “Яндекс.Афиша” или похожую музыку в “Яндекс.Музыки”.

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

Если пользователь пользуется сервисом “Яндекс.Музыка”, то его мотив очевиден и контекст тоже — прослушивание музыки. К рекомендациями он отнесется с воодушевлением.

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

Вернемся к этому вопросу позже, подумав над другим местом в почте, где можно попробовать реализовать эту идею.

Умная выдача

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

Исследование показало какая информация в почте наиболее важная. Теперь составим приоритет событий, который позволит предугадывать действия пользователей.

С приоритетом стало более-менее понятно, далее необходимо определиться с архитектурой самого блока ленты.

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

В тело блока выведем важную информацию из письма: вложения, коды, ссылки восстановления, кнопки оплаты и тп. По задумке это должно ускорить процесс выполнение задачи пользователя.

Немного о метриках

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

  • activation (осознал ли пользователь ценность);
  • engagement (продолжает ли он получать пользу);
  • retention (удержание)

Спринт третий. Макет и тестирование.

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

Календарь, Контакты, Диск — смежные сервисы Почты. Попробуем за счет виджетов увеличить переходы, наделив их ценностью для пользователя.

Контакты — последние контакты с кем велась переписка

Календарь — предшествующие события, в том числе автоматически занесенные из писем.

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

Блоки в ленте важная часть нашего дашборда. Прикинем варианты контента в теле блока и подумаем над отображением.

Блок с паролями и регистрациями будет играть роль своеобразного Push-App. За счет внешнего и вида выделим его среди других блоков, выведем вверх ленты и позволим пользователю сразу скопировать код-пароль или переходить по ссылкам.

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

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

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

Осталось собрать интерактивный прототип для тестирования на пользователях.

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

Интерактивный прототип

Тестирование

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

Тестировать будем методом наблюдения за пользователями во время выполнения задания. Основная задача — протестировать дашборд на скорость поиска информации в зависимости от сценария.

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

Есть риск, что люди привыкли пользоваться определенным паттерном и ценность нового функционала смогут понять только со временем. Поэтому дополнительно готовим вопросы для оценки функционала.

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

Люди привыкли видеть почту в определенном виде и такие нововведения порождают недопонимание.

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

Защита курсовой в Яндексе

На защите присутствовали руководители и дизайнеры из различных команд Яндекса.

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

Наше решение больше призвано вызывать лояльность к почтовому клиенту, чем монитизировать ее в будущем.

Это не коммерческая статья, созданная по собственной инициативе. Яндекс к ней не имеет отношения.

--

--