Vitateka
Сайт живительной силы
Vitateka
Сайт живительной силы
Vitateka — аптечное направление одной из крупнейших фармкомпаний России «ПРОТЕК», с которой мы сотрудничаем во второй раз. Под этой торговой маркой компания производит косметику, БАДы и изделия медицинского назначения. Особенность продукции — в ее составе, который берет за основу витальные (жизненно необходимые) компоненты: омега 3−6-9, мумие, растительные экстракты и пр.
Задачи
- Создать имиджевый сайт, который познакомит пользователя с маркой, продукцией и ее преимуществами.
- Продумать каталог с гибким поиском.
- Организовать на сайте дополнительные точки коммуникации с клиентом.
Аналитика
Ранее у Vitateka сайта не было. Значит, не было и веб-аналитики, на которую можно было опираться при разработке структуры сайта. Первой задачей стал анализ целевых персон и далее — на основе его результата — разработка карты сайта.
Определяем аудиторию сайта
Дано заказчиком:
Такое описание аудитории подходит для сайтов и интернет-магазинов всех аптек в мире и большинства фармкомпаний.
Вместе с заказчиком мы расширили аудиторию и для каждого представителя ЦА сделали его портрет.
- покупатель (женщина семейная, работающая, с детьми, 35−50 лет);
- сотрудники аптек (женщина с высшим или средним образованием, 36−60 лет).
Такое описание аудитории подходит для сайтов и интернет-магазинов всех аптек в мире и большинства фармкомпаний.
Вместе с заказчиком мы расширили аудиторию и для каждого представителя ЦА сделали его портрет.
Итак, для кого делаем сайт:
1. Конечные потребители
— домохозяйка с детьми, которая с телефоном в руках будет тщательно выбирать продукт по соотношению цена-качество, прочитав скорее отзывы, чем состав.
— девушка 30 лет, работает продавцом-консультантом, придерживается здорового образа жизни, читает пп-блоги и поэтому понимает, что написано в составах. Ей важно, чтобы продукт был эффективным, хотя и может купить его только из-за яркой упаковки.
— фармацевт аптеки — интересуется маркой по долгу службы: ей нужна понятная и полная информация о товарах и компании. Боится запутаться на сайте и не найти нужный препарат.
2. Возможные партнеры
— совладелица аптечной сети — хочет расширить ассортимент аптек: она ценит свое время и найти контакт для сотрудничества быстро. Ей важно, чтобы марку знали и любили.
1. Конечные потребители
— домохозяйка с детьми, которая с телефоном в руках будет тщательно выбирать продукт по соотношению цена-качество, прочитав скорее отзывы, чем состав.
— девушка 30 лет, работает продавцом-консультантом, придерживается здорового образа жизни, читает пп-блоги и поэтому понимает, что написано в составах. Ей важно, чтобы продукт был эффективным, хотя и может купить его только из-за яркой упаковки.
— фармацевт аптеки — интересуется маркой по долгу службы: ей нужна понятная и полная информация о товарах и компании. Боится запутаться на сайте и не найти нужный препарат.
2. Возможные партнеры
— совладелица аптечной сети — хочет расширить ассортимент аптек: она ценит свое время и найти контакт для сотрудничества быстро. Ей важно, чтобы марку знали и любили.
Разрабатываем карту сайта
Теперь у нас есть контекст пользователей — переходим к структуре сайта, которым они будут пользоваться. Кроме стандартного набора страниц (главной, каталога и контактов) мы увидели, как сделать сайт более персонифицированным:
- информация «Где купить» (онлайн и оффлайн магазины);
- система фильтрации по типу продукта и области применения;
- иконка гипоаллергенности товара;
- иконки назначения товара;
- в карточке товара теги с названием содержащегося витального компонента с ссылкой на его описание;
- информация о сертификатах и стандартах качества;
- контакты для сотрудничества.
Дизайн
Заказчик предоставил нам гайдлайн по дизайну упаковки, где ключевые элементы — витальные компоненты. На его основе мы разработали дизайн всего сайта.
Заказчик хотел, чтобы сайт передавал концепцию марки Vitateka — натуральность и эффективность на биоуровне. Витальные компоненты — они повсюду: и в нашей жизни, и в дизайне сайта Vitateka :)
Иллюстрации витальных компонентов яркие и сочные, поэтому дополнительно палитру не изобретали. Цвета для других элементов дизайна мы брали из цветов витальных компонентов. Фон оставили белый, лишь кое-где разбавив текстовые блоки слабым серо-бежевым фоном. Все это в итоге позволило нам создать чистенький сайт с ощущением легкости.
Кристина
Дизайнер
Фичи
Четырехслойный промоблок
Кажется простым приятным глазу решением. Это вам кажется. Блок шапки — это слайдер, состоящий из 4 слоев (полукруг-фон, витальный компонент слева, упаковка, компоненты справа).
Чтобы все это согласованно двигалось, пришлось подгонять каждый элемент под размеры слайдера. Но и тут не все просто: поскольку это слайдер — за его пределы невозможно вставить изображения. Дизайнеры их часто рисуют за пределами блока, либо с разными размерами, но на этапе верстки необходимо, чтобы картинки были примерно одинаковыми.
Необычный каталог
Ключевые серии — это три раздела каталога с описанием. Готового компонента или библиотеки для его реализации не было. На этапе верстки этот анимированный блок писался вручную.
Кастомный фильтр каталога
Фильтр в меню Vitateka используется не для фильтрации товаров, а для того, чтобы пользователь мог перейти в раздел каталога с предустановленным фильтром. Чтобы построить такое меню, мы использовали «Умный фильтр» четыре раза — по одному на каждый раздел каталога (Красота внутри, Красота снаружи, Суперфуды и Детские товары).
Все шло хорошо, пока не перестало. Когда перешли к сборке страниц каталога, выяснилось, из четырех фильтров работает только один.
Оказалось, Битрикс не умеет работать, когда на одной странице расположено несколько «Умных фильтров». Он действует по принципу «кто первый встал, того и тапки»: какой фильтр на странице был расположен первым, тот и перехватывает запрос.
Дмитрий
Разработчик
Пришлось создавать свой: скопировали компонент штатного фильтра из Битрикса к себе, поменяли под свои нужды и затем переделали для увеличения скорости загрузки загрузки.
Мини-отзывы на мини-экранах
Мелочь, а приятно. Мы позаботились о тех пользователях, которые любят читать отзывы, но не любят их скролить. Если экран слишком мал, чтобы вмещать в себя длинный текст, отзыв сокращается до пары строк с возможностью развернуть и свернуть обратно.
Умный поиск
Если пользователь ошибется с языком раскладки клавиатуры и введет название товара на английском языке, то сайт его поймет.
Дзен-страница 404
Настоящий шедевр: витальный компонент парит по странице.
Это моя любимейшая часть проекта. Когда я увидел, как ребята реализовали идею витального компонента в страницу 404, я не мог налюбоваться на нее. Даже поставил на заставку макбука!
Антон
Менеджер проекта
Знакомьтесь — Виталий
Это корпоративный персонаж Vitalika по имени Виталий, живет на странице «O vitateka». Так мы и познакомились, получив его файл: Виталя.png
Благодарим Хлыстову Татьяну Константиновну, менеджера по рекламе и продвижению ПАО «Протек», за совместную работу над проектом.
Готовый проект
