«Живой» сайт нам по зубам: разработка интернет-магазина для дистрибьютора стоматологических материалов

Ольга Головинская
18.06.2024 Ольга Головинская Количество просмотров: 892

Мы часто сетуем, что не все клиенты готовы активно участвовать в разработке сайта для своего бизнеса. И тогда работа по проекту превращается в увлекательную игру — «угадай, что мне нужно». Но сегодня мы расскажем о совершенно другом подходе заказчика. Компания AVOSDENT пришла к нам с точно сформулированным запросом. О том, как шла разработка и доволен ли клиент результатом, мы расскажем в этом кейсе.

11 мин.
Нет времени читать?

Содержание статьи:

  1. AVOSDENT: «живой» сайт и четкое позиционирование
  2. Разработка
  3. А что в итоге?

AVOSDENT: «живой» сайт и четкое позиционирование

Компания AVOSDENT занимает 3 место в Европе среди дистрибьюторов стоматологических материалов OsteoBiol®, S.I.N., Tekscan. Но кроме поставок расходников для лечения и протезирования зубов, компания организует курсы и вебинары от зарубежных и российских клинических экспертов, участвует в конференциях, поддерживает своих клиентов. Среди них — врачи частной практики, коммерческие и государственные клиники, локальные или федеральные дилеры.

На момент обращения в WebCanape у AVOSDENT уже был интернет-магазин, как были и претензии к нему:

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

Сайт AVOSDENT в июле 2023 года

Сайт AVOSDENT в июле 2023 года

Интернет-магазин и не только

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

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

Клиент хотел «живой» — анимированный сайт, и среди примеров приводил наш проект хаб «Кибербезопасность», который два года назад победил в конкурсе «Золотой сайт 2022». В отличие от многих других заказчиков, представители AVOSDENT пришли не только с идеей и примером, но и с презентацией структуры сайта и даже частично готовым прототипом.

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

Разработка

После подписания договора, в котором мы зафиксировали поэтапные сроки разработки, суммы и гарантии, AVOSDENT попал в одну из наших проектных команд. В ней — project-менеджер, дизайнер, frontend-, backend-разработчики и маркетолог. Project-менеджер — руководитель проекта — ведет всю коммуникацию с клиентом и отвечает за результат.

Почему отказались от Битрикса

Первое, что мы решали еще на этапе переговоров, — это на какой платформе делать новый сайт. Битрикс — частый выбор для интернет-магазинов. Некоторые заказчики приходят только за ним, и часто это оправдано. Но AVOSDENT и тут отличались от коллег.

Устав от особенностей прошлого сайта на этой админке, клиент хотел более простую CMS, в которой быстро разобрались бы его сотрудники. Мы предложили нашу студийную разработку — Canape CMS, на которой за 16 лет сделали уже 2 500+ сайтов.

Кроме удобного интерфейса клиент оценил:

  • «вечную» лицензию, которую не надо продлевать;
  • безопасность — админка находится в реестре российского ПО и не популярна у хакеров;
  • невысокие требования к ресурсам хостинга;
  • функциональный SEO-модуль для продвижения в поисковиках.

Концепция и страсти по дизайну

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

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

Главная страница AVOSDENT

Главная страница AVOSDENT

Главная страница и страница «О компании» имеют слайдовую структуру. Как это? Это значит, что их нельзя скучно проскроллить сверху вниз. При каждом скролле следующий экран полностью замещает предыдущий, как в презентациях. Такой непривычный подход заставляет осмысленно перемещаться по странице и акцентировать внимание на важном.

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

Медиа-центр AVOSDENT

Медиа-центр AVOSDENT

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

Страница интернет-магазина AVOSDENT

Страница интернет-магазина AVOSDENT

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

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

Пример дизайна страницы «Производители» с фирменными элементами

Пример дизайна страницы «Производители» с фирменными элементами

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

Анимации «без зубов»

«Живой» сайт в понимании клиента — это наличие на страницах подвижных элементов. И должны они быть не «про зубы», а поддерживать общую концепцию сайта. Это оригинальное решение, которое требует особого мастерства и от дизайнеров, и от программистов.

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

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

О компании

Анимации на странице «О компании»

Анимации на странице «О компании»

Анимация на странице «Обучение»

На странице «Обучение»

Анимация в «Библиотеке»

В «Библиотеке»

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

Пример анимированных рамок на фото экспертов

Пример анимированных рамок на фото экспертов

Личный кабинет и при чем тут маркетинг

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

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

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

Набор чек-листов для проверки вашего маркетинга
Хотите проверить ваш маркетинг на эффективность, но не знаете как?
Я Евгений Чуранов, эксперт Яндекса по обучению, подготовил для вас подборку полезных чек-листов. Скачивайте их и находите точки роста вашего бизнеса
Идеальная страница услуги
Идеальная карточка товара
Идеальная статья на сайте
Идеальное описание компании
Чек-лист подготовки к рекламе
Идеальный сайт для SEO
Уже скачали 15674 человека
Евгений Чуранов
эксперт Яндекса по обучению

Каталог и фильтры товаров

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

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

Листинг товаров на сайте AVOSDENT

Листинг товаров на сайте AVOSDENT

Новое отображение получили и карточки товаров. Раньше на них были только характеристики и кратко клинические показания.

Карточка товаров на старом сайте AVOSDENT

Карточка товаров на старом сайте AVOSDENT

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

Новая карточка товара на сайте

Новая карточка товара на сайте

Библиотека полезных материалов

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

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

Раздел с научными публикациями до переделки

Раздел с научными публикациями до переделки

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

Страница «Рекомендованные материалы» на новом сайте

Страница «Рекомендованные материалы» на новом сайте

Календарь мероприятий

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

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

Календарь курсов от AVOSDENT

Календарь курсов от AVOSDENT

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

А что в итоге?

В итоге клиент уже несколько месяцев «живет» на новом сайте. Он намного удобнее для администрирования и пользователей. Ярко выделяется на фоне шаблонных сайтов в нише стоматологии. Позиционирует AVOSDENT не просто как поставщика, одного из сотен, а как партнера для бизнеса своих клиентов.

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

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

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

Нужна разработка сайта? Звоните:  8 (800) 200-94-60, доб. 321, пишите rop@web-canape.com. WebCanape — агентство с понятными гарантиями!

Понравилась статья - поделись с друзьями

Контакты

Звонок бесплатный

Смоленск, ул. Карла-Маркса 12 +7 (4812) 20-94-60

Москва, ул. Пятницкая 37 +7 (499) 506-97-20