Разработка сайта для кафе PRIME
Интернет-магазин из сайта-каталога — это просто! (нет)
Основная задача
Задача пришла от компании PRIME, владеющей сетью кафе здорового питания в формате smart casual. Это более 80 уютных заведений на территории Москвы, и из каждого можно заказать доставку. Существующий сайт не устраивал клиента — дизайн был устаревшим, а навигация по нему — неудобна и непонятна для пользователей. Хотелось визуальной яркости, простоты поиска и заказа блюда.
Перед нами встала не просто задача по редизайну сайта с доработкой функционала. Нам, по сути, нужно было сделать интернет-магазин по заказу ресторанной еды с доставкой на дом, а также разместить все прочие корпоративные и справочные разделы, такие как: удобная навигация по точкам кафе на карте, страницы предложений по франшизе, кейтерингу, питанию в офис, вакансиям компании и так далее.
Что мы сделали
Мы изучили старый сайт и несколько раз созвонились с клиентом, чтобы продумать логику нашей работы. При изучении старой структуры и общении с заказчиком выяснилось, что есть множество нюансов, которые необходимо было учесть. В итоге мы составили блок-схему, в которой разместили все разделы и подразделы сайта.
решение
Для выполнения этой задачи пришлось перенести сайт на другой движок — CMS 1C Битрикс. В нём был необходимый функционал: возможность добавления периода активности в каждую карточку товара, а также «агенты» — небольшие программы, которые выполняются по заданному расписанию. Мы запрограммировали агента, который раз в сутки, в полночь, сверял данные из карточек блюд и отображал на сайте только те блюда, которые можно заказать в этот день. А само расписание стало можно редактировать вручную или импортировать через Excel-файл.
решение
Мы провели несколько брифингов с представителями доставщиков. По итогу мы собрали все претензии и составили ТЗ, в котором сформулировали новый механизм формирования этих файлов.
Учитывая, что некоторые элементы были необходимы для одних, но не нужны для других, мы разработали новый универсальный механизм формирования файлов. Для каждого партнера выделялся собственный адрес для парсинга (так называемая входная точка) и возможность указания даты формирования файла. Таким образом каждая компания получала свой собственный список меню на указанный день исходя из того, какие блюда в этот день были доступны. Это решение полностью устроило все стороны.
решение
Вся территория Москвы была разделена на зоны доставки, координаты которых мы собрали и вывели на страницу «Доставка». Также мы реализовали механизм определения такой зоны доставки, исходя из указанного посетителем адреса. На странице оформления заказа отображается интерактивная карта, показывающая, в какой именно зоне находится адрес доставки, и сколько она будет стоить. Если клиент ограничен в средствах на доставку, или она невозможна по каким-либо другим причинам, проверяется сумма заказа и адрес. В этом случае клиенту предлагается изменить параметры заказа, в противном случае дальнейшее оформление останавливается.
Кроме того, мы учли следующие ограничения:
- Заказы на текущий день принимаются до 17:00. Затем сегодняшняя дата в календаре перестаёт быть активной, и заказ автоматически формируется на завтра.
- Ограничение на одно блюдо — не более 5 единиц. При попытке заказать больше появляется уведомление о запрете.
- Общее количество заказанных продуктов или блюд — не более 30. При попытке заказать больше также выдается запрещающее уведомление.
решение
Мы создали страницу «Контакты» на которой можно выбрать, как показать адреса кафе: на карте или списком. Их можно отфильтровать по близости к нужной станции метро.
Также были реализованы:
- поиск кафе по названию улицы, на которой оно расположено;
- переключатель, показывающий только кафе, открытые в настоящий момент;
- поп-ап с информацией о кафе по клику на точку кафе на карте: название, адрес, почта и время работы.
решение
Сеть кафе PRIME расширяется по принципу франшизы. Поэтому мы создали страницу с условиями присоединения к франшизе, а сверху прикрутили аккуратный слайдер со значимыми для компании датами.
решение
У профессиональных фотографов нашего агентства было заказано 4 фотосессии общей длительностью около 100 часов. По итогу их работы были отобраны более 400 обработанных уникальных фотографий, которые мы добавили на новый сайт.
решение
Мы придумали два способа акцентирования внимания клиентов:
- В админпанели у каждой карточки товара есть вкладка «Свойства товара». Мы добавили чек-бокс с названием «Вывести акцентное превью». Если выставить в нем галочку, то в каталоге карточка товара изменит размер и цвет.
- В той же вкладке «Свойства товара», есть свойство «Цвет». Оно меняет цвет большого блока в списке товаров. Пользователь может выбрать любой цвет из палитры или отобразить цвет по html-коду.
решение
Мы учли это при проработке фильтров: выделили список необходимых свойств и продумали их заполнение в карточке товара. Теперь в каталоге можно фильтровать товары не только по возрастанию/убыванию цены или по популярности, но и по уникальным свойствам. Причём как по каждому в отдельности, так и по нескольким сразу.
Итоги проекта
Итак, чего мы добились? Если вкратце — из малопривлекательного устаревшего сайта с неудобной сложной навигацией мы сделали современный интернет-магазин с максимально простым и привлекательным интерфейсом. На всю эту работу у нас ушло около 10 месяцев.
И в результате сайтом действительно стало удобно пользоваться. Это отразилось на показателях продаж компании — пошли в гору объёмы интернет заказов, увеличившись за первые месяцы работы нового сайта на 15%.
Сейчас мы осуществляем постоянную техподдержку сайта и занимаемся SEO-продвижением, чтобы ресурс всегда находился в топе поисковой выдачи.