Chlorofill Energy Booster
#исследования #cоздание структуры #дизайн #верстка на тильде
Разработка сайта первого в России питьевого хлорофилла высокого качества. Проект создан совместно с агентством 2Dots:
Посмотреть проект →
Посмотреть проект →
О проекте
Chlorofill Energy Booster - первый в России бренд, производящий чистый хлорофилл без вредных веществ в составе. Важная ценность бренда - создавать качественные продукты с заботой о себе и своих близких.
Ранее похожий продукт можно было купить только на iHerb. Теперь же рынок наводнили продукты с некачественным составом и нам было важно подчеркнуть качественность продукта.
Задача
Создать информационную страницу отражающую любовь и заботу о себе, энергию и движение и в первую очередь уверенность в качестве продукта. Страница должна быть понятной как для опытных пользователей, так и для тех кто только знакомится с продуктом.
Объем работ:
Объем работ:
- главная страница
- технические страницы
Исследования
В первую очередь мы собрали всех конкурентов и провели подробное исследование. Было обнаружено, что большинство конкурентов не имеют сайтов, а просто продают свою продукцию на маркетплейсах.
Компании, у которых сайт есть имеют ряд минусов: устаревший дизайн, плохая оптимизация, тяжелое повествование, спрятанный на дальнюю полку состав продукта.
Компании, у которых сайт есть имеют ряд минусов: устаревший дизайн, плохая оптимизация, тяжелое повествование, спрятанный на дальнюю полку состав продукта.
Особенным плюсом в работе стало то, что я много лет принимаю хлорофилл и самостоятельно знаю какие продукты есть на Российском рынке. Возможно, вы когда-то заказывали Хлорофилл на iHerb и сталкивались с огромной бутылкой с широким горлом, а также тем, что продукт может просто бесконтрольно вылиться вам на руки или стол. А после долго не отмываться от поверхности {а еще разок я чихнула и вылила его себе на руку, эффект был как от зелёнки ибо это тоже краситель}.
Исследование помогло нам выделить основные плюсы продукта:
- чистый натуральный состав
- отсутствие глицерина и полисорбатов
- высокая концентрация
- удобная упаковка
Структура
На основании исследований и полученных от клиента текстов мы создали структуру сайта, которая по полочкам разложит всю информацию о продукте: плюсы продукта, плюсы хлорофилла в целом, расскажет о бренде и вызовет доверие к производителю.
Мудборд
Не буду скрывать, что данный проект оказался одним из самых сложных в этом году. На основе созвона и полученных ассоциаций я сформировала образ сайта в натуральных природных тонах. Эти ассоциации должны были вызвать у пользователей ощущение натуральности и заботы о себе.
Но попасть с референсами в точку получилось лишь со второго раза. Результат мы закрепили в понятной и структурной презентации, которую вы можете посмотреть ниже.
Но попасть с референсами в точку получилось лишь со второго раза. Результат мы закрепили в понятной и структурной презентации, которую вы можете посмотреть ниже.
Дизайн-концепции
В рамках тарифа нужно было создать два разных варианта на выбор. В процессе я разрывалась между стерильностью и созданием необычного дизайна. Обойтись без кучи вариантов первого экрана не получилось, но благодаря этому я смогла нащупать итоговый вариант дизайна.
[clickable]
Получились два разных варианта: легкий и более собранный. Но оба макета одинаковы по ощущениям и визуальным образам. Композиция в обоих концепциях очень простая. В самом конце мы объединили две концепции, чтобы получить еще одну идею.
Стилизованная цепь ДНК с флакона как дополнительная отсылка к бренду.
Нарисованные персонально для этого проекта иконки с отсылкой к натуральности и связи с природой {очень чесались лапки найти уже готовые, но это обезличивало страницу}
Нам было важно совместить в шапке красивую фотографию, заголовок, описание продукта и ссылку для покупки. Поэтому вместо белой плашки сделали размытую с полупрозрачным контуром.
Меню осталось таким же легким, но логотип переместили в центр. Благодаря центральному выравниванию и крупному элементу по центру в таком положении он выглядит наиболее выигрышно.
Я сразу решила, что на сайте будут курсоры с листочком, отсылающие к логотипу и вносящие необычную нотку на сайт.
При обсуждении сайта с клиенткой обнаружили, что большая часть аудитории уже знает зачем нужно применять хлорофилл. Поэтому в этом варианте я пришла к слайдеру, который будет показывать всю информацию только при наведении.
В этом макете мы взяли всё самое лучше от предыдущих вариантов: баннер, блок с иконками. Можно заметить, как в макете появилась силовая линия от баннера к этому блоку.
Девушка с чистой и красивой кожей как демонстрация одного из эффектов от приема Хлорофилла.
Комфортный для чтения межстрочный интервал. Обычно, я люблю делать его чуть меньше. Но в данном случае это дополнительно передает легкость и связывает сайт с упаковкой продукта.
В этой задумке предполагалось, что фотография будет зафиксирована, а характеристики продукта справа будут перематываться.
[clickable]
Детали
Мы выбрали довольно строгий шрифт без засечек — Manrope.
Он отражает экспертность, контроль, энергию, силу.
С цветовой палитра сайта пришлось повозиться: в первом варианте присутствовал неоновый зеленый, от которого пришлось отказаться ибо мы с клиенткой увидели, что он довольно грубо смотрится в данном варианте дизайна.
С цветовой палитра сайта пришлось повозиться: в первом варианте присутствовал неоновый зеленый, от которого пришлось отказаться ибо мы с клиенткой увидели, что он довольно грубо смотрится в данном варианте дизайна.
Итоги
Заказчица выбрала второй вариант, который мы доработали и в конце добавили цвета с аккаунта бренда в запрещенной соцсети. Пришлось выбрать между несколькими вариантами цветовых акцентов.
[clickable]
Заменили фотографии на съемку, организованной брендом.
Акцентный зеленый заменили на фирменный стиль бренда в запрещенной социальной сети
Добавили в макет больше зеленого, чтобы ярче передать характер бренда.
Верстка
Сайт сверстан на тильде и для удобства клиента мы тщательно переделали стандартные блоки под наш дизайн {чтобы мама родная не узнала}.
- Переделали стандартный баннер
- Превратили блок с иконками в слайдер с приятной анимацией
- Переделали стандартный блок с отзывами
- Добавили аккордеон с информацией о продукте в зеро блок
Презентации
Помимо сайта мы создали презентации для рассылки оптовым покупателям. Работа производилась в сжатые сроки, но мы справились ибо хорошо знали стилистику продукта.
А еще мы оформили информацию в карточке продукта для ozon. Ее можно посмотреть по ссылке.
А еще мы оформили информацию в карточке продукта для ozon. Ее можно посмотреть по ссылке.
Награды
Проект попал в галерею лучших работ на тильде #madeontilda
Если зачитался и уже готов со мной работать — нажми на кнопку ниже.
