Студия Турум-бурум

Разработка интернет-магазина на MODx для кофейного бизнеса Datis

Разработка интернет-магазина на MODx для кофейного бизнеса  Datis
2094

Кофе объединяет

Собственник бренда — Денис, работал дистрибьютором в крупной компании, которая начала выпускать кофемашины. И во время одной из дегустаций Денис заинтересовался кофейной темой, начал расширять свои знания в этой области. В итоге приобрел ростер и в 2013 году открыл свой бизнес. За это время у компании появилось производство по обжарке кофе с производительностью до 20 тон обжаренных зёрен в месяц, четыре фирменных кофейни и простой сайт.

Собственник бренда — Денис, работал дистрибьютором в крупной компании, которая начала выпускать кофемашины.

По мере расширения оффлайн бизнеса, появилась потребность совершенствования и онлайн магазина. Для этого Денис обратился в нашу компанию за экспертизой.   

После первого же общения случилась синергия интересов двух тезок Денисов, собственника бизнеса и руководителя отдела UX/UI Турум-бурум. Их объединил интерес к кофе и созданию качественных сайтов.

Задача: Придерживаясь существующей айдентики бренда, создать простой, удобный интернет-магазин, c оптимальным набором функций, которые позволят пользователям быстро и без проблем совершать заказы. 

Выбор технологии

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

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

Платформой для разработки стал CMF MODx REVO. У технологии минимальное базовое наполнение без лишнего функционала с возможностью добавления отдельных модулей в зависимости от потребностей бизнеса: разнообразные платежные системы, баннера, работа с торговыми предложениями и прочее. Это облегчает работу сайта и позволяет масштабировать бизнес в дальнейшем.

Так, при проектировании дизайна, стоит двигаться по принципу mobile-first, а также следовать паттернам мобильных приложений, то есть взаимодействие с сайтом должно быть похожим на взаимодействие с мобильным приложением. Кроме этого мы добавили детали, которые уже давно стали показателем удобства и качества интернет-магазина. О них и расскажем в статье. 

Создаем атмосферу бренда в онлайн

На основе уже существующей айдентики бренда, проработали стилистику сайта.
В качестве основных цветов использовали белый и черный, а для ярких акцентов -- оранжевый. Заложили стандарты для будущих баннеров.

Шаблоны баннеров для дальнейшего использования на сайте
Шаблоны баннеров для дальнейшего использования на сайте 

При помощи кастомных иллюстраций передали настроение бренда: кофе, который окрыляет. 

При помощи кастомных иллюстраций передали настроение бренда: кофе, который окрыляет.

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

Наша команда вдохновилась брендом Datis, подходом и энтузиазмом собственника, и в рамках проекта разработала новый дизайн упаковки. Так как предыдущий вариант выглядел устаревшим и не соответствовал обновленной стилистике проекта. 

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

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

Проектируем витрину и расставляем товары на «полки» интернет-магазина Datis

Главная страница: навигация на основные отчки входа

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

Старый дизайн главной страницы интернет-магазина “Datis” в сравнении с ее новым дизайном:

На главной странице при помощи горизонтального верхнего меню правильно заложили навигацию на основные точки входа. Так как задача стартовой страницы – направить пользователя по категориям и облегчить поиск. 

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

Структурировали шапку, сделали ее более легкой, предусмотрели быстрый доступ к поиску, блоку “Избранное” и корзине.

В адаптивной версии в верхнюю панель вынесли иконки “Избранное” и “Корзина”.

В адаптивной версии в верхнюю панель вынесли иконки “Избранное” и “Корзина”. Акцентировали внимание пользователя, сколько товаров отложено в данных разделах.

Страница выдачи: Акцент на товаре, продуманная структура фильтров

Старый дизайн страницы выдачи  интернет-магазина “Datis” в сравнении с ее новым дизайном:


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

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

Адаптивная версия страницы выдачи в интернет-магазине DatisАдаптивная версия страницы выдачи в интернет-магазине Datis

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

На плитке товара сделали акцент на кофе и указали параметры, которые важны для принятия решения о покупке:

  • кислинка
  • насыщенность
  • горчинка
  • крепость

Можно или визуально увидеть вкусовые особенности, или выбрать интересующие параметры.

Карточка товара: работа с торговыми предложениями

Основные ошибки старой карточки товара:

  • Нерационально использовано пространство, блок с информацией о товаре плохо считывался и отдалял зону принятия решений на второй экран (цена, кнопка «В корзину», и т.д.)
  • Нарушены приоритеты между целевыми действиями. Рядом были расположены две контрастные кнопки “В корзину” и “Заказать звонок”.
  • Громоздкое, плохо структурированное описание товара.

Пользователь не до конца понимал, как взаимодействовать с карточкой товара и покидал ее.

Старый дизайн карточки товара интернет-магазина “Datis” в сравнении с ее новым дизайном:





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

  • Степень помола. Пишем не просто градацию тонкий, средний, грубый, а расшифровываем для каких целей каждый из них подходит. Например, тонкий – для заваривания в чашке или в турке, средний – для приготовления эспрессо, грубый – для капельной кофеварки. Степень обжарки, происхождение\регион, вкус, послевкусие.
  • Варианты фасовки. Демонстрируем очевидное преимущество покупки большой пачки.
  • Вкусовые характеристики. Наглядно демонстрируем при помощи кастомных элементов дизайна, после чего предлагаем более подробное описание.
  • Степень обжарки, вид зерна, его происхождение. Аналогично с вкусовыми характеристиками: сначала предлагаем пользователю наглядную визуальную иллюстрацию, а уже далее полное описание особенностей.
  • Отзывы и оценки товара. Впечатления реальных клиентов в карточке товара помогает укрепить доверие и дает потенциальным покупателям эмоциональную информацию, которая им нужна от других реальных покупателей для принятия решения. Как показывает статистика, 72% клиентов не предпринимают никаких действий, пока не прочитают отзывы.
  • Преимущества покупки. Акцентируем внимание на плюсах заказа кофе Datis: только свежеобжаренный кофе, бесплатный помол.
Адаптированная карточка товара

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

Еще один параметр, который не влияет на стоимость, но важен при оформлении заказа и учитывается в корзине, – степень помола.

Чекаут: оплата бонусами

Основные ошибки страницы оформления заказа:

  • Форма была перегружена полями для заполнения
  • Доступные варианты доставки и состав заказа плохо считывается
  • СТА не попадала в зону первого экрана

Старый дизайн страницы оформления заказа интернет-магазина “Datis” в сравнении с ее новым дизайном:


Максимально сократили количество полей для заполнения и разбили страницу оформления заказа на 2 этапа:

  • Личные данные. Предложили новому пользователю заполнить краткую форму, а постоянному — авторизоваться через e-mail, пароль или социальные сети.
  • Доставка и оплата. Наглядно продемонстрировали возможные способы доставки и расчета. 

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

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

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

Кому подойдет вариант создания сайта на основе фирменного eCommerce решения

Мы не просто разработали сайт кофейного интернет-магазина, проект Datis — это пример того, как быстро запустить простой, но качественный сайт:

  • проверенная технология разработки — CMF MODx REVO;
  • высокая скорость загрузки;
Показатель Google Page Speed страницы выдачи интернет-магазина Datis
Показатель Google Page Speed страницы выдачи интернет-магазина Datis
  • заложен инструментарий для SEO;
  • реализована работа с торговыми предложениями;
  • продумана бонусная программа;
  • доставка продукции по всей Украине.

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

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



Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.