Notik Coffee

Notik Coffee – бренд авторской обжарки кофе существующий на рынке более 8 лет, имеющий сети розничной продажи кофе, несколько собственных кофеен, и собственное производство. Ассортимент компании включает в себя как зерновой кофе и различные дрип-пакеты, так и собственную линейку сухих сиропов.

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

Перед нами были поставлены следующие задачи:

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

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

После этапа прототипирования все макеты были отрисованы в 3-х разрешениях для корректной адаптации проекта под десктопные, планшетные и мобильные устройства.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для выбора пунктов выдачи курьерской компании на карте нами была произведена интеграция с использованием API СДЭК.

Для оплаты нами была подключена платежная система Юкасса с использованием официального интеграционного модуля. Также в процессе подключения была настроена фискализация чеков в онлайн-кассу Эвотор, что является обязательным требованием для интернет магазинов принимающих онлайн-оплаты согласно закону ФЗ-54.

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

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

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

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

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

Отдельно отметим сложную систему лояльности реализованную на этапе MVP проекта. Она состоит из 2 обособленных частей: одна для розничных покупателей, вторая для оптовых. Обе системы лояльности имеют разное визуальное отображение и в корне разную систему применения скидок и бонусов.

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

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

Распределение пользователей по группам происходит сотрудниками магазина в административной панели проекта.

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

На странице реализована поддержка хештегов для быстрой фильтрации.

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

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

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

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

Все макеты были отрисованы в 3-х разрешениях для корректной адаптации при верстке под десктопные, планшетные и мобильные устройства.

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

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

Для оперативного обновления цен и остатков на проекте была настроена интеграция с отраслевым решением 1С: Общепит. Так как данное решение не имеет штатного модуля обмена, нашей командой совместно с привлеченными со стороны заказчика разработчиками 1С было произведено внедрение и настройка кастомного модуля обмена с передачей необходимых заказчику данных как из 1С на сайт, так и обратно.

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

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

Из наиболее интересных аспектов разработки можно выделить: