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