Ojo team / команда Око
Neotravisil - растительные пастилки при кашле и боли в горле
Ojo team / команда Око
#Разработка сайтов под ключ

Neotravisil - растительные пастилки при кашле и боли в горле

16 
Ojo team / команда Око Россия, Москва
Поделиться: 0 0 0
Бюджет

600 000

Сфера

Медицина и ветеринария

Тип сайта

Промо-сайт

Сдано

Декабрь 2018

Задача

Sun Pharmaceutical выводила на российский рынок «Неотрависил» — растительные пастилки при кашле и боли в горле. Проект делали как подрядчик агентства Digital Odin.

Бренд-стратеги поставили три задачи:

1. Показать, что «Неотрависил», будучи биологически активной добавкой, реально решает проблему кашля и боли в горле.

2. Визуально доказать, что продукт на 100% натуральный.

3. Привести человека кратчайшим путём в ближайшую аптеку, где пастилки есть в наличии.

Отдельное требование стратегии бренда — «быть доступным везде и всегда»: мобильная версия должна работать не хуже десктопной, без упрощения подачи.

Решение

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

Первый экран: горизонтальное движение раскрывает продукт, состав и карту аптек

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

Пять действий экстрактов: кольцо с подсветкой активного пункта

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

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

Экран поиска: карта аптек с фирменным указателем точек продаж

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

Мобильная версия: анимация десктопа сохранена, включая поведение при повороте экрана

Промо-частью проект не ограничился. Собрали внутренние страницы: раздел статей и блок вопросов и ответов. Под статьи сделали несколько дизайн-шаблонов, чтобы разные типы материалов не выглядели одинаково. Раздел работает и на SEO: тексты закрывают запросы по проблематике, с которой человек ищет средство.

Внутренние страницы: статья из контентного раздела и блок вопросов и ответов

Результат

Промо-сайт с полной продуктовой линейкой: интерактивная подача преимуществ, 360°-упаковка, пять иллюстрированных действий экстрактов, поиск аптек по всей России и контентный раздел под SEO.

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

https://neotravisil.ru/

Стек технологий

  • CSS CSS Язык программирования
  • JavaScript JavaScript Язык программирования
  • PHP PHP Язык программирования
  • MODX MODX CMS
  • Threejs Threejs Фреймворк/библиотека
  • React.js React.js Фреймворк/библиотека
  • Vue.js Vue.js Фреймворк/библиотека
  • Adobe Photoshop Adobe Photoshop Графический редактор
  • Adobe Illustrator Adobe Illustrator Графический редактор
  • Blender Blender Графический редактор

Оцените кейс
Спасибо за оценку
Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

Ojo team / команда Око с удовольствием обсудит вашу задачу

Оставить заявку