logo RocketBusiness

Чистая разработка: Dent Mart

Магазин товаров для гигиены полости рта

Разработка

Предполетный бриф

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

Dent Mart с 2010 года продает и доставляет товары по РФ и за границу через сайт и маркетплейсы. Интернет-магазин работает с 2012. За такой срок появилась необходимость обновить сайт: сделать его более современным и юзабельным для пользователей и сотрудников магазина. О том, как мы этого добились — ниже.

Инструменты и технологии

1С-Битрикс
1С-Битрикс1С-Битрикс
Аспро
АспроАспро
PHP
PHPPHP
Git
GitGit
Nginx
NginxNginx
Forie
ForieForie
Preact
PreactPreact

Особенности проекта

Наша цель — перенести сайт на новый шаблон 1С-Битрикс из магазина Аспро.
Но шаблон не всегда означает легкое решение. В техническом задании появилось много новых функций. Они не были заложены в шаблоне — а значит, на их написание и интеграцию нужно время.

Перед нами стояли 3 глобальные задачи:

  • Обновление дизайна.
    Для этого — провести анализ UX/UI-дизайна от клиента, внести правки в макет и сверстать сайт.
  • Расширение возможностей.
    В шаблоне не хватало ряда функций — добавление уценки, прокрутка блока рекомендаций, корректировка состава корзины из карточки товара.
  • Интеграция с МойСклад.
    Сотрудники Dent Mart заполняли много карточек товаров вручную: обмен данными не отрабатывал правильно.
Сайт магазина товаров для гигиены полости рта dent-mart.ru
Сайт магазина товаров для гигиены полости рта dent-mart.ru
Сайт магазина товаров для гигиены полости рта dent-mart.ru
Сайт магазина товаров для гигиены полости рта dent-mart.ru

Обновляем дизайн

По новой UX/UI-концепции сайт разработали в цветах, традиционно ассоциирующихся с медициной — синий и белый.
Главные характеристики:

  • белый фон,
  • спокойные цвета,
  • безрамочные блоки,
  • объемные кнопки с анимацией.

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

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

Работает и классический функционал интернет-магазинов: разделы «Сравнение», «Избранное».

Работает и классический функционал интернет-магазинов: разделы «Сравнение», «Избранное»
Работает и классический функционал интернет-магазинов: разделы «Сравнение», «Избранное»
Работает и классический функционал интернет-магазинов: разделы «Сравнение», «Избранное»
Работает и классический функционал интернет-магазинов: разделы «Сравнение», «Избранное»
Работает и классический функционал интернет-магазинов: разделы «Сравнение», «Избранное»
Работает и классический функционал интернет-магазинов: разделы «Сравнение», «Избранное»
Работает и классический функционал интернет-магазинов: разделы «Сравнение», «Избранное»
Работает и классический функционал интернет-магазинов: разделы «Сравнение», «Избранное»

Расширяем возможности

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

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

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

Виктория
Виктория, Аккаунт-менеджер

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

Что еще доработала команда?

  • Вывод отзывов из Яндекс Маркета,
  • Пользовательские функции в корзине,
  • Акционную и бонусную системы,
  • Отображение подборок товаров на главной,
  • Автокоррекцию запросов в поиске,
  • Авторасчет стоимости доставки.

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

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

Автоматизируем процессы

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

Решение было — но оно оказалось непростым. Нужно было сопоставить каталоги в МойСклад и 1С:Битрикс, найти различия и унифицировать структуру. У долгого и кропотливого процесса был понятный результат — полная синхронизация баз данных.

Раньше сотрудники Dent Mart заполняли карточки товаров дважды: сначала в системе МойСклад, а затем в админ-панели сайта. Сегодня они делают ту же работу всего один раз. Мы оставили подробные инструкции по вводу данных, чтобы на сайте всегда отображались правильные названия и артикулы товаров, а на складе не возникало ошибок при отправке заказов.

Влад
Влад, Программист

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

Оцениваем результат

Финальный этап — тестирование, правка мелких багов. И, конечно, базовая SEO-рутина: настройка редиректов, добавление мета-тегов, файлов sitemap и robots, установка счетчика Яндекс Метрики.

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

Делаем беспроигрышные предложения
давайте обсудим