Дизайн маркетплейса · 2024

Mokulima

Маркетплейс мастеров с острова Мауи: украшения, керамика, принты, фотоуслуги и афиша местных событий. Нарисовали десктопную и мобильную версии, от главной до оформления заказа, и сами перенесли дизайн на CS-Cart Multi-Vendor.

Клиент: Mokulima, маркетплейс handmade-товаров
Задача: Дизайн маркетплейса товаров, услуг и событий
Платформа: CS-Cart Multi-Vendor
Макеты: 21 экран десктопа, 15 мобильных
Год: 2024

mokulima.com

Задача

Клиент задумал маркетплейс в духе Etsy для мастеров с Гавайев. Кроме товаров ручной работы, на нём продают услуги, например фотосъёмку, и ведут афишу местных мероприятий. Особый упор — на мобильную версию.

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

Главная

Под шапкой — строка разделов: Maui Made, услуги, хиты, скидки, новинки, акции и календарь событий.
Первый экран — фотоколлаж, ниже популярные категории крупными фотографиями на зелёной полосе.
Блок «Discover shops in Hawaii» ведёт на страницы продавцов, магазины для него выбирают в админке.
Дальше ленты товаров с рейтингом и ценой, подборка редакции и блог.

Путь покупателя

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

Карточка товара Mokulima — 1920 × 2881 · Карточка товара

Страница продавца Mokulima — 1920 × 3664 · Страница продавца

Избранное Mokulima — 1920 × 2270 · Избранное

Корзина Mokulima — 1920 × 2911 · Корзина

Услуги

Для услуг нарисовали отдельные шаблоны каталога и страницы.

Каталог услуг Mokulima — 1920 × 2448 · Каталог услуг

Страница услуги Mokulima — 1920 × 2781 · Страница услуги

Календарь событий

Афиша местных мероприятий: месяц с метками событий, переключатель на вид списком и кнопка «Предложить событие».

Мобильная версия

15 мобильных экранов шириной 393 пикселя. Товары в две колонки, у каждого счётчик и кнопка корзины, внизу экрана панель навигации.

Меню каталога

Меню без картинок и иконок: разделы крупнее и жирным, подразделы под ними. Так оно не перегружено.

Ранняя версия

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