Группа компаний Протек
Медицина и ветеринария
Россия, Москва
Промо-сайт
Декабрь 2020
vitateka® — аптечное направление одной из крупнейших фармкомпаний России «ПРОТЕК». Под этой торговой маркой компания производит косметику, БАДы и изделия медицинского назначения. Нам было необходимо:
— Создать имиджевый сайт, который познакомит пользователя с маркой, продукцией и ее преимуществами.
— Продумать каталог с гибким поиском.
— Организовать на сайте дополнительные точки коммуникации с клиентом.
Дизайн сайта строился на основе гайдлайна по дизайну упаковки, где ключевые элементы — витальные компоненты, яркие и сочные иллюстрации.
Фичи сайта:
1) Четырехслойный промоблок, для реализации которого пришлось подгонять кажджый элемент под размеры слайдера.
2) Необычный каталог, анимированный блок которого для главной страницы был написан вручную.
3) Кастомный фильтр каталога: фильтр в меню используется для того, чтобы пользователь мог перейти в раздел каталога с предустановленным фильтром. Для реализации этой схемы дорабатывался штатный компонент Битрикс.
4) Умный поиск, игнорирующий раскладку клавиатуры.
5) Анимированная страница 404.
Ранее у Vitateka сайта не было. Значит, не было и веб-аналитики, на которую можно было опираться при разработке структуры сайта. Первой задачей стал анализ целевых персон и далее — на основе его результата — разработка карты сайта.
Итак, для кого делаем сайт:
1. Конечные потребители
— домохозяйка с детьми, которая с телефоном в руках будет тщательно выбирать продукт по соотношению цена-качество, прочитав скорее отзывы, чем состав.
— девушка 30 лет, работает продавцом-консультантом, придерживается здорового образа жизни, читает пп-блоги и поэтому понимает, что написано в составах. Ей важно, чтобы продукт был эффективным, хотя и может купить его только из-за яркой упаковки.
— фармацевт аптеки — интересуется маркой по долгу службы: ей нужна понятная и полная информация о товарах и компании. Боится запутаться на сайте и не найти нужный препарат.
2. Возможные партнеры
— совладелица аптечной сети — хочет расширить ассортимент аптек: она ценит свое время и найти контакт для сотрудничества быстро. Ей важно, чтобы марку знали и любили.
Разрабатываем карту сайта
Теперь у нас есть контекст пользователей — переходим к структуре сайта, которым они будут пользоваться. Кроме стандартного набора страниц (главной, каталога и контактов) мы увидели, как сделать сайт более персонифицированным:
— информация «Где купить» (онлайн и оффлайн магазины);
— система фильтрации по типу продукта и области применения;
— иконка гипоаллергенности товара;
— иконки назначения товара;
— в карточке товара теги с названием содержащегося витального компонента с ссылкой на его описание;
— информация о сертификатах и стандартах качества;
— контакты для сотрудничества.
Заказчик предоставил нам гайдлайн по дизайну упаковки, где ключевые элементы — витальные компоненты. На его основе мы разработали дизайн всего сайта.
Иллюстрации витальных компонентов яркие и сочные, поэтому дополнительно палитру мы не изобретали. Цвета для других элементов дизайна мы брали из цветов витальных компонентов. Фон оставили белый, лишь кое-где разбавив текстовые блоки слабым серо-бежевым фоном.
Промоблок на сайте — слайдер, состоящий из четырех слоев: полукруг-фон, витальный компонент слева, упаковка, компоненты справа. Чтобы все это согласованно двигалось, пришлось подгонять каждый элемент под размеры слайдера.
Товары каталога поделены на несколько ключевых серий, каждая серия — раздел с описанием. Нам так хотелось эффектно показать это на главной странице, что на этапе верстки мы вручную написали анимированный блок.
Фильтр в меню Vitateka используется не для фильтрации товаров, а для того, чтобы пользователь мог перейти в раздел каталога с предустановленным фильтром. Чтобы построить такое меню, мы использовали «Умный фильтр» четыре раза — по одному на каждый раздел каталога. Но на сборке оказалось, что Битрикс не умеет работать с несколькими умными фильтрами на странице, и запрос всегда перехватывает тот фильтр, который на странице расположен первым. Поэтому нам пришлось создать свой фильтр, поменяв под свои нужды штатный компонент Битрикса.
Страницу 404 мы анимировали: если пользователь ошибся адресом, то вся его досада по этому поводу будет развеяна парящим по странице витальным компонентом.
Кроме этого, мы позаботились о том, чтобы пользователю было проще ориентироваться в отзывах на товары, и не тратить лишние нервы, ища информацию на сайте: умный поиск игнорирует раскладку клавиатуры.
Процитируем заказчика:
«В результате совместной работы мы смогли создать стильный, современный и удобный сайт для аптечного бреда косметики и продуктов для здоровья vitateka®. Задача была непростой: создать имиджевый сайт, который бы выделял бренд среди конкурентов, при этом был прост и удобен в использовании. На наш взгляд, задача выполнена.»
![]()
Ишниязов Д.Р.
Руководитель отдела СТМ ЗАО Фирма ЦВ «Протек»
Отдел Собственных торговых марок ЗАО Фирма ЦВ «Протек» выражает всему коллективу ООО «Сибирикс» благодарность за работу над проектом vitateka.ru.
В результате совместной работы мы смогли создать стильный, современный и удобный сайт для аптечного бреда косметики и продуктов для здоровья vitateka®. Задача была непростой: создать имиджевый сайт, который бы выделял бренд среди конкурентов, при этом был прост и удобен в использовании. На наш взгляд, задача выполнена. При работе над проектом ООО «Сибирикс» помог не только оценить реальность воплощения наших идей, но также выступил генератором предложений и решений для сайта.![]()