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

1. Вводная задача от заказчика, проблематика, цели

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

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

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

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

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

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

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Разработка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Результаты сотрудничества

А что в итоге?

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

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