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