{"id":13505,"url":"\/distributions\/13505\/click?bit=1&hash=ca3734639136826288c9056e5c8fa03a05e87c4060ae84df200f2c90f5262470","title":"\u0412\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a? \u0410 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435 \u043a\u043e\u0434\u0430?","buttonText":"\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c","imageUuid":"f5f0e11f-fefd-52f5-8712-82164a59b7ce","isPaidAndBannersEnabled":false}
Дизайн
PINKMAN

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

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

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

Задача клиента: найти слабые места в интерфейсах

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

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

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

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

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

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

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

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

«Едим Дома» vs. конкуренты: как мы придумали первые идеи

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

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

Таблица сравнения с конкурентами

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

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

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

Что мешает пользователям на сайте и как мы это поняли

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

77% пользователей приходили ради конкретного рецепта, а потом уходили. Нам нужно было ответить, почему

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

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

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

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

Три портрета пользователей «Едим Дома» и их пути по сайту

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

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

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

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

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

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

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

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

Как мы отладили процесс сплит-тестирования и к каким дизайн-решениям пришли

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

Бэклог задач, расписанный на 7 месяцев

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

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

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

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

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

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

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

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

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

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

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

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

Зачем понадобилась новая дизайн-система

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

Новая дизайн-система, разложенная на листах в Figma

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

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

Что мы получили в результате

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

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

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

Благодарим команду PINKMAN за объемную работу. У ребят получилось глубоко погрузиться в наш проект, проанализировать структуру сайта и выявить аспекты, которые требовали доработки. Все идеи переносились на практику, тестировались и обсуждались. Решения принимались осмысленно — с опорой на аналитику и объективные данные. Нам уже удалось внедрить часть из них и получить первые результаты.

Юлия Шакирова
0
7 комментариев
Написать комментарий...
Александр Морфин

очень крутая статья, спасибо

Ответить
Развернуть ветку
PINKMAN
Автор

Это правда! Спасибо!

Ответить
Развернуть ветку
Alex Ayer

Разработка здорового человека! Молодцы.
Сразу видно, заказчик адекватный (ему тоже плюсик в карму)

Ответить
Развернуть ветку
Artem Markovsky

Отлично! Исследования - наше всё!

Ответить
Развернуть ветку
Artem Prokopenko

Под конец статьи я так и не понял, вам удалось увеличить сессию юзеров(да, нет) и узнали почему люди уходили после первого рецепта??
А так статья понравилась, спасибо

Ответить
Развернуть ветку
PINKMAN
Автор

Спасибо! Увеличить сессию удалось! Ответы в блоке про стоп-факторы. :)

Ответить
Развернуть ветку
Александр Морфин

!

Ответить
Развернуть ветку
Читать все 7 комментариев
null