Контекст
Стартер — платформа для ресторанов: она помогает принимать заказы, управлять программой лояльности и работать с базой гостей. У каждого ресторана есть собственные приложение и сайт, настроенные под его бренд.
Главные пользователи гостевой части — посетители ресторанов. Они заказывают еду, бронируют столики, узнают об акциях и пользуются программой лояльности. В административной панели работают владельцы, управляющие и маркетологи ресторанов.
Проблема
Ресторанам не хватало простого способа рассказывать гостям об акциях, новых блюдах и событиях. Для коммуникации оставались небольшие баннеры и отдельные информационные страницы. Баннер вмещал мало информации, а для хорошей страницы часто требовалась помощь дизайнера.
Истории могли объединить простоту баннера и вместительность отдельной страницы. Формат уже был знаком и ресторанам, и гостям, а готовые материалы из социальных сетей можно было использовать повторно.
Моя роль и команда
Я отвечал за исследование, пользовательский опыт и визуальное направление решения в приложении, на сайте и в административной панели. Работал вместе с продакт-менеджером, вторым дизайнером и командой разработки. Когда проект вошёл в ближайший спринт, мы разделили дизайн гостевой части и административной панели, чтобы успеть подготовить обе стороны продукта к разработке.
С чего начали
Сначала я изучил, как клиенты Стартера уже общаются с гостями: что публикуют в баннерах и на информационных страницах, какие темы повторяются и где существующих форматов не хватает.
Затем я исследовал 23 приложения и несколько сайтов: откуда открываются истории, как они работают на телефоне и компьютере, какие действия доступны внутри и какие пропорции используют разные продукты.
Из исследования появились четыре требования к первому решению:
- Фиксированные пропорции 9:16 вместо растягивания на весь экран — так один материал предсказуемо работает на разных устройствах.
- Отдельная кнопка-ссылка на каждом слайде.
- Возможность поделиться историей.
- Оценки или комментарии могут быть полезны позже, но не обязательны для первого запуска.
Я также разложил найденные истории по темам. Для нас было важно смотреть не на социальные сети, где публикация исчезает через сутки, а на истории внутри продукта: там контент может работать дольше и решать конкретную задачу ресторана.
На основе запросов клиентов и исследования мы оставили три гипотезы:
- Рестораны смогут чаще и понятнее общаться с гостями без дополнительных затрат на новый формат контента.
- Знакомый формат снизит порог публикации для бизнеса и поможет подробнее рассказывать об акциях, событиях и новинках.
- Более содержательная коммуникация поможет гостю принять решение о первом заказе.
Как ресторан будет создавать истории
Отдельной задачей был процесс публикации. Вместе с продакт-менеджером мы поговорили с главным маркетологом и управляющим сети из трёх ресторанов и четырёх брендов. Клиент регулярно использовал баннеры и информационные страницы, поэтому хорошо понимал ограничения текущих инструментов.
Из интервью мы узнали:
- Поддерживать исчезающие истории сразу для нескольких проектов слишком трудозатратно.
- Существующих инструментов коммуникации не хватает: информационные страницы недостаточно гибкие, а всплывающие окна не всегда работают предсказуемо.
- Маркетологу нужна аналитика, чтобы понимать, как контент влияет на поведение гостей.
- Клиент опасается, что новый формат замедлит сайт и приложение.
- Когда маркетолог начинает собирать публикацию, содержание акции и основные материалы у него уже готовы.
После интервью я собрал путь маркетолога от идеи до публикации и перечислил необходимые возможности. Эта доска задала структуру административной панели и помогла отделить обязательное для запуска от последующего развития.
Как истории выглядят у гостей
На главной странице ресторанов уже использовались баннеры трёх типов: они открывали всплывающее окно, информационную страницу или произвольную ссылку. Нужно было встроить истории в существующий блок и при этом помочь гостю отличить их от обычных баннеров.
Мы проверили несколько обозначений. Обводка внутри баннера перекрывала контент, а дополнительные подписи создавали визуальный шум. Самым понятным вариантом оказалась внешняя обводка: она выделяет баннер с историей, не вмешиваясь в макет самого изображения. Обычные баннеры остаются без дополнительного обозначения.
После выбора обводки мы проверили её на всех типах баннеров и разных материалах клиентов.
Затем адаптировали просмотр для компьютерной и мобильной версий. На компьютере кнопку действия разместили прямо на слайде: так она сохраняет связь с конкретной историей и не выглядит отдельным элементом при последовательном просмотре. На телефоне кнопка также остаётся внутри слайда, потому что часть экрана занимает интерфейс браузера.
Административная панель
Для инструмента публикации я изучил решения Фрисбай и 2ГИС. Особенно полезным оказался подход 2ГИС: перед нами стояла похожая задача — дать бизнесу универсальный, но простой инструмент для сборки историй.
Первую версию мы собрали с учётом требований и существующей архитектуры панели. Интерфейс получился слишком размашистым и шумным: настройки, список слайдов и предварительный просмотр конкурировали за внимание.
На встрече с продакт-менеджером я быстро собрал несколько направлений. Мы не планировали делать полноценный визуальный редактор: маркетолог загружает уже подготовленные изображения и видео, а в панели настраивает последовательность, кнопку и публикацию. Поэтому важнее было показать итоговый вид слайда и сделать структуру истории очевидной.
В выбранном варианте слайды выстроены в горизонтальную последовательность, а настройки находятся рядом с выбранным слайдом. Форма редактора повторяет результат, который увидит гость, поэтому человеку проще контролировать порядок и проверять, не перекрывает ли интерфейс важную часть изображения.
После выбора направления мы увеличили слайды и собрали настройки вокруг активного элемента. Так последовательность стала заметнее, а предварительный просмотр перестал быть отдельным режимом работы.
Управление опубликованными историями
Для списка историй выбрали таблицу. Маркетолог видит опубликованные и неопубликованные материалы, архив, основные показатели, место публикации и дату создания. Отсюда можно быстро скопировать ссылку или убрать историю в архив.
Мы проработали состояния создания, публикации и управления историей и передали решение в разработку. Интерфейсом пользуются люди с разным опытом, поэтому одной из целей было сделать выпуск истории понятным без отдельного обучения.
Результат
Клиенты быстро приняли новый формат: в первую неделю больше половины клиентов из топ-30 запустили собственные истории. Среди первых примеров были Fresa’s и DUO.
За первый месяц после запуска в поддержку не поступило ни одного вопроса о том, как пользоваться историями. Для нас это стало важным сигналом качества: рестораны смогли самостоятельно собрать и опубликовать новый формат контента.
В первом запуске мы проверили принятие инструмента и понятность интерфейса. Влияние историй на заказы и выручку требовало более длинного периода наблюдения и достаточного объёма данных, поэтому мы не включали эти показатели в раннюю оценку результата.