Mokulima: маркетплейс handmade товаров с гавайской атмосферой

1. Вводная задача от заказчика, проблематика, цели

Клиент пришел с запросом создать эстетичный дизайн для маркетплейса handmade товаров, созданных гавайскими мастерами. В качестве референса клиент выбрал сайт Etsy.

Цели

Создать обновленный дизайн сайта, чтобы улучшить пользовательский опыт, устранить барьеры на пути к конверсиям, повысить ключевые показатели эффективности отдельных этапов Customer Journey. Особый упор сделать на мобильную версию сайта, юзабилити и функциональные возможности.

Основные задачи

• Разработать дизайн с учетом требований UX и UI
• Разработать адаптивный дизайн, ориентированный на мобильные устройства
• Создать инструменты для улучшения пользовательского опыта

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Что мы сделали

Брифование клиента

Это позволило нам максимально конкретизировать цели и задачи проекта. Мы также опирались на собственный опыт разработки дизайна сайтов ювелирных украшений. В качестве референса клиент выбрал маркетплейс Etsy. Нашей задачей было создать аналогичный по стилю маркетплейс, локализованный для Гавайев, который передавал бы курортную атмосферу и местный колорит. В работе мы сделали упор на анализ потребительского пути (Customer Journey), юзабилити, тщательную проработку мобильной версии и сильный визуальный дизайн.

Карточка товара

За основу мы взяли примерный макет страницы товара, предоставленный клиентом. Кроме того, мы сохранили цвета и стиль старого дизайна, поскольку они соответствовали тематике маркетплейса handmade-товаров. Сделали акцент на детализации и истории продукта:

• Галерея с возможностью просмотра в полноэкранном режиме;
• Блок с основной информацией о товаре (материал, упаковка, доставка, т.д);
• Блок с подробным описанием от мастера, историей создания, отзывами;
• Информация о мастере со ссылкой на его витрину;
• Рекомендации и похожие товары.

Главная страница

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

• слайдер с вводными баннерами;
• блок с популярными категориями магазина;
• блок с трендовыми товарами;
• блок с продавцами;
• блок с акционными товарами;
• блок рекомендаций локальных мастеров;
• статьи блога;
• футер.

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

Блок «Недавно добавленные в избранное» появляется на главной странице, если клиент отмечает товар или товары как понравившиеся.

Каталог

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

Фильтры и сортировка с удобными визуальными элементами (выпадающие меню) позволяют быстро сузить выбор по цене, цвету и другим параметрам.

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

Страница продавца

Чистые, легко сканируемые блоки, простые иконки — всё для лёгкого восприятия.

1. Добавили новый инструмент для продвижения — слайдер «Баннеры продавца». Эти изображения размещаются сразу под основным меню и могут использоваться в качестве персонализированной рекламной площадки. В панель управления добавили отдельную вкладку, где продавец легко управляет этим визуальным контентом.

2. Фотография - важный элемент для повышения доверия, поэтому добавили возможность продавцу загружать свою фотографию и указывать имя.

3. Визуальная галерея продавца в формате слайдера. В панели управления продавца появился отдельный раздел «Галерея продавца», позволяющий загружать и управлять коллекцией изображений. Галерея представлена в виде слайдера, который динамично презентует украшения магазина.

Корзина

1. Продавцы могут настраивать акции на бесплатную доставку или скидки в зависимости от общей суммы в корзине. Информация об акциях отображается на странице Корзины.

2. Реализовали функцию, которая позволяет сообщить продавцу, что заказ является подарком. Нужно лишь отметить галочку «Отметить заказ как подарок» в корзине. После этого откроются поля для персонального поздравления: «Кому», «От кого», «Добавить сообщение». Вся эта информация будет отображаться в заказе. Также, заказы, отмеченные как подарки, автоматически получают специальную метку «Подарочная упаковка» в общем списке, что позволяет легко находить их среди других заказов.

3. Покупатели могут перемещать товары из корзины в специальный раздел отложенных товаров на этой же странице. В любой момент они могут вернуть эти товары обратно в корзину и завершить покупку.

3. Результаты сотрудничества

Результаты работ

• Разработали новый визуальный стиль и создали адаптивный дизайн маркетплейса handmade-украшений, воплотившие видение клиента.
• Внедрили уникальные функции, повышающие конверсию: система акций в корзине, расширенный вишлист с избранными продавцами, опция оформления подарка.
• Создали инструменты для построения доверия: детальные карточки товаров, портфолио продавцов.
• Обеспечен безупречный пользовательский опыт с упором на мобильную аудиторию.