B2B-система заказа медицинских оправ для салонов оптики и розничных сетей. Публичный каталог знакомит с ассортиментом, личный кабинет объединяет закупки, заказы и данные компании.
Продукт
B2B e-commerce
Пользователи
Салоны и сети оптики
Период
Январь — февраль 2025
Роль
UX/UI-дизайнер
Пробел или Enter — остановить или воспроизвести видео.
SEE MO поставляет медицинские оправы салонам оптики и розничным сетям. Заказчику нужна была B2B-платформа: открытая витрина, которая знакомит с поставщиком и ассортиментом, и кабинет оптового покупателя для закупок.
Главное отличие от розничного магазина — цены, условия поставки и заказы видны только подтверждённым партнёрам. Поэтому кабинет открывается после проверки компании.
UX/UI-дизайнер проекта — от исследования до финальных макетов: мудборды, карта сайта и маршруты, прототипы, интерфейсы витрины и кабинета, UI-кит.
Отдельно проработал состояния, которые часто теряются: ожидание проверки, ошибки, пустые разделы и подтверждения.
Связать выбор оправ, B2B-доступ, закупку и работу с заказами в один путь.
Чётко отделить публичную витрину от функций партнёра — особенно пока данные компании на проверке.
Пять этапов — от брифа до финальных макетов и UI‑кита.
Как совместить выразительную витрину оправ с условиями оптовой закупки.
Сравнил две группы сайтов: поставщиков оправ — как открывается оптовый доступ, и оптические бренды — как устроены каталог и карточка товара.
В кейсе — четыре открытых сайта; закрытые кабинеты и поведение покупателей не исследовались.
Витрина должна объяснять предложение до входа, а регистрация — показывать статус проверки, а не только факт отправки.
После открытия доступа на первый план выходят рабочие задачи: параметры модели, количество, условия и свои заказы.
«Оптический мир» открывает каталог через заявку и менеджера. BARONCELLI объясняет регистрацию компании, проверку и открытие цен.
В SEE MO: отдельный статус проверки и понятный путь к ценам.
Persol делит ассортимент по типу очков и коллекциям. Glassman собирает в карточке описание, характеристики и условия покупки.
В SEE MO: вход через категории и параметры модели рядом с добавлением в корзину.
Собрал три способа показывать оправы: крупная предметная фотография, свободный первый экран и строгая товарная сетка.
В интерфейсе соединил выразительный образ продукта с нейтральной рабочей поверхностью; жёлтый акцент — только для основных действий.
Путь оптового покупателя: получить доступ, оформить закупку и вернуться к заказу.
Карту сайта и маршруты собрал в Figma. От главной расходятся каталог, поиск, полезная информация, блог, компания, контакты, избранное, корзина, кабинет и вход.
Условия и ошибки — прямо на ветках: пустая корзина, недобранная минимальная сумма, неверный код или пароль. Жёлтые блоки ведут в другой раздел, пунктир — возврат после ошибки.
Вход, регистрация компании, восстановление пароля, поиск, покупка и кабинет — отдельные сценарии с условиями и возвратами.
Покупка проходит проверку входа и минимальной суммы, выбор получения и подтверждение. При регистрации — сначала код из письма, затем проверка данных компании.
Экраны идут по пути покупателя: знакомство с поставщиком, выбор модели, доступ компании, закупка и заказы. Товары, цены и реквизиты — демонстрационные.
Оптовый покупатель сначала оценивает поставщика, поэтому страницу построил как аргументацию: образ продукта, преимущества, документы и сертификаты.
В конце — заявка на партнёрство; каталог доступен из навигации, и знакомство не прерывается.
Вместо длинного списка — четыре группы: женские, мужские, подростковые и универсальные оправы. Фото задаёт характер категории ещё до перехода к моделям.
Задача страницы — выбрать направление закупки, а не сравнить весь ассортимент.
Фильтры по параметрам и сортировка. Во всех карточках один порядок: фото, название, артикул, наличие и цена — модели сравниваются взглядом.
Кто уже знает модель, идёт через поиск.
Поиск открывается панелью поверх страницы: до ввода — частые запросы и популярные товары, после — категории и подходящие модели.
Фото, артикул, наличие и цена видны прямо в панели, а страница под ней остаётся на месте.
Наверху — фото, наличие, цена, количество и добавление в корзину. Характеристики, размеры и материалы раскрываются ниже.
Ракурсы помогают рассмотреть форму, а похожие и просмотренные модели продолжают выбор без возврата в каталог.
Регистрация человека и компании — в одном окне. Подтверждение почты и проверка данных — отдельные шаги, не смешанные с обычным входом.
Экран ожидания объясняет, почему кабинет ещё закрыт, и не предлагает зарегистрироваться снова.
Боковая панель подтверждает добавление модели и показывает её количество и стоимость. Здесь можно изменить количество или удалить позицию, не теряя страницу товара.
Два действия продолжают сценарий: перейти к оформлению либо вернуться к подбору других оправ.
В корзине можно изменить количество, удалить позиции или перенести их в избранное. Рядом с товарами собраны сводный расчёт, персональная скидка и условие минимальной суммы.
В макете предусмотрено состояние с недоступным переходом к оформлению: ограничение показано до отправки заказа.
После корзины покупатель уточняет получателя, способ доставки, адрес и оплату. Сохранённые адреса дополняет возможность добавить новый; заказ может получить другой человек.
Предоплата и отсрочка разделены. Отсрочка обозначена как условие по согласованию, а не как доступный всем способ оплаты.
До первого заказа центральный блок ведёт в каталог, после покупки — показывает сводку заказов.
Скидка, реквизиты и навигация остаются на своих местах — покупатель работает в знакомом интерфейсе.
В истории — статусы, состав и суммы; фильтр помогает найти нужную закупку.
Внутри заказа — товары, итог, оплата, получатель, адрес и трек-номер.
Остальные страницы и состояния доступа, покупки и кабинета: ошибки, пустые экраны и подтверждения.
Общие правила для витрины и кабинета партнёра.
Палитра, типографика, кнопки, навигация, поля и элементы выбора — у каждого интерактивного элемента описаны состояния. Одинаковые действия выглядят одинаково на всех экранах.
Спроектировал B2B e‑commerce платформу для оптовых закупок медицинских оправ, объединив каталог, оформление заказов и личный кабинет.
Выстроил пользовательские сценарии с учётом специфики оптовых продаж, проработал персональные условия сотрудничества, состояния интерфейса и обработку ошибок.
Объединил выбор товаров, оформление заказов и историю закупок в единый процесс. Это упростило путь пользователя: условия сотрудничества, персональные скидки и статусы заказов доступны в нужном контексте, без необходимости искать информацию в разных разделах.
Разработал UI‑кит с переиспользуемыми компонентами и состояниями интерфейса. Это ускорило проектирование, упростило разработку сайта, обеспечило визуальную согласованность экранов и заложило основу для дальнейшего расширения продукта.
