По итогу: получился пул работ, которые планировалось реализовать на обновленном сайте.
Разработка нового дизайна сайта
Новый дизайн сайта “Империя суши” разрабатывался в соответсвии с брендбуком компании, с использованием корпоративных цветов. Важно было сохранить единый стиль сайта и оффлайн точек продаж.
Основные цвета сайта.
Также на сайте используется маскот компании — Панда. Данный персонаж был использован в стрессовых местах, таких как: страница 404, корзина пуста, товар не найден и т.д., для снятия напряжения и в качестве иллюстративного отображения действий.
Самыми главными элементами взаимодействия с пользователем в интернет-магазине являются карточки товаров. Для данного сайта было разработано около 10 вариантов карточек товара, из которых заказчик выбрал самый интересный и информативный вариант.
Краткая карточка товара содержит следующие элементы: лейблы на выбор, в зависимости от популярности и свойства товара, фото товара, цена доставки и самовывоза, заголовок, вес и количество, состав, кнопки “В КОРЗИНУ” и “ИЗБРАННОЕ”.
Вариант который выбрал заказчик
На основе выбранного варианта было разработано 3 типа карточек товара, которые используются на сайте для разных категорий блюд.
Для роллов (стандартная карточка)
Для wok (Добавляется возможность конфигурации блюда, за счет выбора соуса)
Для сетов (добавлен блок информации с данными о том, сколько роллов с рыбой в данном сете)
По нажатию на краткую карточку товара открывается детальная карточка.
Детальная карточка товара содержит следующие элементы: соус на выбор (если это wok), состав, эн.ценность, блок с доп.ингредиентами, блок с новинками, фото товара, цена доставки и самовывоза, заголовок, кнопка “В КОРЗИНУ”.
Дизайн страницы каталога. Легче посмотреть небольшое видео о работе сайта, чем долго читать описание :)
Верстка и программирование
Над проектом работали 3 Fullstack-разработчика. Нагрузка была поделена в равной степени на каждого из них, благодаря чему мы смогли оперативно выполнить всю техническую часть с учетом дополнительных пожеланий заказчика во время разработки.
Также отдельно был выделен специалист для интеграции и работы с новой системой iiko Transport.
Сайт построен на мощной и гибкой основе PHP, в основе клиентской стороны лежит библиотека Vue.js. В сочетании Inertia.js с JavaScript-фреймворками, сайт предлагает плавный и естественный пользовательский опыт, аналогично как и в реализованном нативном приложении.
Для работы с заказами сайт был интегрирован с системой iiko Transport, решением для автоматизации и оптимизации всех аспектов доставки.
Анимированная шапка (header) сайта — легкий способ уместить большое количество информации в верхней части сайта, так чтобы смотрелось красиво и не перегружало визуально.
Зоны доставки. Реализовали интерактивную карту с расчетом стоимости доставки по конкретному адресу, в зависимости от тарифов на доставочные зоны. На сайте мы сообщаем клиенту, сколько нужно набрать товара в корзину, чтобы доставка была бесплатной. В зависимости от района доставки сумма в корзине должна быть от 500₽ до 3000₽.
Реферальная программа. На сайте реализована программа “Пригласи друга и получи бонусы!”, по условиям которой за каждого приглашенного друга клиент получает бонусы, которые можно потратить на покупку товаров. Чем больше приглашений, тем больше бонусных отчислений.
Для каждого клиента генерируется собственная уникальная ссылка, при переходе по которой клиент регистрируется на сайте и получает Welcome-бонусы. После осуществления заказа реферер (тот, кто поделился ссылкой) также получает бонусы за приведенного друга.
Настройки условий программы максимально гибкие и просто меняются в iikoCard. Изменять можно как количество бонусов, так и систему их поступления.
Бонусная система. Помимо реферальной программы на сайте имеется еще и бонусная программа, по которой клиент может воспользоваться имеющимися на своем счете баллами.
Для клиента есть 3 варианта получения бонусов: бонусные баллы, подарочные баллы и скидочная карта. Все доступные для списания бонусы тянутся с iiko.
Бонусные баллы: начисляются за совершение заказов на определенные суммы. После поступления на счет клиент может сразу потратить их на новый заказ.
Подарочные баллы: начисляются по праздникам, а так же за активные заказы на сайте и по условиям реферальной программы.
Скидочная карта: оформляется в магазине, также на нее начисляются скидки в зависимости от покупок и активностей.
Перерыв...
Давайте посмотрим прикольный видосик про панд и вместе посмеемся :)
Видео конечно не наше, а с прекрасного канала Panda Story :) все права принадлежат правообладателю
Продолжаем
И вот мы уже отдохнули повеселились и готовы продолжать :)
“Умные" фильтры по ингредиентам. Если клиент желает приобрести определенный товар, с нужным для него составом, то он может сразу отфильтровать интересующий его продукт по ингредиентам. На сайте реализована сложная система “умных” фильтров индивидуально для каждой категории.
Выбранный в фильтре ингредиент позволяет увидеть все имеющиеся на сайте товары с данной характеристикой, вне зависимости от категории. В случае, если появляется новый товар с новыми ингредиентами в составе, блок с подбором по ингредиентам обновляется автоматически.
Дополнительные ингредиенты. В детальной карточке товара есть возможность добавлять дополнительные ингредиенты, которые изначально были обозначены как модификаторы для выбранного товара. Цена изменяется автоматитически.
Умный поиск. Для сайта “Империя суши” нами был разработан индивидуальный формат поисковой строки.
Поле поиска появляется по нажатию в отдельном всплывающем окне, для удобства просмотра введенного запроса и полученных результатов. Искомые товары появляются сразу, без лишних переходов на другие страницы.
Интеграция с iiko transport
Интеграция с iiko Transport для управления товарами и заказами. Поскольку в предыдущих пунктах мы затронули тему интеграций, далее стоит рассказать, что еще интересного мы сделали в данном проекте.
Интеграция с iiko Transport. В старой версии сайта интеграция уже была настроена, однако там работала iikoCard. Для работы с новым сайтом необходимо было настроить интеграцию с iiko Transport. В процессе интеграции было сделано следующее:
- Настройка API iiko Transport: для связи между сайтом и программой.
- Импорт данных из iiko: таких как меню (группы, товары и блюда с размерами и модификаторами), гео-данные (города и улицы) и типы цен.
- Экспорт данных в iiko: настройка системы для экспорта заказов на терминалы iiko.
- Автоматизация процессов: настройка автоматического импорта и обновления данных с использованием веб-хуков.
Тестирование
Реализованный ресурс тестировался на протяжении 1 месяца на соответствие визуальной и технической составляющей, а также корректной работы в связке с iiko Transport.
Ни один пиксель не ускользнул от острого глаза нашего тестировщика :)
Реализация приложения для App Store и Google Play
Кроссплатформенное приложение для “Империя Суши” на Cordova.
Поскольку у клиента было еще и приложение, реазизованное с помощью инструмента Cordova, нам необходимо было его актуализировать.
В нашем случае была обновлена версия текущего приложения и загружены обновленные скриншоты интерфейса.
Разработка системы управления для кухни
Для работы с заказами было необходимо внедрение внутреннего сервиса управления кухней.
Функционал разработан в помощь поварам, сборщикам и другим работникам кухни для оптимизации рабочего времени с целью увеличения прибыли.
Нам была поставлена задача: сделать удобный, простой и интуитивно понятный дизайн, чтобы даже новые сотрудники были способны быстро и самостоятельно разобраться в интерфейсе программы. Данное решение позволило сократить расходы на контроль производственного процесса, а также уменьшить порог входа и время на акклиматизацию нового сотрудника.
Чего мы добились
Для проекта был произведен редизайн сайта и мобильного приложения. Дополнительно создан отдельный модуль для управления процессами работы с заказом на кухне.
Детально:
- Сайт и приложение позволили снизить нагрузку на операторов и менеджеров, благодаря рефакторингу и обновлению функционала, что, в свою очередь, повлияло на повышение лояльности клиентов.
- Отдельно выделяем работу новых бонусной и реферальной программ, которые выгодно выделяют сайт среди конкурентов и, однозначно, нравятся клиентам, поскольку позволяют экономить на заказах.
- Разработанный модуль для управления процессом производства на кухне позволил снизить финансовые затраты и трудозатраты на контроль работы сотрудников. Благодаря автоматизированному процессу и четким этапам производства заметно выросла эффективность, ускорился процесс работы и, как следствие, финансовый оборот компании стал больше.
Итог:
На данный момент, исходя из статистики Яндекс Метрики и показателей PageSpeed Insights, сайт работает гораздо быстрее, имеет более высокие показатели посещаемости, конверсии и низкий процент отказов.
Существенно облегчена работа менеджеров и ускорен процесс обработки заказов.
В целом, сайт “Империя Суши” является примером того, как современные веб-технологии и интеграционные решения могут быть использованы для создания высокоэффективной, удобной для пользователя и технологически продвинутой платформы для ресторанного бизнеса.
Подводя итог: мы снизили нагрузку на сотрудников, увеличили их эффективность, повысили средний чек клиента и коэффициент возврата к заказам.
Спасибо
за внимание!
P.S.
В данном кейсе мы поговорили только об основном функционале, однако есть еще много других интересных решений, внедренных в данный проект.
Если вы хотите подробностей, то свяжитесь с нами и мы расскажем все что осталось за кадром!
А вот список того функционала, о котором мы не поговорили в кейсе:
- Сделать простую и быструю регистрацию по номеру телефона.
- Дать возможность клиенту сделать заказ из городов: Новосибирск, Барнаул, Бийск.
- Отображать на сайте весь доступный ассортимент продукции.
- Отображать всю информацию о товаре в доступном и читаемом формате (тип товара, эн.ценность, состав, количество рыбы).
- Отображать две цены на товар (цена доставки и самовывоза).
- Дать возможность прикреплять сопутствующие товары.
- Дать возможность положить товар в избранное.
- Реализовать эксклюзивное меню, доступное при достижении определенной суммы в корзине.
- Реализовать возможность заказа к определенной дате и времени.
- Реализовать возможность нескольких способов оплаты.
- Реализовать систему ограничений для оплат на сайте.
- Сделать удобную административную панель для работы с содержимым сайта.