UI/UX Редизайн e-Commerce доставки квітів
Desktop: https://www.figma.com/proto/kuTyEjhW4OLy3ppn3YDA88/%D0%A4%D0%BB%D0%BE%D1%80%D0%B8%D1%81%D1%82%D0%BA%D0%B0?page-id=141%3A4211&node-id=141-4212&viewport=555%2C176%2C0.02&t=cneO0k85zoZx1ASz-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=141%3A4212&show-proto-sidebar=1
Mobile: https://www.figma.com/proto/kuTyEjhW4OLy3ppn3YDA88/%D0%A4%D0%BB%D0%BE%D1%80%D0%B8%D1%81%D1%82%D0%BA%D0%B0?page-id=386%3A13719&node-id=391-28179&viewport=2165%2C660%2C0.27&t=tuaq7OC90I0749pT-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=391%3A28179&show-proto-sidebar=1
Про проєкт та головна мета:
Цей проєкт – це комплексне переосмислення інтернет-магазину флористики. Головною метою було тотальне осучаснення візуального дизайну (перехід до естетичного, мінімалістичного та преміального вигляду), а також вирішення критичних UX-проблем платформи. Застарілий та перевантажений інтерфейс відвертав увагу від продукту, тому я зосередилася на створенні чистого простору, де головним акцентом виступає краса самих букетів. Крім того, стояло завдання оптимізувати воронку продажів: зробити шлях користувача від пошуку до оплати максимально безшовним та збільшити середній чек за допомогою інтегрованих маркетингових інструментів.
Ключові рішення та реалізований функціонал:
• Розробка масштабованої Дизайн-системи: З нуля побудована повноцінна бібліотека UI-компонентів за методологією Atomic Design. Використання сучасних можливостей Figma (Variables, Auto Layout, Variants) забезпечило ідеальну візуальну консистентність усіх екранів та підготувало надійну базу для швидкої розробки і майбутнього масштабування сайту.
• Оптимізація та спрощення Чекауту: Найбільший біль користувачів – громіздку форму замовлення – було перетворено на логічний 3-кроковий акордеон (Ваші дані -> Доставка -> Оплата). Впроваджено смарт-перемикач "Для себе / Для іншої людини", який адаптує поля форми, суттєво зменшуючи когнітивне навантаження та знижуючи ризик покинутих кошиків.
• Стратегія збільшення середнього чека (Cross-sell & Upsell): Органічно та ненав'язливо вписані блоки додаткових послуг. Секції «Разом дешевше» та можливість швидко додати листівку чи цукерки реалізовані безпосередньо в картці товару та у виїжджаючому кошику (Drawer), що стимулює клієнта до спонтанних допродажів перед самою оплатою.
• Розумна навігація каталогом: Замість складних багаторівневих меню впроваджено систему швидких горизонтальних фільтрів («тегів»). Це дозволяє відвідувачам знаходити потрібні квіти за приводом, сортом чи статусом («Хіт продажів») всього в один клік.
• Адаптація Mobile-First: Оскільки купівля квітів – це часто швидка та емоційна дія, мобільна версія проєктувалася з найвищим пріоритетом. Інтерфейс отримав великі тач-зони для зручного керування пальцем, плавні слайдери та закріплене нижнє меню (Bottom Navigation Bar) для миттєвого доступу до кошика чи улюблених товарів.
Mobile: https://www.figma.com/proto/kuTyEjhW4OLy3ppn3YDA88/%D0%A4%D0%BB%D0%BE%D1%80%D0%B8%D1%81%D1%82%D0%BA%D0%B0?page-id=386%3A13719&node-id=391-28179&viewport=2165%2C660%2C0.27&t=tuaq7OC90I0749pT-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=391%3A28179&show-proto-sidebar=1
Про проєкт та головна мета:
Цей проєкт – це комплексне переосмислення інтернет-магазину флористики. Головною метою було тотальне осучаснення візуального дизайну (перехід до естетичного, мінімалістичного та преміального вигляду), а також вирішення критичних UX-проблем платформи. Застарілий та перевантажений інтерфейс відвертав увагу від продукту, тому я зосередилася на створенні чистого простору, де головним акцентом виступає краса самих букетів. Крім того, стояло завдання оптимізувати воронку продажів: зробити шлях користувача від пошуку до оплати максимально безшовним та збільшити середній чек за допомогою інтегрованих маркетингових інструментів.
Ключові рішення та реалізований функціонал:
• Розробка масштабованої Дизайн-системи: З нуля побудована повноцінна бібліотека UI-компонентів за методологією Atomic Design. Використання сучасних можливостей Figma (Variables, Auto Layout, Variants) забезпечило ідеальну візуальну консистентність усіх екранів та підготувало надійну базу для швидкої розробки і майбутнього масштабування сайту.
• Оптимізація та спрощення Чекауту: Найбільший біль користувачів – громіздку форму замовлення – було перетворено на логічний 3-кроковий акордеон (Ваші дані -> Доставка -> Оплата). Впроваджено смарт-перемикач "Для себе / Для іншої людини", який адаптує поля форми, суттєво зменшуючи когнітивне навантаження та знижуючи ризик покинутих кошиків.
• Стратегія збільшення середнього чека (Cross-sell & Upsell): Органічно та ненав'язливо вписані блоки додаткових послуг. Секції «Разом дешевше» та можливість швидко додати листівку чи цукерки реалізовані безпосередньо в картці товару та у виїжджаючому кошику (Drawer), що стимулює клієнта до спонтанних допродажів перед самою оплатою.
• Розумна навігація каталогом: Замість складних багаторівневих меню впроваджено систему швидких горизонтальних фільтрів («тегів»). Це дозволяє відвідувачам знаходити потрібні квіти за приводом, сортом чи статусом («Хіт продажів») всього в один клік.
• Адаптація Mobile-First: Оскільки купівля квітів – це часто швидка та емоційна дія, мобільна версія проєктувалася з найвищим пріоритетом. Інтерфейс отримав великі тач-зони для зручного керування пальцем, плавні слайдери та закріплене нижнє меню (Bottom Navigation Bar) для миттєвого доступу до кошика чи улюблених товарів.