Как мы изучали пользователей и тестировали идеи для интерфейсов кулинарного сайта: кейс Pinkman и «Едим Дома»

Менеджер проектов Василий Попов и дизайнер Сергей Соколов из Pinkman рассказали о том, как команда выстроила процесс проверки гипотез и внедрения новых дизайн-решений для проекта «Едим Дома».

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

К нам обратился проект «Едим Дома» команды Юлии Высоцкой. Сайт проекта — это большая экосистема, объединяющая много направлений: каталог рецептов от пользователей и редакции, кулинарную школу, интернет-магазин, личный кабинет, youtube-канал и другие. Каждый месяц сайт посещают 10 млн пользователей.

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

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

В процессе мы конкретизировали задачи:

— убрать барьеры на пути пользователей;

— поработать над мобильной версией;

— обновить дизайн-систему сайта.

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

Мы начали с исследования конкурентов: российских, чтобы понять сильные и слабые стороны «Едим Дома», и зарубежных, чтобы найти идеи новых решений.

Для анализа местного рынка мы сравнили проект с восемью сайтами-конкурентами по количественным показателям. Опираясь на функционал «Едим Дома», выбрали критерии, потенциально важные ЦА: количество рецептов, наличие подборок, актуальность дизайна, наличие приложения, количество рекламы и другие. Для каждого мы определили вес по 10-бальной шкале и в процентах. Среди качественных показателей рассматривали юзабилити, вовлечение, позиционирование и другие.

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

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

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

Постоянная аудитория сайта — почти 400 тысяч зарегистрированных пользователей, а также те, кто заходит на сайт напрямую или ищут его в поисковиках по названию — в сумме это только 12% от общего количества. Большинство пользователей (примерно 77%) попадают на сайт из поисковиков после того, как искали конкретный рецепт, и, изучив его, уходят. Именно таких посетителей нам нужно было задержать на сайте и подтолкнуть к исследованию других разделов.

Также мы сразу понимали, что в первую очередь будем работать над мобильными страницами. В случае с «Едим Дома» наш стандартный подход mobile-first был особенно актуален: 83% пользователей заходят на сайт со смартфонов, при этом дизайн — помимо карточки рецепта — не был адаптирован под мобильные экраны.

Для начала мы сделали количественное исследование: запустили на сайте «Едим Дома» опрос, в котором приняли участие 1990 человек. Они ответили на 40 вопросов о том, как привыкли искать рецепты в целом, что делают на сайте и с какими трудностями при этом сталкиваются. Так мы получили картину использования сайта, чтобы в будущем, придумывая новые фичи, не сломать основные сценарии.

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

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

Среди стоп-факторов, встречающихся во всех трех сценариях, мы обнаружили:

— неработающий поиск;

— непонятные фильтры в списке рецептов;

— невозможность определить, какие рецепты хорошие;

— непривлекательные фотографии;

— неудобство использования с телефона.

Далее мы приступили к первым прототипам — карточки рецепта и списка рецептов. Они помогли провести второй этап качественного исследования. Мы сделали девять интервью с людьми, которые любят готовить, но до момента исследования не пользовались «Едим Дома». Как и в первых интервью, нам было интересно узнать о привычках и мотивации, связанными с процессом готовки — только на этот раз люди рассказывали про свой опыт на наших кликабельных прототипах.

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

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

В дальнейшем процесс строился итерациями: выдвигаем гипотезу, рисуем дизайн, верстаем, 2-4 недели проводим сплит-тестирование, оставляем удачный вариант. Мы сделали 24 теста, в которых проверили более 50 гипотез, и это позволило быстро внедрить 15 эффективных решений. В идеале такая работа должна идти непрерывно на любом этапе жизни сервиса, чтобы продукт развивался.

Карточка рецепта

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

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

Список рецептов

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

Поиск по сайту

В поиске по рецептам мы предложили внедрить лучшие решения из нашего анализа кулинарных проектов:

— единое поле и выбор конкретного раздела;

— одновременный поиск по ингредиентам и рецептам;

— подсказки с подборками блюд, созданными на основе действий человека;

— подробные превью рецептов с фото.

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

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

В будущем система позволит быстро рисовать дизайн новых элементов или функционала и тестировать новые гипотезы. Такой подход призван автоматизировать этот процесс.

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

Главные этапы и достижения в проекте:

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