NIKADENT

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

У компании уже работал текущий сайт, но дизайн, UX и функционал сайта морально устарели и не соответствовали потребностям клиентов.

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

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

Компания работает с клиентами по всей России — в основном это стоматологические клиники и частные кабинеты. Аудитория состоит из двух групп: крупные оптовые покупатели и клиенты с мелким и средним оптом.

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

На текущем сайте в каталоге было свыше 2 тысяч товарных позиций, а в «1С» более 10 тысяч, то есть планировался значительный рост товарной номенклатуры, что необходимо было заранее учесть еще на этапе проектирования.

Помимо дизайна, требовались доработки функциональной части:

• Онлайн-оплата через приложения банков, QR-коды и СБП после прохождения премодерации у менеджера.
• Автоматическое определение региона посетителя по IP с возможностью дальнейшей замены города вручную.
• Расчет индивидуальных условий доставки для посетителей из разных регионов, в зависимости от выбранной службы.
• Личный кабинет клиента с историей заказов и возможностью быстрого повтора заказа.
• Программа лояльности и система промокодов для мотивации повторных и регулярных покупок.
• Подбор аналогов товаров по набору свойств из «1С».
• Интеграция сайта с сервисами доставки и СМС-рассылок, системой электронных платежей, проверки и коррекции данных, Roistat.

При выборе цветовой гаммы мы ориентировались на фирменные цвета и гайдлайн бренда.

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

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

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

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

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

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

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

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

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

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

При этом есть классическая сортировка товаров по популярности, цене или по алфавиту.

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

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

На текущем сайте используется рич-контент. То есть большое количество сопутствующей полезной информации о товаре и его свойствах. Это помогает пользователю принять решение в пользу покупки.

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

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

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

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

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

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

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

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

Еще один вариант — подбор аналога товара менеджером по заявке клиента.

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

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

Помимо стандартного оформления заказа, доступны еще два сценария:

• «Купить в 1 клик» — для мелкого опта и розницы
• «Купить оптом» — для крупных оптовых клиентов

Такое разделение возникло из-за различий в сценариях.

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

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

Оба сценария реализуются с помощью простого модального окна.

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

Произведена интеграция сайта с системами «1С:Предприятие» + «1С:Комплексная автоматизация».

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

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

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

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

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

В новом сайте предусмотрена возможность онлайн-оплаты товаров с помощью QR-кодов, через приложения банков и СБП. Однако оплата проходит не сразу, а только после согласования с менеджером.

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

Менеджер проверяет наличие товаров на складе, уточняет цены и связывается с клиентом для подтверждения заказа.

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

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

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

Дополнительно для проекта был создан UI-kit — полный набор всех элементов интерфейса: цветов, иконок стрелок, кнопок и всех элементов типографики, что позволит всегда придерживаться заданного стиля при любых доработках.

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

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

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

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