Разработка сайта для кафе PRIME

Интернет-магазин из сайта-каталога — это просто! (нет)

Разработка сайта для кафе Prime
Или как уместить 500 блюд и 80 кафе на одном сайте и не запутать пользователя.
https://prime-star.ru

Основная задача

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

Задача пришла от компании PRIME, владеющей сетью кафе здорового питания в формате smart casual. Это более 80 уютных заведений на территории Москвы, и из каждого можно заказать доставку. Существующий сайт не устраивал клиента — дизайн был устаревшим, а навигация по нему — неудобна и непонятна для пользователей. Хотелось визуальной яркости, простоты поиска и заказа блюда.

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

Prime
Prime

Что мы сделали

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

Prime Схема сайта
Prime Схема сайта
Вот какие проблемы нам предстояло решить:
01
У многих блюд есть период активности — расписание, когда оно доступно к заказу. Оно составляется заново каждые 2 недели. Клиент пользуется CRM IIKO, и в нем невозможно реализовать эту функцию по техническим причинам.

решение

Для выполнения этой задачи пришлось перенести сайт на другой движок — CMS 1C Битрикс. В нём был необходимый функционал: возможность добавления периода активности в каждую карточку товара, а также «агенты» — небольшие программы, которые выполняются по заданному расписанию. Мы запрограммировали агента, который раз в сутки, в полночь, сверял данные из карточек блюд и отображал на сайте только те блюда, которые можно заказать в этот день. А само расписание стало можно редактировать вручную или импортировать через Excel-файл.

Prime Периоды активности
Prime Периоды активности
02
В старый сайт были встроены два файла с информацией о меню, собиравшиеся методом парсинга. Этой информацией пользовались компании-партнёры — сервисы доставки Сбермаркет, Деливери, Обед. ру, Кейтери и другие. По разным причинам оба файла не устраивали доставщиков.

решение

Мы провели несколько брифингов с представителями доставщиков. По итогу мы собрали все претензии и составили ТЗ, в котором сформулировали новый механизм формирования этих файлов.

Учитывая, что некоторые элементы были необходимы для одних, но не нужны для других, мы разработали новый универсальный механизм формирования файлов. Для каждого партнера выделялся собственный адрес для парсинга (так называемая входная точка) и возможность указания даты формирования файла. Таким образом каждая компания получала свой собственный список меню на указанный день исходя из того, какие блюда в этот день были доступны. Это решение полностью устроило все стороны.

03
Стоимость доставки зависит от адреса доставки. Это необходимо было учесть и проинформировать пользователя.

решение

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

Кроме того, мы учли следующие ограничения: 

  • Заказы на текущий день принимаются до 17:00. Затем сегодняшняя дата в календаре перестаёт быть активной, и заказ автоматически формируется на завтра.
  • Ограничение на одно блюдо — не более 5 единиц. При попытке заказать больше появляется уведомление о запрете.
  • Общее количество заказанных продуктов или блюд — не более 30. При попытке заказать больше также выдается запрещающее уведомление.
Prime Зона доставки
Prime Зона доставки
04
Сеть кафе насчитывает более 80 заведений. Нужно было придумать удобный для пользователя поиск подходящего заведения.

решение

Мы создали страницу «Контакты» на которой можно выбрать, как показать адреса кафе: на карте или списком. Их можно отфильтровать по близости к нужной станции метро.

Также были реализованы:

  • поиск кафе по названию улицы, на которой оно расположено;
  • переключатель, показывающий только кафе, открытые в настоящий момент;
  • поп-ап с информацией о кафе по клику на точку кафе на карте: название, адрес, почта и время работы.
Prime Карта кафе
Prime Карта кафе
05
Компания PRIME существует уже почти 20 лет, у неё большая насыщенная история. Нужно рассказать об этом пользователям в ненавязчивой форме, а также описать условия франшизы.

решение

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

Prime История
Prime История
06
У клиента не было фотографий блюд в хорошем качестве, которые подошли бы к стилю нового сайта.

решение

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

Prime Фото блюд
Prime Фото блюд
07
Клиент хотел, чтобы в каталоге был сделан акцент на некоторых блюдах.

решение

Мы придумали два способа акцентирования внимания клиентов:

  • В админпанели у каждой карточки товара есть вкладка «Свойства товара». Мы добавили чек-бокс с названием «Вывести акцентное превью». Если выставить в нем галочку, то в каталоге карточка товара изменит размер и цвет.
  • В той же вкладке «Свойства товара», есть свойство «Цвет». Оно меняет цвет большого блока в списке товаров. Пользователь может выбрать любой цвет из палитры или отобразить цвет по html-коду.
Prime Фото блюд
Prime Фото блюд
08
Нужно было отобразить уникальные свойства блюд, например, вегетарианское, острое и т. д.

решение

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

Prime Меню
Prime Меню

Итоги проекта

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

И в результате сайтом действительно стало удобно пользоваться. Это отразилось на показателях продаж компании — пошли в гору объёмы интернет заказов, увеличившись за первые месяцы работы нового сайта на 15%.

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

Оставьте заявку,
и мы проведём аудит вашего проекта

Digital-продакшн полного цикла и продвижение от DOT c продуктовой аналитикой, стратегией, дизайном, контентным наполнением и web-разработкой
Ваше сообщение отправлено, мы вам обязательно ответим 🚀
Что вас интересует
Разработка и поддержка сайтов
Разработка digital стратегии
Комплексный SMM
Видео и фото-продакшн
Производство чат-ботов
ORM и SERM
Контекстная реклама
SEO
Брендинг и фирменный стиль
Всего понемножку
Прикрепить бриф
Нажимая на кнопку “Отправить”, Вы даете согласие на обработку своих персональных данных в соответствии
с Политикой в отношении обработки персональных данных
каталог услуг
Москва
Тамбов
Павелецкая набережная, 2, стр.4, Бизнес-центр LoftVille
ул. Коммунальная, 18/1
Данный сайт использует cookie-файлы
Нажимая на кнопку "СОГЛАСЕН", вы даете согласие на обработку файлов cookie в соответствии с Политикой
СОГЛАСЕН