Контекст
Огляд проєкту
Ми спроєктували й побудували повноцінну e-commerce платформу для квіткового ритейлу з фокусом на імпульсну покупку: від першого перегляду до підтвердженої доставки в мінімум кроків.
Продукт обслуговує унікальну механіку квіткового ринку — тимчасово-чутливі замовлення, вибір слота доставки та візуальний мерчандайзинг, що передає якість продукту через екран.
У обсяг проєкту увійшло:
- Повний каталог з фільтрацією за приводом, кольором і бюджетом
- Оформлення замовлення з вибором слота, адреси та персональним повідомленням
- Адаптивний мобільний UX — основний канал покупок
- Візуальна вітрина з акцентом на фотографії й емоції продукту
- Панель менеджера для управління складом, доставками й замовленнями
Квіткова торгівля — це емоція й терміновість. Платформа має підтримати їх обидві без тертя.
Поставка
Як ми поставляли
Чітка відповідальність, обсяг робіт, стек і структура команди — щоб це читалося як реальна поставка, а не концепт на слайдах.
Наша роль
Ми відповідали за комерційний досвід наскрізь: IA каталогу, UX вибору, checkout і responsive execution — конверсія в навігації, формах і performance, не лише в макетах.
Обсяг робіт
- Merchandising: категорії, картки, поля для рішення без шуму.
- Воронка: етапи, валідація під mobile, прозора ціна до оплати.
- Системи: adaptive layouts, touch targets, loading discipline.
- Арт-напрям: типографіка й відступи під фото продукту.
- Інструментування: контрольні точки воронки.
Технології
- Next.js / ReactStorefront routes і спільні токени.
- Commerce integrationsКошик, каталог, fulfillment hooks.
- PerformanceЗображення й стабільність layout для mobile checkout.
- Design systemКартки, фільтри, step UI.
- QA & analyticsМатриця пристроїв і сценарії покупки.
Участь команди
- Draxon: дизайн, UX, frontend, QA checkout.
- Клієнт: асортимент, бренд, операційні правила доставки.
- Рев’ю urgency-сценаріїв, не лише desktop happy path.
Обмеження
Операційна проблема
Квітковий ритейл онлайн має специфічні виклики: покупець обирає з почуттів і поспіхом, а платформа повинна тримати темп.
Проблеми виявлялися так:
- Складний каталог без чіткого шляху до вибору за приводом або настроєм
- Оформлення замовлення з надмірними кроками — висока відмова на checkout
- Управління слотами доставки вручну — помилки і перевантаження
- Фотографії не передавали цінність продукту — низька довіра
- Відсутність мобільного пріоритету при переважно мобільній аудиторії
Кожна зайва секунда на checkout — це замовлення, що пішло до конкурента. Платформа повинна скорочувати шлях, а не подовжувати.
Принципи
Стратегічний підхід
Ставка на конверсію в момент рішення: короткий шлях від ідеї до замовлення, управління доставкою без плутанини й вітрина, що продає першим екраном.
Ключові принципи:
- Мобільний UX як основний, а не адаптований канал
- Checkout без зайвих кроків — вибір дати і часу доставки в потоці
- Каталог, організований за приводом і настроєм, а не тільки за позицією
- Якісний візуальний контент як перший продаючий аргумент
- Операційна панель, що не потребує навчання
Хороша платформа продає квіти краще навіть за незмінний асортимент.
Каталог
E-commerce архітектура каталогу
Каталог побудований навколо рішення покупця, а не структури складу: фільтри за приводом, кольором і ціновим діапазоном ведуть до вибору швидко.
Ключові елементи:
- Фільтрація за приводом: день народження, весілля, вибачення, без приводу
- Атрибути: колір, розмір, тип квіток, доступність сьогодні
- Сторінка товару з великою фотографією, складом букету й очікуваним виглядом доставки
- Cross-sell суміжних позицій у картці товару
- SEO-структура під комерційні та локальні пошукові запити
Каталог — не склад онлайн, а вітрина з логікою продавця-консультанта.
Замовлення
Оформлення замовлення та доставка
Checkout розрахований на мінімум тертя при максимумі необхідних даних: вибір слота, адреса, повідомлення — в одному потоці без відволікань.
Ключові елементи:
- Вибір дати й часового слота доставки прямо у потоці замовлення
- Адресна форма з підказкою й геолокацією
- Персональне повідомлення одержувачу з попереднім переглядом
- Множина варіантів оплати без зовнішніх редиректів
- Миттєве підтвердження з деталями доставки та посиланням на відстеження
Кожен крок checkout повинен відчуватися як необхідний — і жоден як зайвий.
Мобільний UX
Мобільна адаптивність
Понад половина трафіку приходить з мобільних — платформа спроєктована під поведінку покупки з телефону, а не адаптована з десктопу.
Підходи:
- Мобільна навігація: великі зони натискання, зручні thumb-friendly потоки
- Прискорений перегляд каталогу — горизонтальні лістинги й швидкі картки
- Оптимізовані зображення: WebP, адаптивні розміри, ліниве завантаження
- Нативна форма оплати з підтримкою Apple Pay і Google Pay
- Прискорений checkout без примусової реєстрації
Якщо досвід на телефоні вимагає зусиль — частина замовлень зникає мовчки.
Вітрина
Візуальний мерчандайзинг
Перший екран продає продукт до того, як покупець прочитає назву: велика фотографія, чиста ієрархія й емоційний акцент — основа архітектури вітрини.
Акценти дизайну:
- Hero-фотографії максимальної якості без деградації у зоні LCP
- Кольоровий гайд і сезонна редакція на головній сторінці
- Тематичні колекції за приводами й актуальними трендами
- Лаконічна типографіка, що не заглушує зображення
- Доступний контраст і читабельність на всіх фонах
Хороший флористичний UX виглядає невидимим — покупець бачить квіти, не платформу.
Результат
Що дає платформа
Клієнт отримує магазин, що продає сам: каталог веде вибір, checkout не зупиняє потік, мобіль — основний канал.
У кращий день покупець:
- Знаходить букет за приводом за 30 секунд
- Оформлює замовлення з доставкою без реєстрації
- Отримує підтвердження і трекінг миттєво
- Повертається для наступного приводу без підказок
- Рекомендує магазин — бо це просто й красиво
Платформа стає конкурентною перевагою — не просто онлайн-вітриною.
Вплив
Результати
Після запуску платформа показала відчутне покращення ключових операційних і комерційних показників:
- Зростання конверсії checkout завдяки спрощеному потоку замовлення
- Зниження відсотка відмов на мобільних пристроях
- Скорочення часу обробки замовлень в операційній панелі
- Покращений SEO-трафік за комерційними ключовими запитами
- Зростання частки мобільних замовлень до очікуваного ринкового рівня
Питання
