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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат

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

Показатели: до и после

Метрики из проекта — «до» и «после», с источником замера. Данные те же, что в кейсе ниже.

Что не сработало

• Стандартная карточка товара не подошла. Десятки вариаций и визуальный подбор оттенков — интерфейс пришлось проектировать с нуля, а не настраивать готовый шаблон.
• Наличие раскрывалось слишком поздно. Покупатель собирал корзину из шести оттенков и только на оформлении узнавал, что двух нет.
• Корзина собиралась по одной модификации. Каждый цвет добавлялся отдельным заходом — это теряло продажи.

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

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

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

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

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

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

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

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

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

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