Интернет-магазин «Рукоделие»: дизайн под сложный выбор цвета

В магазине товаров для рукоделия покупка выглядит так: человек набирает шесть оттенков пряжи под одну схему. Если для этого нужно шесть раз открыть карточку, выбрать цвет в выпадающем списке и вернуться в каталог — половина корзины не соберётся. Мы перепроектировали интерфейс вокруг палитры.

Контекст проекта

«Рукоделие» — тематический интернет-магазин товаров для шитья, вязания и творчества: пряжа, нитки, фурнитура, наборы для вышивания. Аудитория здесь особая — она хорошо разбирается в товаре и покупает много, но придирчива к оттенкам и составу.

Решение о покупке часто принимается визуально: покупатель сверяет цвет с фотографией готовой работы или со схемой. Значит, интерфейс должен показывать товар в реальных цветах, а не прятать палитру за кликом.

Что мешало покупателю

• Цвет был спрятан. Оттенки открывались только внутри карточки и по одному.
• Нельзя было сравнить. Чтобы понять, подходит ли оттенок к предыдущему, приходилось запоминать его «на глаз».
• Корзина собиралась медленно. Каждая модификация добавлялась отдельным заходом.
• Непонятно с наличием. Покупатель узнавал о том, что нужного цвета нет, только на этапе оформления.

Как мы проектировали

Работа началась с исследования целевой аудитории, конкурентов и рынка товаров для творчества, затем — архитектура сайта и интерактивный прототип. Прототип дал возможность пройти путь покупателя целиком и увидеть, где он спотыкается, до того как появился визуальный дизайн.

Дизайн-система вместо набора страниц

Мы собрали компонентную дизайн-систему: элементы интерфейса описаны как повторяемые блоки, а не как отдельные картинки под каждую страницу. К системе прилагается набор кастомных иконок — для категорий рукоделия, статусов наличия, фильтров и действий в корзине.

Практический смысл: когда магазин добавляет новую категорию, страница собирается из готовых компонентов за часы, а не рисуется заново.

Карточка товара: вся палитра на одном экране

Главное изменение. Все цветовые вариации одного артикула показаны сразу — плиткой, с возможностью быстро переключить изображение и увидеть, как выглядит именно этот оттенок. Покупатель не листает выпадающий список: он видит всю линейку и выбирает глазами.

Рядом — быстрые действия: добавить несколько цветов в корзину одной операцией, отложить в «Избранное», сравнить с ранее выбранным.

Наличие без сюрпризов

Статусы видны прямо в выборе цвета. «В наличии», «недоступно к заказу», «под заказ» — каждая модификация подписана. Это снимает классическую боль интернет-магазинов рукоделия: покупатель собирает корзину из шести оттенков, а на оформлении выясняется, что двух нет.

Корзина и оформление

Внутри корзины работают промокоды, скидочные программы и расчёт доставки. Предусмотрена привязка банковских карт: для постоянных покупателей, которые заказывают пряжу регулярно, повторная покупка сокращается до пары кликов.

UGC-модуль: работы покупателей

Отдельный блок проекта — галерея готовых работ с голосованием, конкурсами и призами от магазина. Для товаров для творчества это работает лучше любой рекламы: покупатели приходят посмотреть, что связали другие из этой же пряжи, и заодно уходят с идеями и списком покупок.

Модуль спроектирован как самостоятельный: пользовательские работы, голосование, сезонные конкурсы и призовой фонд.

Адаптив и мобильные сценарии

Дизайн адаптирован под смартфоны и планшеты. Для магазина рукоделия мобильная версия особенно важна: часть покупок совершается «между делом» — в очереди, в перерыве между рядами, при виде понравившейся схемы.

Результат

Магазин получил интерфейс, который работает со сложным выбором: палитра видна целиком, наличие прозрачно, модификации добавляются списком. Дизайн-система позволяет развивать магазин без перерисовки каждого нового раздела, а UGC-модуль закладывает основу для пользовательского контента на будущее.

Что забрали в другие проекты

• Товар с вариациями нужно показывать вариациями. Выпадающий список цветов — потерянные продажи в любой категории, где выбор визуальный.
• Статус наличия — часть выбора, а не этап оформления. Показать его в момент выбора дешевле, чем разбираться с брошенной корзиной.
• Дизайн-система окупается на второй категории. Дальше магазин растёт без участия дизайнера.

Частые вопросы

Почему в интернет-магазине рукоделия нельзя использовать стандартную карточку товара?

Стандартная карточка рассчитана на один товар с редкими вариациями. В рукоделии вариаций десятки, и выбор визуальный: покупатель подбирает оттенки друг к другу. Такую задачу решает только интерфейс, где вся палитра видна одновременно.

Что даёт UGC-модуль магазину товаров для творчества?

Готовые работы покупателей работают как социальное доказательство и как источник вдохновения. Человек, пришедший посмотреть галерею, почти всегда уходит с идеей новой покупки — а конкурсы и голосование возвращают его на сайт повторно.

Нужна ли магазину дизайн-система?

Да, если ассортимент и категории растут. Дизайн-система превращает каждую новую страницу из проекта в сборку из готовых блоков — это экономит и деньги, и время на запуск новых разделов.

Проект сделан в рамках услуги «Дизайн сайтов». Если у вас каталог с вариациями — напишите нам, покажем, как это решается в вашей категории.