(01)

О продукте

«Ласточка» — российская фабрика мебели с собственным производством, работающая на рынке более 7 лет. Партнёрская сеть более 1 000 клиентов. Компания работает по модели B2B: основная аудитория — розничные магазины и дистрибьюторы.

(02)

Задача

(03)

Подход

До начала проектирования провели продуктовое исследование, разобрали путь пользователя. Это помогло найти точки, где люди теряются или уходят. Фреймворк Jobs to be Done помог понять потребности пользователей.

(04)

Главная страница

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

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

(05)

Карточка товара

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

(06)

Каталог

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

(07)

Авторизация

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

(08)

Личный кабинет

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

(09)

Корзина

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

(10)

Рейтинг и отзывы

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

(12)

Адаптив

В дизайне заложено 4 брейкпоинта: 375px (mobile), 1024px (tablet), 1366px и 1920px (desktop) с опорой на сетку фреймворка Vuetify, что упростило передачу макетов в разработку и обеспечило консистентность отступов и колонок на всех устройствах. В мобильной версии навигация переработана, фильтры каталога убраны в бургер, а кнопка покупки зафиксирована внизу в таббаре.

(11)

Ui кит

Создали полноценный UI Kit с чёткими правилами по цветам, типографике, сетке, отступам и компонентам — все элементы проработаны со всеми состояниями (default, hover, active, disabled, loading, error). Подробно описали логику экранов и сценарии переходов — команда разработки видит, как работает каждый шаг без лишних вопросов к дизайнеру. На основе кита команда клиента может быстро собирать новые экраны, сохраняя консистентность.

(13)

Результат

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

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

Для разработчиков подготовлен полноценный UI Kit с компонентами, типографикой и цветовой системой, что делает внедрение предсказуемым и ускоряет работу команды.