Содержание
- Клиент
- Задача
- Решение
- Взрыв-схема: показываем продукт по частям
- Коллекции бутылок: цвет под стиль жизни
- Каталог продукции
- Англоязычная версия для международного рынка
- Отзыв
- Результат
Клиент
Aquro — российский бренд премиальных бутылок для воды и термокружек с производством в Японии и Китае. Линейка состоит из трех минималистичных коллекций для городского стиля жизни.
Задача
Заказчик обратился к нам за разработкой монобрендового сайта с каталогом и переходом в магазины-партнеры. Клиент перебрал около десяти подрядчиков разного масштаба — от больших студий до отдельных специалистов. Остановился на Атвинте из-за внимательного подхода на пресейле и кейсов по имиджевым сайтам.
На старте у Aquro был утвержден брендбук и запускалось производство, а сайта еще не было. Бренд готовился к выходу на рынок и нуждался в собственной площадке для презентации концепции и продукта. Кроме России, заказчик нацеливался на СНГ и международные каналы, поэтому требовались русская и английская версии сайта. Компания также заключает контракты с маркетплейсами и сетями спортивных магазинов:
- OZON.
- Wildberries.
- Lamoda.
- Яндекс Маркет.
- КАНТ.
- Спортмастер.
Цель проекта: создать имиджевый сайт с каталогом, который представляет бренд Aquro и ведет покупателей в точки продаж.
Задачи:
- Знакомство с брендом. Представить философию и три коллекции, чтобы пользователь сразу выбрал продукт под себя.
- Премиум-качество в материалах и сборке. Раскрыть фирменные технологии продукта на главной странице сайта. Пользователь должен понимать, чем бутылка отличается от массовых аналогов.
- Пользовательский путь от карточки к покупке. Спроектировать навигацию через фильтры по коллекции, продукту и цвету.
- Заявки от В2В-клиентов. Дать оптовикам и партнерам канал для заявок на каталог с актуальными ценами.
- Русская и английская версии. Запустить сайт на двух языках для аудитории России, СНГ и зарубежных рынков.
Решение
Мы разработали имиджевый сайт с каталогом на Tilda для бренда Aquro. Заказчик пришел с готовой визуальной системой и идеями, как должен выглядеть продукт на сайте. Это сэкономило нашей команде время на этапе исследований, так как мы выстроили концепцию на основе брендбука.
Клиент прислал образцы бутылок, по которым наш 3D-дизайнер отрисовал точные модели трех типов линейки — материал, пропорции и эргономика на сайте соответствуют оригиналу.
Главная страница сайта
Что сделали:
- Спроектировали структуру сайта на Тильде. На главной странице разместили основные смысловые блоки с визуальными акцентами для удержания внимания.
- Собрали интерактивную взрыв-схему для каждой из трех моделей. На раскладке каждой модели видны материалы, фирменные технологии и эргономика. Так пользователь видит ценность продукта в одном блоке.
- Запустили каталог. Карточка товара показывает характеристики продукта, его материалы, инструкцию по уходу и ссылки на шесть точек продаж.
- Подключили аналитику и настроили базовое SEO. Это помогает сайту ранжироваться в поисковой выдаче, а клиенту — отслеживать поведение аудитории.
Взрыв-схема: показываем продукт по частям
Мы вынесли фирменные технологии в интерактивную взрыв-схему: пользователь выбирает модель, а продукт раскладывается на корпус, крышку и внутренние элементы. На каждой части добавлена интерактивная метка с описанием технологии:
- DualFlow — крышка с двумя способами питья. Например, на ходу удобнее пить через трубочку, не запрокидывая голову.
- ErgoFit и ErgoGrip — эргономичные формы корпуса для уверенного хвата одной рукой.
- PureTaste — обработка внутренней поверхности, которая сохраняет естественный вкус и не впитывает запахи.
- Eastman Tritan — ударопрочный материал корпуса ДУО-Т, идеальный для ежедневного использования.
Изначально мы задумывали раскладку на 3D-скролле — анимация запускалась бы во время прокрутки страницы. На тестах формат грузился слишком долго, поэтому мы заменили тяжелые 3D-сцены на видеоролики, а интерактив с подсветкой технологий собрали отдельным слоем поверх видео в Zero Block.
Катя Тимофеева
Заместитель дизайн-директора в Атвинте
Клиент пришел с ориентиром на западные флагманы — Bobber, Stanley и Owala. У них на сайтах продукт показан крупно, с акцентом на материалы и фирменные технологии. На российском рынке такого подхода нет — и нашей задачей было перенести этот подход на Aquro. Мы выбрали интерактивную взрыв-схему, которая показывает детали бутылок.
Для пользователя раскладка снимает вопрос стоимости, а для бренда — это способ объяснить ценность продукта еще до перехода в каталог.
Коллекции бутылок: цвет под стиль жизни
Aquro делит линейку на три коллекции, в каждую входят тритановая бутылка ДУО-Т, термобутылка ДУО-С и термокружка МОНО+. Модели различаются палитрой и эстетикой, привязанными к разным пользовательским сценариям.
Линейка из трех коллекций
- Element — серо-бежевая городская палитра для повседневной и деловой среды.
- Noma — пастельные оттенки, ориентированные на женскую аудиторию.
- Spark — контрастные и яркие цвета для поколения Z.
Катя Тимофеева
Заместитель дизайн-директора в Атвинте
На старте мы увидели три коллекции и подумали, что это три направления продукта. На самом деле линейка делится не по типу бутылки, а по цвету и вайбу. Один и тот же ДУО-Т в Element, Noma и Spark — это три разных образа. На этом мы и выстраивали логику подачи коллекций на сайте.
На главной странице коллекции собраны одним блоком, каждая представлена своей имиджевой композицией. Пользователь сначала видит три направления, а потом переходит в общий каталог для выбора продукта.
Блок «Коллекции» на главной странице
Каталог продукции
Клиент передал команде полный набор фотографий каждой бутылки: на белом фоне и на цветном. На изображениях продукт стоял в разных позициях — в сетке каталога это выглядело бы вразнобой. Мы вручную наращивали фон вокруг бутылок в Figma, чтобы их можно было выстроить в одной композиции. По умолчанию плитка показывает товар на нейтральном фоне, а при наведении курсора фотография меняется и демонстрирует стиль коллекции.
Каталог товаров
В каталоге есть фильтры для поиска по коллекциям, конкретному продукту и оттенку. Карточка товара показывает цветовую линейку, характеристики модели, состав материалов и информацию о пищевой безопасности. Описание продукта подсвечивает экологичность многоразовых бутылок и защиту от бактерий.
Пользователь может переключаться между оттенками одного товара и переходить в магазин партнера для покупки бутылки.
Карточка товара с характеристиками бутылки
Англоязычная версия для международного рынка
Мы запустили англоязычную версию сайта для международной аудитории. В Tilda каталог работает только на одном языке, поэтому мы развернули ее как самостоятельный проект со своими страницами и каталогом.
Англоязычная версия сайта
Отзыв
Дмитрий Преображенский
Основатель бренда Aquro
Прежде чем выбрать подрядчика, я перебрал много исполнителей. Все они красиво себя продают, но у Атвинты сильная сторона — персонифицированный подход. Команда выжимает из проекта максимум, я увидел реализацию лучше, чем закладывал в ТЗ.
Результат
Мы разработали имиджевый сайт для бренда Aquro, который презентует продукт и ведет покупателей в точки продаж.
- На главной странице товар показан в стиле каждой коллекции.
- Взрыв-схема раскрывает фирменные технологии и особенности.
- В каталоге можно узнать характеристики каждой бутылки.
- Сайт работает на двух языках, что открывает для компании путь и на российский, и на международный рынок.
Aquro получил собственный канал коммуникации с аудиторией, на котором может сам управлять подачей продукта.
