Повышаем продажи благодаря развитию сайта и разработке мобильных приложений

29.04.2017 Сергей Алфимцев

Дорабатываем сайт по продаже суши и делаем для него мобильные приложения — получаем рост числа заказов и увеличение лояльности клиентов.

Компания Sushi&FRIES из Красноярска разработала интернет-магазин по продаже суши, роллов и других блюд. Через полгода клиент захотел улучшить ресурс, чтобы повысить конверсию сайта, и создать мобильные приложения.

Какие задачи стояли перед специалистами технической поддержки?

  • Реализовать функционал «Выбор города», чтобы пользователь смог получить актуальную информацию о контактах, акциях и спецпредложениях, отзывах, вакансиях, а также смог сделать онлайн-заказ в суши-баре Sushi&FRIES своего города.
  • Упростить процесс заказа блюд на сайте. Для этого создать «плавающую корзину заказов» в версии сайта для ПК, которая будет доступна пользователю на главной странице и на всех внутренних страницах каталога. 
  • Разработать простой и удобный фильтр для отбора блюд по входящим в состав ингредиентам. Дизайн фильтра должен быть лаконичным и полностью соответствовать основному дизайну сайта.

Что предстояло сделать отделу разработки мобильных приложений?

Разработать приложения под мобильные платформы Android и iOS, чтобы компания могла:

  • стать ближе к клиентам, постоянно находясь в телефоне, который всегда под рукой;
  • вести коммуникацию с клиентами;
  • создать дополнительный канал получения заказов. 

Они пользуются услугами:

SEO-продвижение Разработка сайта Яндекс.Директ Разработка мобильного приложения

Сайт:
sushifries.ru

Услуги:

Задачи:

  • провести ряд технических доработок сайта для повышения лояльности клиентов
  • разработать мобильные приложения под Android и iOS
Sushi&FRIES — внешний вид сайта

Функционал «Выбор города»

При первом заходе на сайт с компьютера или мобильного устройства отображается всплывающее окно с выбором города. Пользователь должен один раз выбрать свой город и при повторном заходе на сайт окно уже не отображается, информация сохраняется в cookie браузера.

Смена города на сайте — пример

Для каждого города выводиться уникальная информация: меняется номер телефонов в шапке сайта, а также номера телефонов и иконки со ссылками на группы в социальных сетях в подвале сайта. Кроме того, меняются данные разделов «Отзывы», «Акции и спецпредложения», «Вакансии» и «Контакты».

Смена телефона при выборе города на сайте — пример

Смена контактов при выборе города на сайте — пример

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

Для связи функционала «Выбор города» с мобильными приложениями был разработан специализированный API.

«Плавающая» корзина заказов

Доработка проведена для упрощения процесса заказа блюд и удобства пользования корзиной. Дизайн был выполнен с использованием элементов логотипа компании, для размещения новой корзины выделена левая колонка контентной области страницы. На главной странице выведен полный список продуктов с разбивкой по категориям. Корзина отображается не только на главной странице, но и на всех страницах сайта, где выводится каталог блюд. 

Плавающая корзина на сайте — пример

Для того чтобы добавить блюдо в список покупок, достаточно просто нажать кнопку «В корзину». При этом в «плавающей корзине» будет автоматически пересчитана и отображена итоговая сумма заказа.

Плавающая корзина на сайте — пример

«Плавающая корзина» называется так потому, что она всегда в поле зрения пользователя, независимо от того в какой позиции каталога он находится.

При наведении курсора мыши на изображение корзины она автоматически раскрывается и отображается список блюд, причем в любой момент можно отредактировать их количество с помощью кнопок «+» и «—». Для того чтобы список блюд не растягивался по вертикали мы добавили к нему полосу прокрутки.

Удобная корзина на сайте — пример

Функционал «Плавающая корзина» реализован только в версии сайта для ПК.

Универсальный фильтр подбора продуктов

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

Фильтр ингредиентов на сайте — пример

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

Фильтр продуктов на сайте — пример

В случае клика левой кнопкой мыши по сердечку, оно будет подсвечено, и это означает, что данный ингредиент обязан входить в состав блюда. Соответственно, если мы выбираем крестик, то ингредиент не должен входить в состав продукта. В такой «двойственности» подбора продуктов и заключается главная особенность нашего фильтра.

Фильтр на сайте — пример

Настроить теги фильтра для каждого блюда просто, для этого в административной панели сайта необходимо установить галочку «Включить» напротив названия ингредиента, если он входит в состав.

Фильтр в системе администрирования сайтом — пример

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

Мобильные приложения

Приложение запущено под мобильные платформы Android и iOS

Посмотреть приложения можно по сссылкам:

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

Мобильное приложение суши и роллов — примерМобильное приложение суши и роллов — примерМобильное приложение суши и роллов — пример

Процесс разработки мобильного приложения прошел те же этапы, что и создание сайта:

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

В процессе разработки приложения в нем были реализованы следующие разделы:

  • Главная страница. На главной странице представлены баннеры с последними акциями, а также отображены основные разделы каталога, представлены хиты продаж и новинки.
  • Каталог. В каталоге имеется навигация по разделам товаров, возможность посмотреть подробное описание и добавлять понравившиеся товары в избранное или в корзину. В подробном описании блюд реализован выбор сопутствующих товаров.
  • Корзина. Для оформления заказа пользователь переходит в корзину, где оформляет заказ и указывает адрес доставки. Если пользователь авторизовался через личный кабинет, то данные последних параметров заказа подставляются автоматически.
  • Избранное. В этом разделе сохраняются избранные товары, наличие этого раздела упрощает поиск любимых товаров на просторах приложения.
  • Личный кабинет. В приложении есть возможность регистрации и входа в свой личный кабинет, в котором отображаются история заказов и их статус.
  • Новости. В этом разделе располагаются новости об акциях, новинках и горячих предложениях.
  • Контакты. Контактные данные магазина.

Данные о товарах, новости и текстовые разделы подгружаются в мобильное приложение в режиме online с сайта посредством API. Заказы из мобильного приложения попадают в систему управления заказами сайта. Заказ приходит на обработку точно так же, как и заказ, сделанный через сайт, а также помечается в системе, что заказ сделан через мобильное приложение.

Получение заказов через мобильное приложение — пример

Отличительной особенностью стало внедрение дополнительного функционала, как в API, так и в приложения.

Сперва была реализована возможность добавлять к заказу сопутствующие товары. Например, в разделе «Френч фрайз» пользователь может выбрать один соус к заказу.

Заказ на сайте суши и роллов — пример

Мобильное приложение суши и роллов — пример

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

Мобильное приложение суши и роллов — пример

Приложения распространяются через маркеты приложений iTunes и Google Play. Для увеличения установок мобильного приложения на сайте размещены кликабельные бэйджи, которые ведут в маркеты.

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

Возможности настройки уведомлений помогает оповещать пользователей о конкретном товаре (например, добавлении нового вида роллов или скидке на них), категории или новости в мобильном приложении. При клике на уведомление пользователь попадет на экран именно того товара, новости или категории, который указан при отправке уведомлений. 

Дополнительный инструмент аналитики пользователей

Среди плюсов мобильного приложения есть еще один — дополнительный инструмент аналитики вашей аудитории.

Сервис Firebase, интегрированный в мобильные приложения под обе платформы, позволяет собирать и измерять пол аудитории и ее возраст.

Вполне ожидаемо, что возраст аудитории, использующей мобильные приложения для заказа суши, от 18 до 35 лет. Удивительным открытием стало то, что женщин среди пользователей приложения более 60%. Это значит, что они намного активнее, а значит в приложение нужно посылать уведомления более привлекательные для женской аудитории, чтобы увеличить еще больше конверсию и средний чек.

Мобильное приложение — не просто дань моде или игрушка

Это полноценный инструмент, который поможет вам:

  • выстроить долгосрочные отношения с клиентами,
  • повысить лояльность пользователей,
  • настроить новый канал коммуникации с клиентами,
  • упростить процесс заказа услуг и продуктов,
  • «поселиться» в мобильном устройстве клиента и стать ближе к нему.

Заключение

Если у вас есть сайт, разработанный в компании WebCanape, и вы хотите подключить к нему функционал «Выбор города», разработать «Плавающую» корзину, добавить фильтр подбора продуктов или выполнить любые другие доработки, то отправьте заявку на доработку, заполнив форму на сайте.

Узнайте о возможности разработки мобильного приложения для вашего сайта, заполнив заявку >>

Хотите заказать услугу технической поддержки или заказать мобильное приложение? Свяжитесь с нами по телефону: 8-800-200-94-60 или оставьте запрос на az@web-canape.com.

8 800 200 94 60

Звонок бесплатный

Смоленск +7 (4812) 20-94-60

Москва +7 (499) 506-97-20

Сертифицированный партнер