Конструктор букета с круговой витриной
Роль: Product Designer (UX/UI, концепция, прототипирование)
Формат: Концепт / pet-проект
Платформа: Web
Контекст
Покупка цветов в интернет-магазинах чаще всего сводится к выбору готового букета. Пользователь не участвует в создании композиции и не понимает, как она собрана.
Это снижает:
• вовлечённость в каталог
• эмоциональную ценность покупки
• время взаимодействия с продуктом
Проблема
Пользователь не чувствует, что он создаёт что-то уникальное.
Выбор букета превращается в быстрый просмотр карточек и уход с сайта.
Гипотеза
Если дать пользователю инструмент для самостоятельного подбора цветов с визуальным пониманием их сочетаемости,
то:
• увеличится время на сайте
• повысится вовлечённость
• вырастет вероятность покупки
Решение
Я спроектировал интерактивный раздел “Собери букет сам” с круговой витриной товаров.
Ключевая идея — представить цветы в виде композиции, а не списка.
Концепция интерфейса
Круговая витрина:
карточки цветов расположены по кругу
• элементы расположены без отступов
• пользователь видит, как цветы сочетаются друг с другом
Это создаёт ощущение готовой композиции ещё до покупки.
Пользовательский сценарий
Исследование → Выбор → Составление → Покупка
1. Пользователь заходит в раздел “Собери букет”
2. Видит круговую витрину
3. Выбирает понравившийся цветок
4. Открывается карточка товара (поверх интерфейса)
5. Получает рекомендации сочетаний
6. Переходит к другим цветам через рекомендации
7. Добавляет цветы в букет
8. Переходит к оформлению заказа
UX-решения
Почему круговая структура
• визуально напоминает композицию букета
• упрощает сравнение соседних элементов
Почему без отступов
• создаётся цельное визуальное поле
• усиливается ощущение “собранного букета”
Почему карточка открывается поверх
• пользователь не теряет контекст
• не нужно возвращаться назад
• не перекрывает фото цветов
Почему рекомендации внутри карточки
• создают цепочку взаимодействий
• увеличивают глубину просмотра
• помогают пользователю принимать решения
Продуктовые метрики
Решение направлено на улучшение следующих показателей:
• Время на странице
• Глубина просмотра
• Добавления в корзину
• Конверсия в покупку
• Вовлечённость пользователя
• Добавленная, эмоциональная, стоимость готового букета
Возможности развития
• фильтрация (по цвету, сезону, цене)
• предпросмотр итоговой композиции благодаря базе фото или AI-генерация
• сохранение букетов
• персонализированные рекомендации
• AI-подбор сочетаний
Вывод
Я спроектировал альтернативный способ взаимодействия с каталогом цветов, который:
• превращает выбор в творчество
• усиливает эмоциональную ценность покупки
• даёт пользователю ощущение контроля над результатом
Следующий этап - генерация цветов для карточек и сборка уже более живого макета.
После нажатия на одно из изображений, все остальные блюрятся, акцентируя внимание на выбранном цветке и появляется всплывающая карточка товара с описанием, CTA кнопкой и рекомендациями.
Ниже представлена мобильная версия и фолд.
Выводы по концепту:
1.
• «Я добавил 5 роз и 2 эвкалипта, но совершенно не представляю, как они будут смотреться вместе. Нет 3D-превью или референса собранного букета».
• «Я не флорист. Я выбрал тюльпаны и лилии, но не понимаю, сочетаются ли они. Мне не хватает подсказок по цветовой гамме и структуре».
• «Как я пойму, что букет готов? Нет никакого индикатора "минимальный объем" или предупреждения, что 3 цветка — это слишком мало для подарка».
• «Слишком много кликов. Если я хочу 15 роз для большого букета, мне нужно 15 раз подряд нажимать на плюс. Где поле для ввода числа?»
• «Непонятно, как выглядит один цветок. Я не понимаю его реальный размер, пышность и длину стебля».
2.
• «Я добавил цветок, и он ушел в список "Состав", но список свернут. Мне пришлось искать, где посмотреть, что я уже набрал».
• «Я не могу сохранить свой состав как "Черновик" или "Мой рецепт", чтобы вернуться к нему позже и показать подруге».
• «Удалить цветок из состава сложно».
• «Цена за цветок указана, но непонятно, входит ли в нее упаковка и работа флориста, или это только за стебель. Я боюсь сюрпризов на оплате».
• «Список цветов — это просто стена. Нет группировки: "Основные (фокусные)", "Дополнительные (заполнители)", "Зелень". Я потерялся в ассортименте».
3.
• «Я хочу добавить упаковку или ленту, но не могу найти эту опцию в самом конструкторе ».
• "Минималистичный дизайн выглядит приятно, ничего лишнего не отвлекает."
• "Идея собирать букет самому классная, чувствуешь себя флористом."
• "Сначала не совсем понятно как пользоваться". «Я нажимал на карточку цветка, чтобы добавить, но ничего не происходило. Только потом заметил маленький плюсик. Это неочевидно.»
• «Карточки цветов все одного размера, но пионы и розы визуально очень похожи в мелком превью. Путаешь.»
• «Не хватило быстрой возможности сохранить букет или вернуться к черновику, если ушёл с экрана.»
Лучше проработать формирование букета.
Продумать изменение количества цветов одного вида в букете.
Продумать работу с дополнительными цветами и украшениями букета (зелень, маленькие кустики итд.)
