Редизайн сайта для международной компании по продаже и производству товаров для кухни

Главное о кейсе

HÜS — крупнейшая международная компания, которая производит и продаёт премиальные товары для кухни и сервировки стола.

Главная особенность HÜS — фокус на премиальности, качестве материалов и технологических инновациях. У бренда собственные запатентованные материалы и технологии производства. Им важно, чтобы всё выглядело не просто качественно, а дорого, стильно и современно.

HÜS работает как с B2B: рестораны, кафе, гостиницы, дистрибьюторы; так и с частными клиентами, у которых есть деньги и желание покупать дорогую, статусную посуду для дома.

Задача и цели:

— Создать дизайн нового сайта, который сразу даёт понять: ты попал к крупному, современному, европейскому бренду, где всё проработано до мелочей и ты получишь действительно качественный продукт и сервис.

— Передать премиальность бренда через визуальный стиль и структуру сайта, сделать акцент на качестве продукции, эстетике, технологичности и удобстве для разных типов покупателей.

Текущий сайт выглядел устаревшим, плохо передавал ощущение дорогого продукта, запутывал пользователя и в целом не вызывал желания покупать.

Покупателям было неудобно искать товары, сложно разбираться в ассортименте, не было акцента на уникальные технологии и материалы. Бренд сильно терял на фоне конкурентов по восприятию бренда и по продажам.

Мы полностью обновили дизайн сайта, чтобы он соответствовал уровню бренда и современным требованиям пользователей.

Результаты:

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

Важная информация о товарах подана ясно, покупка не требует лишних шагов. Пользователь на уровне первого визуального контакта воспринимает бренд современным, премиальным и технологичным — это повышает доверие и лояльность.

Как проект изменил жизнь пользователей

Теперь, когда человек заходит на сайт HÜS, он сразу видит чистый и современный интерфейс с качественными фотографиями товаров и аккуратной вёрсткой. Сайт выглядит так, как ожидаешь от премиального бренда посуды и аксессуаров: ничего не отвлекает, детали товаров хорошо заметны, всё ощущается дорого и стильно. Покупатель больше не сомневается в уровне бренда.

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

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

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

Бизнес-задача и ее решение

1. Разработать визуальное оформление сайта, которое будет формировать восприятие премиального бренда у пользователей.

а) С помощью мудбордов определили визуальное направление для сайта и зафиксировали, какими должны быть стиль и подача.

В этом проекте собрали три мудборда, чтобы выбрать точное направление:

— Минимал. Здесь главный упор на визуальные материалы: минимализм, много воздуха, лаконичные композиции, чтобы ничто не отвлекало от самой посуды и кухни. Такой подход подчёркивает чистоту и современность, а также подходит для оборудования, которое покупают для своей кухни.

— Индастриал. В центре — качество продукции, материалы, фактура металла. Работаем с такими материалами, как сталь, серебро, золото, белое золото. Здесь всё строится вокруг ощущения технологичности и прочности: крупные планы материалов, акценты на детали, строгие цветовые сочетания.

— Технологический люкс. Здесь делаем ставку на технологичность как на отдельный триггер для покупателя. В современном премиум-сегменте это важно: технологии становятся признаком статуса. Такой стиль — сдержанный, с упором на продвинутые решения, качественные материалы и умные устройства.

Основным направлением выбрали «Индастриал», но в работе частично использовали элементы и приёмы из всех трёх мудбордов.

б) В основу дизайн-концепции заложили качественный фото- и видеоконтент и акцент на материалах товаров.
Главная идея — показать премиальность и технологичность продукта за счёт больших, чистых фотографий и минималистичной верстки. Мы построили композиции вокруг фотостиля, убрали всё лишнее, чтобы внимание пользователя сразу цеплялось за детали изделий и фактуру металлов.

​​Крупные, чистые фотографии и внимание к деталям сразу формируют ощущение дорогого, современного продукта, а материалы и их фактура продают качество лучше любых описаний.

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

В проекте использовали Rotis Sans — строгий, лаконичный шрифт, который не перетягивает внимание на себя. Заголовки крупные, основной текст компактный. Это усиливает минимализм, помогает держать фокус на фотоконтенте и поддерживает общую чистоту интерфейса.

2. Сделать сайт удобным для покупателей — упростить выбор продукции и оформление заказа.

а) На этапе работы со структурой определили, из каких страниц и блоков будет состоять сайт и как пользователь будет по ним перемещаться.

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

б) Разработали прототипы всех разделов, чтобы показать клиенту, как и какой контент будет располагаться на каждой странице.

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

в) Каталог очистили от акций, лишних иконок и отвлекающих элементов — сфокусировали всё внимание на ассортимент и материалы.

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

г) Карточки товаров построили вокруг фото и ключевой информации.

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

д) Корзину сделали без навязчивых попапов и рекламных блоков.

Если корзина пуста, показываем только подборку популярных товаров — никаких агрессивных предложений и лишних уведомлений.

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

Ненавязчивый апсейл встроен прямо в корзину — аккуратно предлагаются сопутствующие товары, которые реально могут пригодиться, но это никак не мешает оформлению заказа.

В результате оформление заказа занимает меньше времени, а корзина стала частью нормального сервиса, где всё сделано для удобства пользователя, без попыток «дожать» к покупке или увести по ненужным шагам.

3. Дать клиенту инструмент для самостоятельной поддержки и развития сайта.

Клиенту было важно не только получить новый сайт, но и иметь возможность дальше развивать его самостоятельно. Для разработчиков клиента мы собрали отдельный UI-кит: все кнопки, блоки, состояния и цвета оформлены как отдельные компоненты, их легко использовать при сборке новых страниц. Отдельно провели встречу с командой клиента: объяснили логику верстки, как работает адаптив, на что обращать внимание при реализации разных блоков.

После передачи всех файлов команда клиента могла самостоятельно использовать макеты и UI-кит для дальнейшей разработки и поддержки сайта.

Крафт (мастерство), реализация, технические детали

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

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

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

Все типы анимаций, которые использовали на проекте:

— ховер-эффекты (смена состояния при наведении);
— stick-анимация (фиксированные элементы, которые меняются при скролле);
— gif-анимация (для имитации движения материалов или деталей);
— smart-анимация (автоматические переходы и плавные изменения между экранами);
— transition-анимация (зуминг, масштабирование объектов);
— скейлинг (изменение пропорций и размеров при взаимодействии).

Для наглядности и согласования с клиентом мы сделали анимированные прототипы — не просто варфреймы, а анимированные макеты с конечным дизайном. Так клиент смог увидеть, как будет вести себя каждый элемент на реальном сайте. Анимированные прототипы собирали параллельно с финальным дизайном.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

В премиальном сегменте люди не склонны откладывать покупки и добавлять товары в «Избранное» или долго сравнивать позиции по цене и характеристикам. Они хотят сразу видеть главное и принимать решение на уровне ощущений. Поэтому убрали раздел «Избранное» и сделали ставку на впечатление от первого контакта с помощью акцента на фотоконтенте.

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

Текущая доступность работы

Заказчик ещё не успел внедрить разработанный дизайн, кейс оформлен только для Tagline Awards.

Скриншоты