Как мы адаптировали новый брендинг Scarlett для сайта

UX/UI, Ритейл, Концепты
UX/UI Ритейл Концепты
Как мы адаптировали новый брендинг Scarlett для сайта

Заказчик

Scarlett — один из самых популярных брендов на рынке малой бытовой техники.

Задача – редизайн сайта Scarlett

Бренд обновил айдентику, и перед командой KOTELOV встала задача адаптировать новые визуальные приемы для сайта, сделать интерфейс удобнее и современнее.

Главный экран: встреча с брендом

Первый экран встречает пользователя приветственной анимацией. Мы интегрировали слоган «Забота начинается с меня» — ключевой смысл бренда считывается пользователем еще до появления главного экрана. На фирменном тиффани-цвете появляется клейм-роза, после чего сайт открывается из рамы в форме цветка.

Главный экран сайта с логотипом и слоганом Scarlett

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

Главный экран сайта Scarlett после редизайна

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

Каталог товаров: живая витрина

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

Редизайн сайта Scarlett: как было до

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

Каталог на сайте Scarlett после редизайна

Карточка товара: детализация и доступность

Карточки товаров стали современными и удобными, с акцентом на продукт. Переработан блок с ценой и ключевыми преимуществами: он стал проще для восприятия и структурированнее.

Вся информация о продукте — характеристики, описание и отзывы — открывается по кнопке «Все характеристики» на первом экране с помощью авто-скролла. Это помогает сохранить структуру страницы понятной.

Карточка товара после редизайна сайта Scarlett

О бренде: эмоциональная связь

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

Блог о бренде Scarlett после редизайна

Контентные блоки для вовлечения

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

Контентный раздел на сайте Scarlett в дизайн-концепте

Футер – атмосфера бренда в деталях

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

Футер с призывом к действию после редизайна сайта Scarlett

Результат

Сайт стал легче визуально, а навигация по каталогу – проще и быстрее. Новый дизайн поддерживает обновленный бренд и делает акцент на продукте, не перегружая интерфейс. Айдентика Scarlett отражается во всех блоках, создавая единство и передавая главные смыслы.

Мы в KOTELOV создаем удобные и эстетичные интерфейсы, которые помогают компаниям расти. Проведем UX/UI аудит и подготовим бесплатный концепт – оставляйте заявку по ссылке.

Figma
Александра Косолапова
UX/UI Designer
Обсудить проект