Витатека

vitateka® — аптечное направление одной из крупнейших фармкомпаний России «ПРОТЕК». Под этой торговой маркой компания производит косметику, БАДы и изделия медицинского назначения. Нам было необходимо:

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

— Продумать каталог с гибким поиском.

— Организовать на сайте дополнительные точки коммуникации с клиентом.

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

Фичи сайта:

1) Четырехслойный промоблок, для реализации которого пришлось подгонять кажджый элемент под размеры слайдера.

2) Необычный каталог, анимированный блок которого для главной страницы был написан вручную.

3) Кастомный фильтр каталога: фильтр в меню используется для того, чтобы пользователь мог перейти в раздел каталога с предустановленным фильтром. Для реализации этой схемы дорабатывался штатный компонент Битрикс.

4) Умный поиск, игнорирующий раскладку клавиатуры.

5) Анимированная страница 404.

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

Итак, для кого делаем сайт:

1. Конечные потребители

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

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

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

2. Возможные партнеры

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

Разрабатываем карту сайта

Теперь у нас есть контекст пользователей — переходим к структуре сайта, которым они будут пользоваться. Кроме стандартного набора страниц (главной, каталога и контактов) мы увидели, как сделать сайт более персонифицированным:

— информация «Где купить» (онлайн и оффлайн магазины);

— система фильтрации по типу продукта и области применения;

— иконка гипоаллергенности товара;

— иконки назначения товара;

— в карточке товара теги с названием содержащегося витального компонента с ссылкой на его описание;

— информация о сертификатах и стандартах качества;

— контакты для сотрудничества.

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

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

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

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

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

Страницу 404 мы анимировали: если пользователь ошибся адресом, то вся его досада по этому поводу будет развеяна парящим по странице витальным компонентом.

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

Процитируем заказчика:

«В результате совместной работы мы смогли создать стильный, современный и удобный сайт для аптечного бреда косметики и продуктов для здоровья vitateka®. Задача была непростой: создать имиджевый сайт, который бы выделял бренд среди конкурентов, при этом был прост и удобен в использовании. На наш взгляд, задача выполнена.»