SOLOMA Tech: что нового на маркетплейсе
Продолжаем развивать один из масштабных проектов студии
SOLOMA Tech: что нового на маркетплейсе
Продолжаем развивать один из масштабных проектов студии
В 2023 мы с нуля создали маркетплейс мебельных комплектующих SOLOMA Tech. Тогда, на старте проекта, была лишь идея заказчика и пачка неопределенностей, которые мы успешно, шаг за шагом, «размотали», проанализировали и превратили в рабочий MVP-проект с понятными личными кабинетами и всеми прелестями торговых онлайн-площадок.
После релиза работа не остановилась: мы продолжили нанизывать нужный функционал и добавлять фичи и фишки. А после — взяли и провели большой редизайн личного кабинета. Заодно улучшили юзабилити в каталоге и карточках товаров, проделали интеграцию с ПЭК и добавили долгожданную систему скидок — пришло время рассказать подробности.
После релиза работа не остановилась: мы продолжили нанизывать нужный функционал и добавлять фичи и фишки. А после — взяли и провели большой редизайн личного кабинета. Заодно улучшили юзабилити в каталоге и карточках товаров, проделали интеграцию с ПЭК и добавили долгожданную систему скидок — пришло время рассказать подробности.
Обновлённый личный кабинет поставщика
С маркетплейсами ярче ощущается, что сайт — это процесс: постоянно требуются микроизменения, продиктованные запросами пользователей, чтобы сделать их работу на площадке проще и удобнее. Так произошло и на нашем проекте.
Редизайн
Полина
Руководитель проекта
— Проект постоянно рос: порой спринты мы выпускали настолько быстро, что небольшие фичи внедряли иногда вообще без дизайна — на основе уже имеющихся визуалов. Объем информации в личном кабинете поставщика кратно вырос, и старый дизайн уже не мог вместить все эти изменения.
Поэтому, чтобы упорядочить разделы ЛК и сделать кабинет удобнее для пользователей, мы приступили к редизайну.
Поэтому, чтобы упорядочить разделы ЛК и сделать кабинет удобнее для пользователей, мы приступили к редизайну.
Старый личный кабинет мы создавали с учетом лучших традиций B2B-проектов: внутри были вкладки, на каждой из которых разместилась своя информация: от общих данных и истории заказов до документов и складов. Новый личный кабинет — принципиально другой, в лучших традициях маркетплейсов: с боковым меню и максимально упорядоченными данными на вкладках.
Личный кабинет поставщика: было-стало
Полина
Руководитель проекта
— Сперва мы отрисовали только стейт с дашбордом: здесь видны последние уведомления, статистика по загруженным товарам и заказам, а также боковая панель.
Уже глядя на дашборд мы осознали, что переделка предстоит большая. Поэтому действовали по agile: сначала согласовали дашборд с заказчиком, а после — пошли отрисовывать разделы ЛК буквально заново.
Уже глядя на дашборд мы осознали, что переделка предстоит большая. Поэтому действовали по agile: сначала согласовали дашборд с заказчиком, а после — пошли отрисовывать разделы ЛК буквально заново.
Денис
Арт-директор и дизайнер проекта
— Как мы помним, на старте проекта у заказчика было много неопределенностей. Функционал личного кабинета — был одной из них. К моменту, когда проект запустился и начал работать, у заказчика появился определенный пул функций. Поэтому редизайн был логичен и необходим.
Я понимал, что нужно масштабируемое решение, которое не будет страдать при дальнейшем развитии продукта, поэтому предложил организовать навигацию по разделам через меню-дровер.
Это решило сразу две проблемы:
1) сэкономило пространство на экране, которое нужно для таблиц и работы с ними;
2) отделило визуально клиентскую часть от административной, что также решило вопрос идентичности и путаницы.
Нам было важно проследовать за ожиданиями пользователей и попасть в их модель мышления — ведь поставщики уже работают с различными системами учета, которые устроены очень похожим образом.
Я понимал, что нужно масштабируемое решение, которое не будет страдать при дальнейшем развитии продукта, поэтому предложил организовать навигацию по разделам через меню-дровер.
Это решило сразу две проблемы:
1) сэкономило пространство на экране, которое нужно для таблиц и работы с ними;
2) отделило визуально клиентскую часть от административной, что также решило вопрос идентичности и путаницы.
Нам было важно проследовать за ожиданиями пользователей и попасть в их модель мышления — ведь поставщики уже работают с различными системами учета, которые устроены очень похожим образом.
Детальная страница заказа
Самые большие изменения случились на детальной странице заказа — поэтому над её структурой мы поработали особенно тщательно. Ещё на MVP-версии у поставщиков была возможность менять некоторые детали заказов вручную: например, они могли скорректировать срок поставки или дату отгрузки.
Теперь есть возможность редактировать состав и все детали заказа: менять стоимость и количество товаров, добавлять скидки, заменять товары на другие или отменять заказ вовсе.
Теперь есть возможность редактировать состав и все детали заказа: менять стоимость и количество товаров, добавлять скидки, заменять товары на другие или отменять заказ вовсе.
Возможность редактировать заказ — одна из самых важных фич для поставщика, потому что ситуации бывают очень разные. Например, покупатель заказывает товар, но его нет в наличии на заводе — тогда поставщик может предложить похожий по характеристикам и заменить его в заказе. Другой сценарий — покупателю нужно 100 штук конкретного товара, а на складе есть только 98. Если его устроит такое количество, поставщик просто меняет число в заказе и подтверждает его.
Полина
Руководитель проекта
— Когда поставщик редактирует данные, мы сравниваем слепок (исходный заказ) и получившийся заказ. Изменения выводим в ЛК и отправляем уведомление покупателю.
Счет выставляется автоматически, как только поставщик подтвердил заказ, поэтому тут есть подстраховка: если изменения заказа не устроят покупателя, он может отменить заказ и не оплачивать счет.
Вкладка «юридические данные»
Полина
Руководитель проекта
— Ещё одна серьезно переработанная вкладка — юридические данные. Важно было показать понятный последовательный процесс заполнения данных и прикрепления документов, чтобы поставщик понимал порядок шагов. Мы сделали его в виде таймлайна с подсказками, заодно поменяв механику загрузки документов.
Уже в ходе переделки и сборки личного кабинета появлялись дополнительные фичи, которые мы добавляли в процессе. Чтобы подобные быстрые изменения не сломали логику, мы провели рефакторинг личного кабинета, а заодно много тестировали UX и вносили мелкие правки по юзабилити — в итоге получился на ЛК, а загляденье:)
Денис
Арт-директор и дизайнер проекта
— Мы проработали базовый флоу (поток действий) поставщика: авторизация → подгрузка документов для допуска на площадку → создание каталога товаров и работа с заказами, что самое важное в данной сфере.
На странице заказе раньше выводился список товаров, номер заказа и статус самого заказа. Но учитывая новый функционал теперь заказ должен редактироваться, а статус меняться — причем, вариантов статусов не 2 и не 3, и пользователю важно видеть их все.
Чтобы сконструировать максимально удобный интерфейс с учетом всех нужных данных, мы собрали несколько флоу пользователя и дали сделали тестирование каждого такого потока внутри команды, чтобы увидеть плюсы и минусы — получилось эдакое коридорное тестирование. Из 3 предлагаемых нами вариантов интерфейса один оказался явным фаворитом, который мы и взяли за основу.
На странице заказе раньше выводился список товаров, номер заказа и статус самого заказа. Но учитывая новый функционал теперь заказ должен редактироваться, а статус меняться — причем, вариантов статусов не 2 и не 3, и пользователю важно видеть их все.
Чтобы сконструировать максимально удобный интерфейс с учетом всех нужных данных, мы собрали несколько флоу пользователя и дали сделали тестирование каждого такого потока внутри команды, чтобы увидеть плюсы и минусы — получилось эдакое коридорное тестирование. Из 3 предлагаемых нами вариантов интерфейса один оказался явным фаворитом, который мы и взяли за основу.
Система скидок
Скидки — важный инструмент при торговле на маркетплейсах. Ещё более важны они для b2b сферы, поскольку там часто практикуют оптовую продажу товаров со скидками от объема: чем больше ты купил, тем меньше заплатил за единицу.
В личном кабинете поставщика мы предусмотрели сразу несколько настроек для назначения скидок:
- размер в %;
- на какие именно товары распространяется (поставщик может выбрать их в ЛК напрямую из каталога). Кстати, чтобы не проходиться настройками скидок по каждому товару, их можно назначить массово. А ещё могут быть скидки не на товары, а на весь заказ;
- минимальное количество товаров к покупке, чтобы скидка активировалась;
- период действия (с какой даты по какую);
- настройки аудитории (например, для новых покупателей или только для постоянных);
- приоритет — поставщик может установить порядок применения условий для скидок, если покупатель выполняет сразу несколько условий и претендует на множественные скидки. Сайт благодаря приоритетам понимает, какое из условий должно примениться первым.
Полина
Руководитель проекта
— Поставщик может задать минимальное количество товаров для скидки, а также массово изменить его. Этот функционал актуален, если нужно добавить конкретную категорию для скидки и продать из неё позиции по скидке при покупке от N штук. Например, скидка на все мебельные клеи или листы МДФ при покупке от 10 штук.
Дмитрий
Разработчик
— Для удобства можно импортировать скидки из файла. Например, если поставщик хочет задать скидку сразу на несколько тысяч товаров. Также можно добавлять ограничения, чтобы скидки действовали только на определенных пользователей.
Доставка с ПЭК
Организация доставок для маркетплейсов — та ещё задачка. Вариантов тут не так уж много:
- либо маркетплейс заводит собственный склад, куда поставщики привозят товары на хранение, и заморачивается с доставкой своими силами;
- либо перекладывает эту ответственность на поставщиков (если что-то пойдет не так и товар потеряется, спрашивать с них).
Теперь на маркетплейсе появился ещё один способ доставлять товары — через транспортную компанию ПЭК. Этот функционал нужен был и пользователям, которые привыкли к работе с внешними службами доставки, и самим поставщикам, поскольку не у каждого из них есть возможность доставлять заказы самостоятельно.
Полина
Руководитель проекта
— Для е-коммерс с подключением ПЭК нет никаких проблем, потому что схема давно обкатана. А вот для маркетплейса — это задача со звездочкой. Не совсем ясно, что делать с аккаунтами в ПЭК: создавать отдельный под каждого поставщика и идентифицировать заказы, чтобы они потом появились у поставщика и в личном кабинете службы доставки? По поводу взаиморасчетов — тоже много вопросов.
Леонид
Разработчик
— Вопросов по этому контуру было действительно много, и довольно непростых. Для начала — для подключения к ПЭК нам пришлось написать SDK для PHP (Software Development Kit — конкретно в нашем случае это набор классов/методов, позволяющий обращаться к API ПЭКа из PHP), поскольку у них его не было, а интегрироваться было нужно :)
Поставщик в ЛК может выбрать: либо служба доставки ПЭК заберет его товары со склада, либо может сам отвозить их в нужное отделение ПЭКа. От выбора отделения, с которым будет работать поставщик, зависит расчет срока и стоимости доставки для покупателя.
С оплатами на первом этапе решили не усложнять: сейчас оплата таких доставок происходит полностью на стороне покупателя. А чтобы физлица могли быстро оплачивать товары онлайн, мы интегрировали сайт с сервисом ЮKassa. В планах заморочиться с фукнационалом взаиморасчётов с маркетплейсом: всё, как у больших ребят вроде Озона или WB.
Формирование транспортных накладных
После оформления заказа и перевода в статус «готов к отгрузке» на сайте можно сформировать товарно-транспортную накладную — это упрощает документооборот между маркетплейсом, поставщиками, экспедиторами и транспортными компаниями. Мы предусмотрели все нужные типы документов — сайт при заполнении данных автоматически генерирует xls-файлы: ТН, ТТН, УПД, счет-фактуру и другие. Каждый — с учётом параметров доставки, типа покупателя (юрлицо или физлицо) и других данных.
Не только редизайн ЛК
Где редизайн личного кабинета, там и неминуемый редизайн всего остального на сайте. Сейчас мы уже перерисовали каталог и дательную страницу товара — хотелось освежить внешний вид основной рабочей зоны покупателя и сделать работу с маркетплейсом комфортнее.
Дизайн страницы каталога: было-стало
Полина
Руководитель проекта
— Важно было расширить контентную область в каталоге, убрав отступы, которые «съедали» много полезного пространства на странице.
Теперь в каталоге есть 2 варианта отображения товаров: карточками и списком. Информации на карточке довольно много, поэтому по ховеру она раскрывается, заходя на нижнюю — это популярный прием крупных интернет-магазинов, вроде Диван.ру.
Теперь в каталоге есть 2 варианта отображения товаров: карточками и списком. Информации на карточке довольно много, поэтому по ховеру она раскрывается, заходя на нижнюю — это популярный прием крупных интернет-магазинов, вроде Диван.ру.
Денис
Арт-директор и дизайнер проекта
— Проект неминуемо масштабировался, а разделы каталога увеличивались, поэтому мы решили создать корневые разделы, в которых распределяем остальные. Решение получилось удачным, поскольку такой тип каталога можно масштабировать до бесконечности.
На детальной странице товара мы основательно перекомпоновали информацию, визуально поделив пространство на 3 колонки:
- галерея из фото;
- основные характеристики (а в будущем там появится и выбор SKU — разных вариантов одного товара от поставщика: например, отличающихся размером или цветом);
- е-коммерс часть: скидка, цена, количество и наличие, варианты оплаты и доставки.
Детальная страница: было-стало
Мы сохранили возможность просматривать варианты того же товара от других поставщиков плюс всю нужную информацию: от описания и характеристик до отзывов и вопросов.
Что дальше
Развитие маркетплейса — всегда длинная и извилистая дорога. Чем больше функционала добавляется, тем сложнее становится архитектура и тем больше нюансов на каждой странице приходится учитывать. Но этот процесс — слишком увлекательный и драйвовый, чтобы когда-нибудь остановиться и сказать «довольно!», как в том самом мультфильме. А значит, впереди ещё очень много нового :)