О проекте
Клиент: OURO — российский бренд премиальных биологически активных добавок (БАД), направленных на борьбу со старением и улучшение качества жизни.
Ниша: Премиум-сегмент рынка wellness и биохакинга.
Целевая аудитория: Успешные, образованные мужчины и женщины 30+, интересующиеся наукой, доказательной медициной, биохакингом и готовые инвестировать в свое долголетие и качество жизни.
Бренд позиционирует себя не как очередной магазин витаминов, а как научно-обоснованный проект на стыке передовых исследований и практического здоровья. Задача сайта — отразить эту философию и стать главным каналом продаж и формирования доверия.
Задача
Разработать визуально привлекательный, простой и понятный в использовании интернет-магазин, который:
- Транслирует ценности бренда: научная достоверность, премиальное качество, инновации, минимализм.
- Строит доверие за счет акцента на исследованиях, экспертизе и качественном контенте.
- Обеспечивает удобный процесс выбора и покупки сложного продукта (БАДы требуют объяснения).
- Интегрируется с личным кабинетом пользователя для оформления заказа, отслеживания статуса заказа и истории покупок.
- Соответствует высоким стандартам UI/UX-дизайна и технической SEO-оптимизации.
Использование фирменного стиля
Разработанный ранее фирменный стиль стал основой для всего визуального языка сайта:
- Цветовая палитра: Доминирующее сочетание белого фона и черного текста, акцентированное фирменным синим для передачи чистоты, лабораторности и доверия.
- Логотип: Ключевой графический элемент — стрелка, идущая против часовой стрелки (символ обращения времени вспять) — использован в фавиконке и как повторяющийся мотив в иконках и элементах управления.
- Типографика: Строгий гротеск (шрифт Inter), вдохновленный швейцарской типографикой, обеспечивает четкую иерархию, читаемость и современный вид.
- Фотографии: Стиль product-фото соответствует упаковке — минималистичный, лаконичный, с акцентом на продукт, без лишних деталей.
Структура сайта
Архитектура сайта продумана для линейного и понятного пользовательского пути:
- Главная страница: Многофункциональный лендинг, представляющий все ключевые преимущества, продукты, отзывы и научный подход.
- Каталог товаров: 4 страницы для каждого товара. Структура каждой страницы простая и сфокусированная на основных продуктах: CORE, BASE, MIND, SLEEP.
- Наука: Включает блог со статьями, объясняющими состав, принцип действия и научную базу продуктов.
- Оплата и доставка: Страница с детальной информацией о способах оплаты, стоимости и сроках доставки, возврате.
- Контакты: Раздел с телефоном, почтой и ссылками на соцсети.
- Личный кабинет: Отдельный раздел сайта, где каждый пользователь может зарегистрироваться для оформления товаров, отслеживания истории своих заказов и их статуса.
Мудборд и референсы
На этапе проектирования UX/UI команда ориентировалась на референсы в сегменте premium-health, фармацевтики и science-driven брендов:
- Эстетика "биотех": Чистые линии, обилие воздуха, акцент на типографике, как у современных медицинских стартапов из Кремниевой долины.
- Минимализм премиум-брендов: Лаконичность и сдержанность, присущая брендам класса люкс, где главное — продукт и его суть.
- Референсы: Элементы дизайна таких компаний, как HVMN (Nootrobox), Momentous, Thorne Research, а также цифровых изданий о науке (Nautilus, Quantamagazine).
Мудборд с подробными комментариями к каждому референсу
Прототип
Был разработан детальный прототип в Figma, который решал ключевые задачи:
- Логика повествования на главной: От крупного сообщения "Победа над старением неизбежна" через представление преимуществ к продуктам и доказательствам: разделы отзывы, наука.
- Процесс выбора продукта: Упрощение навигации по каталогу для пользователя, который может плохо разбираться в нутрицевтиках.
- Процесс оформления заказа: Минимизация числа шагов и полей для ввода, интеграция с онлайн-оплатой.
Дизайн-макет
Визуальная реализация полностью отражает выбранную концепцию "Лаборатории будущего":
- Чистые секции: Контент разделен просторными блоками с большими полями и интерлиньяжем.
- Акцентные иконографии: Для разделения преимуществ ("Научно обоснованный состав", "Премиальное качество" и т.д.) использованы минималистичные иконки в едином стиле.
- Работа с типографикой: Четкая иерархия заголовков (H1-H4), акцентирование ключевых преимуществ продукта жирным начертанием.
- Интерактивные элементы: Плавные hover-эффекты на кнопках и карточках товаров, подчеркивающие премиальность и качество проработки.
- Визуальные акценты: Для разделения секций использованы не цветные плашки, а тонкие разделители и игра с пространством.
Дизайн-макет главной страницы сайта
Верстка
Верстка выполнена с использованием кода HTML, CSS на платформе Tilda. Были реализованы ключевые особенности:
- Полная адаптивность: Сайт безупречно отображается на всех устройствах.
- Высокая скорость загрузки: Оптимизация изображений и кода для быстрой работы.
- Кастомные элементы: Сайт полностью реализован с помощью не стандартных Zero блоков.
- Блок "Преимущества": Стильная нумерация и анимация появления.
- Карусель отзывов: С фотографиями и должностями клиентов, что усиливает доверие.
- Уникальные карточки товаров: Это ключевая особенность. Карточки не являются стандартными шаблонными страницами. Для каждого продукта создана глубокая, структурированная страница с табами (вкладками), которая подробно раскрывает:
- Состав и дозировку каждого компонента.
- Научное обоснование и механизм действия.
- Способ применения.
- FAQ по конкретному продукту.
- Это решает главную проблему покупателя БАДов — нехватку информации и доверия к составу.
Страница товара «CORE»
Личный кабинет
Для проекта был настроен и кастомизирован личный кабинет на Tilda:
- История заказов: Пользователь видит статус текущих и историю прошлых заказов.
- Профиль пользователя: Возможность редактировать контактные данные и адреса доставки.
- Интеграция с CRM: Данные о пользователях и их заказах автоматически передаются в TILDA CRM-систему клиента для дальнейшего ведения и анализа.
Итоговые результаты
- Запущен работающий инструмент продаж: Сайт стал главной точкой входа для всей аудитории бренда OURO.
- Передача ценностей бренда: Визуал и структура сайта точно отражают премиальность, научность и инновационность продукта.
- Повышение доверия: Глубокие карточки товаров и раздел "Наука" значительно снижают барьер для совершения первой покупки сложного продукта.
- Технологическая основа для роста: Интеграция с TILDA CRM и системами аналитики позволяет клиенту масштабировать бизнес, отслеживать эффективность каналов и работать с клиентской базой.
- Единое brand-пространство: Сайт органично дополняет ранее разработанный фирменный стиль, создавая целостное и узнаваемое впечатление о бренде.
Сайт стал цифровым воплощением философии OURO — это не просто магазин, это научный ресурс о долголетии, который позволяет сделать осознанную покупку.
Хотите создать интернет-магазин для вашей компании? Напишите нам, и мы обсудим, как можно реализовать ваши идеи!
