Vitateka: сайт для аптечного направления одной из крупнейших фармкомпаний России

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

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

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

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

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

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

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

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

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

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

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

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

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

• информация «Где купить» (онлайн и оффлайн магазины);
• система фильтрации по типу продукта и области применения;
• иконка гипоаллергенности товара;
• иконки назначения товара;
• в карточке товара теги с названием содержащегося витального компонента с ссылкой на его описание;
• информация о сертификатах и стандартах качества;
• контакты для сотрудничества.

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

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

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

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

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

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

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

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