Разработка сервиса «Планирование меню» для кулинарного портала Maggi.ru

Product manager агентства Pichesky Вячеслав Шашков рассказывает о разработке сервиса-конструктора «Планировщик меню MAGGI». Прототипы, слайды из внутренних презентаций, дизайн-макеты, инструментарий аналитики и другая «внутренняя кухня» ниже в статье – завершающей ретроспективу большого этапа развития сервиса.

Maggi.ru – это кулинарный портал, где продукт бренда вписан нативно в рецепты для домохозяек.

Представив «приготовление еды» в виде многоэкранной схемы, матрицы, можно определить 3 сущности во времени, связанные с темой кулинарии:

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

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

С каждым годом по всему миру в поисковиках наблюдается рост запросов формата: «сколько хранится..». Россия – лидер в списке по росту запросов.

Эти запросы относятся к одному из основных понятий в планировании меню – «сток-менеджмент» (stock-management). Сток-менеджмент – это работа с остатками в холодильнике, которая развивает навыки оптимизации потребления еды для сокращение пищевых отходов и улучшения финансового здоровья семьи.

Сокращение пищевых отходов – это важная инициатива, получившая развитие в странах Северной и Южной Америки. Страны с культурой больших семей и не самым высоким уровнем дохода, как Бразилия, Мексика, Индия, сформированы культурой более «бережного отношения» к остаткам еды. Сформированные привычки они пытаются вписать в современный быстрый темп жизни, применяя новые подходы к работе с остатками в холодильнике.

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

Среднестатистический процесс покупки жителя города-миллионника в России делится на 3 части: месячная «большая покупка» для нескоропортящихся продуктов («Ашан», «Лента»), недельный шоппинг в супермаркете для главных продуктов и мини-маркет у дома для дозакупок на неделе.

Однако далеко не у всех людей процесс покупок выстроен по расписанию. Сказывается ненормированный рабочий график или раздельное питание членов семьи. Ребенок ест одно, мама – вегетарианка, а отец увлекается фитнес питанием. Невозможность планировать сбалансированное питание для каждого члена семьи ведет к недополучению необходимых организму элементов. Вместо сбалансированного рациона часто происходит замена основных блюд (каши, салаты, супы) «быстрой едой».

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

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

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

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

Два примера:

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

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

Например в Бразилии, Мексике и Индии стимулирование энергии происходит за счет восполнения недостатка глюкозы употреблением подслащенной воды (тростникового сока).

Перед началом разработки имелось 4 возможных сценария реализации создания меню на неделю:

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

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

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

«Живыми» оказались идеи выбора «Готовых меню» и «Создать меню в 1 клик»

Самой сложной оказалась задача визуализации страницы «Сформированное меню». Ни один, даже зарубежный пример планировщика Tesco или Kraft не предложил стоящего решения. В первой версии прототипа фигурировало 5 возможных блюд на один день. При такой структуре фото блюд (один из главных критериев выбора рецепта) становились мелкими. Также база рецептов maggi.ru на тот момент не насчитывала достаточное количество «перекусов», «гарниров», «витаминных напитков», которые помогли бы сформировать полноценное меню, приближенное к обычному питанию пользователя. В итоге в первой версии «Планировщика меню MAGGI» было представлено только 3 блюда на день.

Частью исследования перед разработкой конструктора стал анализ открытых источников: baby.ru, babyblog.ru, иные порталы с аудиторией домохозяек, где обсуждают домашнюю еду. Исследование помогло определить «пользы» (что важно для аудитории) и на основе этих данных сформировать основные функции работы с меню на неделю:

Следующий блок функций явился инициативой бренда. Согласно корпоративной концепции «Нестле» - NHW (Nutrition, Health, Wellness) для всех «готовых меню - подборок» были добавлены следующие правила:

Зарубежный опыт также повлиял на прирост функциональности к уже имеющемуся широкому инструментарию. Появилась функция: I’m on a budget. У Tesco она означает исключение рецептов с дорогими продуктами. В нашем конструкторе – «Я забочусь о семейном бюджете».

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

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

Сложность унификации ингредиентов стоит пояснить отдельно. Для потребителя, в зависимости от рациона, может быть принципиально важно: "Сливки 20%" или "Сливки 10%". Для рецепта принципиально важным может оказаться "лимонный сок" (отдельный товар) или "лимон" (выжатый лимон). Абсолютно все нюансы автоматизировать нельзя. Должен срабатывать личный фильтр человека, который он применит, индивидуально управляя готовым списком продуктов на экране. Пример списка со спорными ингредиентами на этапе тестирования:

Ручное управление задействовано и в «готовых меню» (меню-подборках). Только в этом разделе контроль на себя берут нутрициологи MAGGI, которые выборочно отслеживают сбалансированность созданного редакторами меню.

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

К началу декабря этого года база рецептов значительно расширилась и конструктор смог перейти на новую модель без ограничения количеством блюд и возможностью добавить до 6 приемов пищи на один день. Теперь пользователь может позволить себе составлять рацион в определенном коридоре калорийности. Был создан новый тип меню «Банкетный», который подразумевает отсутствие приемов пищи, дней – на экране представлен только один огромный стол рецептов. В данный момент этот тип меню доступен на странице закрытого конкурса.

Существует три вида тестирований на проекте: на «живых» людях (фокус-группы), экспертный UX-анализ, с помощью различных систем аналитики (GA, Smartlook, SQL-запросы, Яндекс-танк, Google Optimize).

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

… и менее очевидные недочеты:

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

Простой «просмотр страницы рецепта в новой вкладке» помог сохранить больше аудитории на нашем сервисе.

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

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

Тестировали несколько названий, в итоге пришли к наиболее подходящему – «Создай свое меню».

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

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

Российский foodtech рынок находится на подъеме; растет количество сервисов по доставке еды, прогнозируется продолжение роста инвестиций в сектор на 26% ежегодно. За 2017 год отечественные потребители дистанционно заказали продуктов на 22 млрд рублей.

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

Затем улучшали удобство навигации в самом списке. Настроили по умолчанию сортировку по основному ингредиенту. Основные ингредиенты объединились в еще одну надгруппу, обозначающую отдел магазина:

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

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