B2B-маркетплейс, в котором у каждой стороны свой понятный маршрут
Jummy соединяет производителей, дистрибьюторов и покупателей ювелирных изделий. Я спроектировал продукт и визуальную систему, чтобы сложные B2B-сценарии не превращались в тяжёлый корпоративный интерфейс.
Jummy
Контекст
Участники рынка смотрят на платформу по-разному: одним нужен каталог и новые заказы, другим — ассортимент, условия и коммуникация по сделке. Продукт должен помогать им действовать в одном пространстве без смешения задач.
Задача
Нужно было дать индустрии привычную надёжность, но не утяжелить интерфейс. Пользователь должен быстро находить нужную категорию, понимать статус заказа и продолжать диалог с контрагентом.
Моя роль
Спроектировал интерфейс маркетплейса для трёх ролей: каталог, корзину, оформление заказа, чат и личные кабинеты. Параллельно делал бренд (знак, палитру, типографику, 3D-графику) и дизайн-систему, на которой держатся продукт и сайт.
Результат
Единая B2B-система
Собрал общий язык для каталога, заказов, коммуникации и личных кабинетов трёх ролей.
1. С чего начинал
- Производитель, дистрибьютор и покупатель приходят на одну платформу с разными задачами. Если показать всем одно и то же, каждый будет пробираться через чужие функции.
- В B2B-заказе много условий: наличие, способ доставки, способ оплаты, продавец по каждой позиции. Показать их нужно в одном месте, и корзина при этом не должна стать таблицей учётной системы.
- Ювелирный рынок ждёт от площадки надёжности, а от украшений эмоции. Бренд должен выглядеть серьёзно в рабочих экранах и живо в промо.
2. Корзина, оформление и чат
В корзине у каждой позиции видны продавец, цена за единицу, счётчик количества и итог по строке, а отсутствие товара отмечено красной подписью «Нет в наличии» прямо у суммы. Ниже блок «Куда доставить» с переключателем «Пункт выдачи» и «Курьером» и картой. Оплату выбирают из трёх вариантов: «Банковской картой», «Выставить счёт» и «Обсудить по телефону», последние два нужны именно оптовой сделке. В чате сверху закреплена карточка заказа с номером, статусом и продавцом, поэтому собеседнику не приходится выяснять, о каком заказе речь.
3. Нарисовал знак и описал правила
Знак состоит из двух плашек со срезанными углами. Форма отсылает к огранке и читается как две стороны сделки, рядом стоит леттеринг «ДЖУММИ» тонкими геометричными буквами. В гиде по айдентике закрепил чёрный и белый как основные цвета, синий как главный акцент, голубой как дополнительный. Для заголовков выбрал Aeonik Pro, он хорошо читается и поддерживает геометрию знака.
4. 3D-графика про ремесло
В серии иллюстраций кольцо, серьги, подвеска, застёжка и бриллиант нарисованы прозрачными, как из стекла, а инструменты ювелира (пинцет, круглогубцы, штихель) плотным синим. Графика показывает ремесло и мастеров отрасли вместе с готовыми украшениями. Для соцсетей сделал модульную сетку на тёмном фоне, где фотографии украшений можно менять, не пересобирая макет.
5. Собрал промо-карточки в двух настроениях
Светлая карточка построена на фирменном градиенте с эффектом матового стекла, золотые серьги на камне выходят за край плашки. Тёмная работает на контрасте: чёрный фон, белый заголовок и серебряное украшение. Схема у обеих одна — логотип сверху, крупный заголовок, короткая подпись внизу и предмет справа.
6. Сложности и решения
Сложность
Три роли умножают количество экранов и состояний. Если рисовать каждой роли свой интерфейс, продукт распадётся на три разных.
Решение
Товар, заказ, контрагент и чат остались одинаковыми для всех, менялся только набор доступных действий. Экраны сделаны из одних компонентов, и новая роль или сценарий не требуют новой вёрстки.
Сложность
В списке чатов смешиваются обращения разной срочности и на разные темы: вопрос новичка, спор по заказу, брак, закрытый диалог.
Решение
Развёл статус и тему в две группы меток. Зелёные показывают состояние диалога («Новый», «Ожидает клиента», «Закрыт»), сиреневые тему вроде «Доставка» или «Брак», красная «Спор» выделяет конфликт. В строке видны контрагент и номер заказа, так что список можно разобрать, не открывая каждый чат.
7. Продуктовые метрики
Каждое решение привязано к показателю: что на него работает и по чему это видно в аналитике.
Конверсия корзины в оформленный заказ
- Что на это работает
- Корзина, доставка и оплата собраны в одну цепочку без переходов между разделами.
- Что смотреть в аналитике
- Воронка: корзина → способ доставки → оформление.
Скорость ответа по заказу
- Что на это работает
- Чат привязан к заказу: статус сделки виден прямо в переписке.
- Что смотреть в аналитике
- Медианное время первого ответа и доля заказов, где была переписка.
Скорость выпуска новых экранов
- Что на это работает
- Дизайн-система из 120+ компонентов с описанными состояниями.
- Что смотреть в аналитике
- Доля новых экранов, собранных из готовых компонентов без доработки.
8. Что получилось
- Спроектировал 90+ экранов продукта, в дизайн-системе 120+ компонентов.
- У каждой из 3 ролей свой маршрут, при этом каталог, заказ и чат устроены одинаково для всех. Продукт, сайт и брендбук используют одну палитру, один шрифт и одну графику.