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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• проверенная технология разработки — CMF MODx REVO;
• высокая скорость загрузки;

• заложен инструментарий для SEO;
• реализована работа с торговыми предложениями;
• продумана бонусная программа;
• доставка продукции по всей Украине.

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

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

‍