MARÉM — e-commerce

роль продуктового дизайнера

MARÉM — уральский одежный бренд с живой аудиторией и сильной идентичностью. Сайт к моменту старта проекта не соответствовал ни уровню бренда, ни задачам бизнеса. Требования к новому продукту существовали в головах у нескольких людей и нигде не были сформулированы единым образом.

Задача: создать полноценный e-commerce для MARÉM. Спроектировать интернет-магазин с нуля

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

Проектирование

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

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

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

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

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

Каталог и карточка товаров

Выбор товаров с фильтрацией по категориям, коллекциям и полу, сортировкой, и хлебными крошками.

страница товара

Галерея, выбор размера и цвета, сервисы рассрочка, состав, доставка, возврат, блоки апсейла и истории просмотров.

Корзина и Чек-аут

Страница корзины и флоу оформления заказа, доставки. А также статусы, ошибки, уведомления.

брендовые Промо-страницы

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

Справочная и Модули рассылок

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

Модули рассылок для сборки рекламных, информационных и системных писем.

особенности дизайн-системы

Фокус на продукте и Баланс информации

Типографика, воздух и фото — всё. Ярко проявляются только дизайн-элементы связанные с самим брендом. Например, крупный леттеринг MARÉM в футере и шапке. Подсвечивает это только размером и мироканимацией.

Задача дизайна — показывать характер без дизайна. Не мешать бренду проявляться через образы и наряды.

Сетка — максимально упрощена. Справа 8 колонок контента с делением на кратные ячейки. Слева маргиналия адаптивного сайдбара. В каталоге сайдбар конвертируется в полноценное меню с иерархией категорий и коллекций.

«Мы не хотим быть маркетплейсом как какая‑нибудь Ламода» — Заказчик.

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

В каталоге — принять решение перейти в страницу товара, закрепить его в избранное (название товар, его фотография, название коллекции и стоимость со скидкой или без.)

На странице товара — принять решение добавить в корзину, посмотреть ещё товары (размеры, описание товара, цвета, цена, рассрочка, кнопка «добавить», карточки товаров для апсейла)

В корзине — провести оформление и совершить покупку (состав корзины, декомпозиция цены и скидки, с блоками промокода и системы баллов)

результат

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