Разработка интернет-магазина на CMS 1C-Битрикс для кофейного бренда «Лоботрясы»

О клиенте

Ростерия «Рыжий, море и лоботрясы» — интернет-магазин по продаже свежеобжаренного кофе категории specialty. Бренд закупает зёрна напрямую у фермеров, обжаривает в собственной ростерии, а затем продаёт и отправляет по всей России. В команде есть сертифицированные эксперты Specialty Coffee Association и действующий Q-грейдер — «кофейный сомелье».

Бизнес начинал с офлайн-кафе в подмосковном городе Электростали. В 2017 году «Лоботрясы» начали самостоятельно обжаривать зёрна для своей кофейни и друзей, а затем открыли ростерию — собственное производство свежеобжаренного кофе. 

Проблемы клиента

• Есть продукт, но нет канала продаж.
  

Чтобы выпустить собственный бренд на рынок, «Лоботрясы» решили запустить интернет-магазин. К Вебфлай обратились по рекомендации импортёра — компании Colibri Coffee. 

Цели клиента

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

Чем Вебфлай помогли

Наше сотрудничество с «Лоботрясами» началось в 2017 году и состояло из 5 этапов: проектирование и создание прототипов ресурса, дизайн, вёрстка макетов, программирование функционала, интеграция с внешними системами.

Проектирование и прототипы сайта

Структуру и разделы ресурса проектировали на основании анализа конкурентов и ведущих зарубежных сайтов. Часть идей взяли из кейсов Torrefacto и Colibri Coffee. Разделы составили так, чтобы интернет-магазин «Лоботрясов» продвигался в поиске и посещаемость росла.

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

SEO-продвижение интернет-магазина

На старте проекта заказчик хотел сделать описания, близкие к философии бренда, такие как «вкусный кофе в одно рукопожатие от фермера». Это УТП оставили на главной странице. А чтобы интернет-магазин соответствовал требованиям поисковых систем, выполнили базовую SEO-оптимизацию.

Ключевые фразы и SEO-тексты разместили в каждом разделе: в каталоге, фильтрах, карточке товара, блоге. Например, заголовки и подзаголовки страниц на сайте совпадают с наиболее частыми запросами в сети, например, «жареный кофе в зёрнах», «... для кофемашин», «... для воронки (фильтра)». Это помогает покупателям найти нужный продукт именно у «Лоботрясов».

Дизайн сайта

«Лоботрясы» пришли с готовым брендингом. У заказчика были концепция продукта, образцы иллюстраций, макеты упаковки, фирменные цвета и шрифты. На основании этого Вебфлай создали дизайн интернет-магазина.

Вёрстка макетов

В 2017 году, когда интернет-магазин разрабатывали, доля мобильных устройств была меньше, чем в 2023-м году. Однако вёрстку под все виды устройств предусмотрели сразу, сайтом удобно пользоваться как со стационарного компьютера, так и с мобильного телефона. Сейчас наибольший поток посетителей приходит со смартфонов, — свыше 70%.

Программирование функционала

Интернет-магазин «Лоботрясов» разработали на CMS 1С-Битрикс. С этой платформой работаем более 10 лет: создаём сайты, интернет-магазины и личные b2b-кабинеты. Ресурсы на CMS 1С-Битрикс продвигаются по SEO, на платформе есть управление заказами и доставкой, аналитика продаж, ведение остатков на складе, e-mail-маркетинг, интеграция с 1С и самостоятельная работа с контентом.

Админка интернет-магазина

Владелец сайта на CMS 1С Битрикс без программиста редактирует каталог и карточки товаров, публикует тексты, фото и видео, добавляет новые позиции, создаёт разделы при помощи конструктора блоков, отслеживает статистику по заказам и оплатам.

Фильтры в каталоге

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

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

В подробном фильтре покупатель выбирает продукт по:

• Сорту (арабика, робуста и смесь).
• Обжарке (тёмная и средняя).
• Кислотности (яркая, средняя, слабая).
• Обработке (натуральная, мытая, полумытая, экспериментальная).
• Стране происхождения (Бразилия, Эфиопия, Колумбия, Таиланд).
• Особым критериям (рекомендованные, популярные, новинка и микролот).

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

Далее покупатель в углублённом фильтре выбирает напиток по способу приготовления: всего 10 вариантов.

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

Каталог свежеобжаренного кофе

При оформлении каталога сделали ставку на описание продукта и контент. На карточку товара вывели профессиональные фото и шкалу с характеристиками вкуса: горечью, кислотностью и сладостью, по этим параметрам клиенты чаще всего выбирают напиток.

Добавили окошко для поиска нужного объёма в коробках и граммах, и поле для выбора помола: не молоть, для турки, для воронки, кемекса, — всего 9 вариантов.

Карточка товара

«Лоботрясы» хотят знакомить покупателей со specialty кофе, поэтому выбрали максимально информативную карточку товара. На детальной странице описали оттенки вкуса, дату обжарки, в чём лучше готовить напиток, указали оценку по стандартам CSA (качество кофе), описание и паспорт сорта, варианты оплаты и доставки, отзывы покупателей.

Корзина и оформление заказа

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

В корзине отображаются наименование товаров, количество, цена (со скидкой и без), общий вес посылки, стоимость доставки и накопленные бонусы, которыми можно оплатить заказ частично или полностью. Также есть окошко для промокода.

Многие клиенты «Лоботрясов» внимательны к экологии, для них в корзине есть галочка «Отправить без коробки». Покупателю отправляют пачки, не упаковывая в картонную коробку сверху. Это делается для сокращения углеродного следа, — чем меньше тратится картона и бумаги — тем экологичнее.

Личный кабинет пользователя

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

Блог «Лоботрясов»

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

Контент для блога «Лоботрясы» делают сами и размещают без программиста. Статью собирают при помощи сниппетов — блоков в конструкторе админки. Есть элементы для заголовков, фото, видео, цитат, списков и врезок по тексту.

Интеграция сайта с внешними системами

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

1С.УНФ — описание товара подгружается в интернет-магазин из заполненной карточки в 1С, покупатель видит на сайте корректные остатки на складе.

Сервисы доставки — (DPD, CDEK, «Почта России»). Покупатель в корзине выбирает вариант и адрес доставки, а система рассчитывает стоимость пересылки заказа. 

Интернет-эквайринг — онлайн-оплата через интернет банковскими картами 3-х платёжных систем.

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

CRM Битрикс24 — заказы из интернет-магазина выгружаются и обрабатываются в CRM. После оформления заявки система отправляет покупателю письмо с информацией о лоте и способах приготовления кофе. Далее Битрикс24 присылает автоматические оповещения о смене статуса заказа: собран, передан курьеру и так далее. Письма оформили в фирменном стиле «Лоботрясов».

Индекс NPS — приложение для сбора отзывов и обратной связи на Битрикс24. Компания пользуется им более 3 лет. Конверсия из опроса в оценку — 21%.

Яндекс.Директ — модуль, выгружающий товары для рекламы в ЯД.

Соцсети — если пользователь соцсети отмечает «Лоботрясов» в посте, то публикация дублируется на сайт. Модуль подключали для Нельзяграма.