Product strategy / UX / Web / SEO / B2B
VAYEL
Employee Experiences
Digital-платформа корпоративных подарков, в которой компания задаёт повод, бюджет и формат, а сотрудник сам выбирает впечатление. Проект объединяет продуктовую логику, фирменный набор, интерактивный сайт и понятный путь к B2B-заявке.
Открыть live-версию VAYEL ↗
Корпоративный подарок,
который не выбирают за человека.
Бизнес-контекст
Обычный корпоративный подарок одинаков для всех и часто не учитывает интересы сотрудника. VAYEL предлагает управляемую HR-программу: компания определяет рамки, а получатель выбирает личное впечатление из подготовленной коллекции.
Задача
За несколько минут объяснить новый продукт B2B-аудитории, показать физическую ценность набора, раскрыть механику ваучеров и привести HR-специалиста к понятному следующему шагу — обсуждению пилотного запуска.
Решение
Собрать сайт как последовательную продуктовую презентацию: от эмоционального первого экрана и интерактивных конвертов до параметров программы, конструктора набора, сценариев использования, FAQ и формы обращения.
01 / Signature interaction
Шесть конвертов.
Шесть личных сценариев.
Главная интерактивная сцена превращает механику продукта в понятный опыт. Во время прокрутки лёгкий фирменный конверт раскрывается, карточка поднимается из него, а рядом появляются категория, описание, город, формат участия и количество ваучеров.
Анимация работает не как декоративный эффект, а как демонстрация выбора. Плавный темп оставляет время рассмотреть фотографию и прочитать условия, а облегчённые линии конверта сохраняют визуальный воздух на desktop и mobile.
02 / Brand and packaging system
Digital и физический набор
говорят на одном языке.
Глубокий фиолетовый, светлая лаванда, тёплый оранжевый и голографические детали формируют узнаваемую систему VAYEL. Сайт показывает не отдельные красивые макеты, а полный объект: коробку, конверты, карточку впечатления, свечу, фактуру бумаги и момент распаковки.
03 / Project architecture
Один продукт.
Четыре связанных слоя.
Продуктовая стратегия
Сервис описан через роли компании, сотрудника и VAYEL. Пользователь быстро понимает, кто задаёт параметры, кто выбирает и кто отвечает за производство и сопровождение.
Контент-архитектура
Эмоциональные блоки чередуются с практическими: коллекция впечатлений, процесс запуска, параметры программы, варианты набора, пилот и ответы на вопросы.
UX и motion
Scroll-сценарии, горизонтальные коллекции, вкладки конструктора и адаптивные галереи раскрывают сложный продукт постепенно и сохраняют контроль пользователя.
Коммерческий маршрут
Каждый смысловой слой ведёт к следующему: сначала интерес, затем понимание продукта, доверие к исполнению и только после этого — форма B2B-заявки.
04 / A tangible brand experience
Сайт показывает
не обещание, а предмет.
Предметная съёмка помогает объяснить качество исполнения: фольга, фактура бумаги, ложемент, конверты разных категорий и дополнительный подарок. Благодаря этому B2B-клиент видит, как цифровая механика превращается в реальный брендированный набор.
Фотографии собраны в редакционном ритме — общий план сменяется крупной деталью и моментом взаимодействия. Такой подход одновременно усиливает премиальность и отвечает на практические вопросы о составе продукта.
05 / Employee journey
От первого взгляда
до личного впечатления.
История продолжается после вручения. Получатель открывает коробку, сравнивает конверты, выбирает карточку и превращает корпоративный подарок в собственный план — отдых, движение, творчество или новый опыт.
06 / SEO and technical delivery
Визуальный кейс,
который понятен поиску.
SEO заложено в структуру самой страницы: один точный H1, последовательная иерархия H2–H3, тематические формулировки без переспама, описательные alt-тексты и внутренние ссылки. Контент отвечает не только на вопрос «как выглядит сайт», но и объясняет продукт, аудиторию, решения и коммерческий результат.
On-page SEO
Уникальные title и description, canonical, Open Graph, Twitter Card, расширенное превью и индексируемый текст кейса о B2B web-дизайне и корпоративных подарках.
Структурированные данные
JSON-LD связывает Article, WebPage, автора и хлебные крошки. Это помогает поисковым системам и AI-сервисам точнее интерпретировать страницу и её авторство.
Изображения и скорость
Герой загружается приоритетно, остальные изображения — лениво. Размеры заданы явно, WebP используется для предметных кадров, а responsive-композиция снижает визуальные скачки.
Доступность и mobile
Семантические секции, понятные подписи ссылок, alt-тексты, управление с клавиатуры и поддержка reduced motion делают длинный визуальный сценарий устойчивым на разных устройствах.
Итог проекта
Что вошло
в финальную систему.
- 01Продуктовая и контентная архитектура B2B-предложения
- 02Двуязычный интерфейс EN / RU без перезагрузки страницы
- 03Интерактивная коллекция из шести фирменных конвертов
- 04Конструктор коробки, палитры, дизайна и состава набора
- 05Три экранных сценария бренд-галереи и фотобанк продукта
- 06Адаптив, базовая доступность, SEO-метаданные и публикационный пакет
Live project
Посмотреть VAYEL
в движении.
Полная версия показывает весь путь: от первого объяснения идеи до коллекции впечатлений, конструктора набора, пилотного запуска и обращения от корпоративного клиента.