KABAN — редизайн интернет-магазина электроники с понятным путём от каталога до заказа
Услуги: UX/UI-дизайн, редизайн интернет-магазина, frontend-разработка, адаптация под мобильные устройства
В одном магазине собраны электроника, мобильные и компьютерные аксессуары, автомобильные товары, мелкая бытовая техника, продукция для дома и хобби.
Покупателю нужно быстро перейти от широкого товарного направления к конкретной подкатегории, не просматривая десятки несвязанных позиций.
Цена, наличие, фотографии, доставка, оплата, гарантия и отзывы должны были формировать последовательный сценарий выбора на одной странице.
На смартфоне нужно было сохранить доступ к каталогу, корзине, избранному и основным действиям, не сжимая десктопный интерфейс до узкого экрана.
Акционные предложения, популярные категории, хиты продаж, новинки, преимущества и полезные материалы получили отдельные блоки с чёткой последовательностью.
Верхнее меню открывает основные товарные направления и подкатегории, поэтому покупатель переходит к нужной группе без долгого поиска в общем каталоге.
Карточки показывают фотографию, код, название, статус наличия, цену, избранное и кнопку корзины в одинаковом порядке для разных категорий.
К основной информации добавили условия доставки и оплаты, гарантию, форму отзыва, FAQ, рекомендованные и похожие позиции.
Состав заказа, контактные данные, выбор города, отделение Новой почты и способ оплаты доступны без перехода между несколькими этапами.
Фиксированное нижнее меню, горизонтальные подборки и вертикальная компоновка блоков сохраняют полный сценарий покупки на мобильном устройстве.
Большой баннер формирует главный акцент первого экрана
- Большой баннер формирует главный акцент первого экрана
- Тёмно-синяя основа отделяет навигацию от контента
- Оранжевые элементы обозначают основные действия
- Подборки товаров имеют одинаковый ритм и формат карточек
Разные типы контента отличаются масштабом, фоном и формой подачи. Промобаннеры привлекают внимание крупным изображением, категории работают как компактные визуальные переходы, а товарные подборки размещены на спокойном светлом фоне. Благодаря этому пользователь сразу понимает, где реклама, где навигация, а где конкретные товары.
Компоненты, которые сохраняют единый ритм в разных разделах
- Карточки построены по одинаковой модульной сетке
- Цены и статусы занимают постоянные позиции
- Кнопки имеют общую форму и логику акцентов
- Отступы отделяют самостоятельные группы контента
Одинаковое строение повторяющихся элементов связывает главную страницу, каталог и товарные подборки в целостный интерфейс. Покупателю не нужно каждый раз заново искать название, цену, статус наличия или действие с товаром.
Информация, которую можно быстро считать со страницы
- Заголовки чётко отделены от служебных данных
- Названия товаров не конкурируют с ценами
- Иконки поясняют действие без длинных подписей
- Акционные элементы заметны, но не перекрывают товар
Товарная выдача, которую удобно просматривать ряд за рядом
-
Название категории и количество позиций собраны в одной зоне
Покупатель сразу понимает объём подборки перед просмотром товаров.
-
Сортировка расположена над товарной сеткой
Порядок позиций можно изменить без перехода на отдельную страницу.
-
Фотографии товаров имеют одинаковую визуальную площадь
Разные по форме модели легче сравнивать в пределах одного ряда.
-
Цены и кнопки покупки выровнены в карточках
Взгляд движется по сетке без постоянного поиска коммерческой информации.
Галерея, которая позволяет рассмотреть товар до чтения характеристик
- Основное фото занимает наибольшую часть галереи Форма, конструкция и отдельные детали товара остаются главным объектом внимания.
- Миниатюры формируют последовательность просмотра Пользователь переходит между ракурсами без прокручивания всей страницы.
- Светлый фон не искажает вид продукции Товары разных цветов и материалов сохраняют выразительный контур.
- Свободное пространство отделяет изображение от интерфейса Кнопки, цены и служебная информация не перекрывают фотографии.
Галерея работает как самостоятельный инструмент выбора: покупатель сначала оценивает вид товара с доступных ракурсов, а уже потом переходит к характеристикам и условиям покупки. Изображения остаются достаточно крупными даже для компактных гаджетов, кабелей и аксессуаров с мелкими конструктивными деталями.
Оформление заказа разделено на понятные этапы
-
Состав корзины показан перед формой покупателя
Пользователь проверяет товары, количество и итоговую стоимость до заполнения данных.
-
Контактные поля объединены в отдельный блок
Имя, телефон и другие данные не смешиваются с параметрами доставки и оплаты.
-
Доставка раскрывается последовательно
Сначала покупатель выбирает город, а затем доступное отделение Новой почты.
-
Способы оплаты поданы как равнозначные варианты
Каждый способ имеет отдельный переключатель и краткое пояснение без перегрузки формы.
Мобильная версия с отдельной логикой компоновки
- Промобаннеры перестроены под вертикальный экран Изображение, заголовок и кнопка сохраняют выразительность без уменьшения до масштаба десктопной версии.
- Товарные подборки прокручиваются горизонтально Карточки остаются достаточно крупными, а страница не превращается в слишком длинную ленту.
- Информационные блоки складываются в один столбец Преимущества магазина и текстовый контент читаются последовательно без мелких параллельных колонок.
- Информационные блоки складываются в один столбец Каталог, корзина, избранное и другие ключевые разделы доступны без возврата к шапке.
Мобильный интерфейс использует другие пропорции, отступы и способы размещения контента. Широкие десктопные секции превращаются в вертикальные блоки или горизонтальные подборки, поэтому фотографии, надписи и элементы управления остаются удобными для просмотра и нажатия.
Структура охватывает аудио- и видеотехнику, товары для ремонта, бытовую технику, мобильные и компьютерные аксессуары, автотовары и другие группы ассортимента.
Отдельными карточками представлены кабели, сигнализации, GPS-навигаторы, вентиляторы, GPS-трекеры, садовый инвентарь и ирригаторы.
Главная страница отдельно показывает акционные предложения, хиты продаж и новинки.
В отдельном блоке собраны доставка по Украине, способы оплаты, проверка товаров и поддержка с консультацией.
После основной информации размещены блоки «Вам также может понравиться» и «Похожие товары».
Экран содержит состав корзины, контактные данные покупателя, параметры доставки и выбор способа оплаты.
// Как KABAN обновил дизайн и frontend большого интернет-магазина
До редизайна действующий интерфейс KABAN не был построен вокруг короткого маршрута от товарного направления к заказу. В большом разнородном каталоге нужно было упростить переход к подкатегориям, унифицировать подачу товаров и отдельно продумать мобильный сценарий. Kliox сохранила существующий бэкенд магазина, но полностью перестроила UX/UI и фронтенд вокруг этих задач.
Полный каталог охватывает десять тематических направлений — от аудио- и видеотехники до автотоваров, мелкой бытовой техники, аксессуаров, продукции для дома, ремонта и хобби. Чтобы разные группы не смешивались в одном длинном перечне, для них построили многоуровневую навигацию. На десктопе основные направления доступны в верхнем меню, а подкатегории открываются в широких выпадающих панелях.
Главная страница стала отдельным сценарием знакомства с ассортиментом. Семь популярных категорий получили крупные визуальные карточки, а товары распределили между тремя коммерческими подборками: акциями, хитами продаж и новинками. Дополнительный блок с четырьмя направлениями сервисной информации объясняет условия доставки, оплаты, проверки товаров и консультации ещё до перехода в корзину.
Товарные карточки унифицировали для разных категорий: фотография, код, название, наличие, цена, избранное и кнопка покупки остаются на предсказуемых позициях. На отдельной странице товара большое пространство отдали галерее, а коммерческие и сервисные данные отделили от подробного контента. После основной информации размещены две самостоятельные подборки — рекомендованные и похожие позиции, которые продолжают просмотр ассортимента.
Оформление заказа собрали на одном экране и разделили на четыре группы данных: состав корзины, контакты покупателя, параметры доставки и способ оплаты. Пользователь видит сумму заказа параллельно с заполнением формы и может изменить количество товаров без возврата к каталогу. Такая структура сокращает количество отдельных страниц в финальной части покупки.
Мобильный frontend получил собственную логику компоновки. Широкие промобаннеры перестраиваются под вертикальный формат, товарные и тематические подборки прокручиваются горизонтально, а пять основных разделов вынесены в фиксированное нижнее меню. В результате KABAN получил обновлённый интерфейс для десктопных и мобильных пользователей, не меняя существующий backend магазина.
// Решения для дальнейшего развития интернет-магазина электроники
Изображения сжимаются на 60–80% без потери качества, страницы загружаются мгновенно, Google ранжирует выше — и всё это без участия менеджера
Система отслеживает покупателей, которые добавили товары в корзину, но не оформили заказ, и автоматически отправляет серию персонализированных напоминаний через email, Viber или SMS
Умный поиск с исправлением ошибок, синонимами, морфологией и автоподсказками — покупатель находит нужный товар за 2–3 секунды вместо блуждания по каталогу
