B2B Портал Валты
От концепта до собственной дизайн‑системы
Задача и проблема
Спроектировать портал для юр. и физ. лиц которые имеют договор с Валтой на поставки
У Валты уже был инструмент продажи товаров и использования программ лояльности valta.ru, но у него были проблемы:
– Устаревший дизайн, который нет возможности поддерживать и дорабатывать
– Перегруженный функционал для бизнес клиентов, которые занимаются исключительно закупками и не нуждаются в части сервисных функций
– Слабое разделение по договорам: заводчики часто видят интерфейсы и элементы, которые актуальны для ветврачей или грумеров, и наоборот, из‑за чего растёт шум и снижается релевантность контента
– Весь бэкенд размещён у стороннего подрядчика, из‑за чего любые изменения и исправления приходится ждать неделями
или даже месяцами
– На тот момент в компании не было команды, которая могла бы полноценно реализовать такой объём работ
Кусочек пути от каталога до корзины старой Валты
Про команду
За месяц собрали команду из 5 человек, сфокусированную именно на B2B‑портале
В неё вошли бэкенд‑разработчик, фронтенд‑разработчик, QA‑специалист, продуктовый дизайнер(its me, Mario) и ПМ
У каждого в команде была своя зона ответственности, а моя — разработать концепт портала и защитить его перед директорами «Валты». После согласования концепта в мои задачи вошли создание дизайн‑системы и проектирование сценариев для всех типов договоров, но это позже, сейчас про концепт
Основное, что показали начальные исследования
После интервью с заводчиками (они основной пласт наших клиентов, возраст которых в среднем составляет 37-40 лет) выяснилось, что им требуется следующее:
Простую навигацию: сейчас пользователям сложно одновременно управлять программами и закупать товары, хотя это два основных сценария. Каталог спрятан в хедер, программы лояльности — глубоко в личном кабинете, а переключение между несколькими договорами остаётся неудобным для тех, у кого их много
Пользователям не хватало более понятной структуры каталога: заводчики и магазины хотели быстро находить новинки и товары с оплатой баллами, но сейчас это возможно только «глазами» по тегу внутри общего списка каталога
Прозрачности в отслеживании заказов: сейчас статусы выглядят непонятно, сложно понять, что происходит с заказом в конкретный момент, из‑за чего пользователи регулярно звонят менеджеру с вопросом«ну как там с заказом?»
А просматривая веб. вью пользователей Валты я заметил два интересных момента
Заводчики, магазины и ветврачи работают с персональными ценами и им важно видеть, сколько они экономят по сравнению с рынком. Пользователи заходили в каталог, выходили из аккаунта, чтобы увидеть «рыночную» цену, затем снова логинились и добавляли товар в корзину по своей цене. Это решилось добавлением к товарам рекомендованной рыночной цены (в будущем РРЦ) для договоров с персональными условиями
Оптовые клиенты почти не открывают страницу товара: они используют поиск и фильтры и сразу добавляют позиции в корзину из списка. На карточку переходили только ради полного названия, которое в старой сетке обрезалось. Поэтому каталог перевели в горизонтальные карточки с нормальной длиной названия и возможностью переключиться на привычный вид. А сам поиск после МВП версии будет развиваться как основной инструмент
Черновые концепты
– Основную навигацию по порталу вынес в сайдбар: в первом концепте подкатегории были вложены в категории, но от многоуровневой структуры пришлось отказаться — она получилась слишком сложной и перегруженной.
– В хедере расположил ключевые инструменты: поиск по каталогу, информацию и смену договора, корзину, уведомления и блок с баллами.
– В рамках MVP роль главной страницы выполнял каталог, поэтому и начал с него
Углубляемся в дизайн навигации и каталога
– Стандартные изображения категорий заменил на сгенерированные более презентабельные обложки, чтобы каталог
выглядел чище
– Вложенность сайдбара перевёл в горизонтальный формат, чтобы сфокусировать внимание пользователей
на категориях и брендах и уменьшить визуальную перегрузку
– Добавились: смена договора с поиском, каталог с товарами, фильтры и страница товара
Эту концепцию и ключевые экраны мы с командой успешно презентовали и согласовали с руководством, после чего курс продукта был понятен
Дальше работа шла в двух потоках: проработка пути оформления заказа и развитие дизайн‑системы, которую я делал параллельно
Корзина
– У юрлиц была довольно простая корзина: они могут заказывать рецептурные товары, потому что у них есть договор на поставки. У физлиц такие позиции доступны только при самовывозе, поэтому для них появился дополнительный флоу, когда в корзине одновременно есть товары с доставкой и товары «только самовывоз», которые переносятся вверх списка корзины в отдельный блок и не учитываются в общую сумму до бесплатной доставки
– Стоимость доставки рассчитывает менеджер после согласования заказа, если по условиям договора клиент не достиг порога для бесплатной доставки, это тоже нужно было донести до пользователей
– Дополнительно требовался флоу на случай, когда договор заблокирован или превышен лимит дебиторской задолженности*
– Пользователи с типом договора «магазин» на интервью говорили, что им важно видеть свою прибыль, поэтому в корзине появился пункт «расчётная прибыль» именно для этого типа договора. Она считается на основе РРЦ, чтобы показать, сколько магазин может заработать
*Дебиторская задолженность — это сумма по уже отгруженным, но ещё не оплаченным заказам клиента, то есть деньги, которые компания ждёт от него по договору. Когда эта сумма превышает установленный лимит, оформление новых заказов автоматически блокируется до погашения части задолженности
Оформление заказа
– Страницу оформления заказа изолировал от основной навигации, чтобы убрать лишние отвлечения и сфокусировать пользователя на проверке данных и подтверждении заказа.
– Разделился флоу по типам договора: физлица могут добавлять и редактировать адреса доставки, а юрлица выбирают только из адресов, уже прописанных в их договоре.
– Поле промокода продублировал из корзины: если код был введён на предыдущем шаге, на странице оформления он уже подставлен, но если забыли ввести в корзине, то возвращаться уже ненужно
– Для физлиц продолжился сценарий с товарами на доставку и «только самовывоз»: при смене способа получения с самовывоза на доставку показываем предупреждение, что часть товаров недоступна для доставки и вернётся в корзину
Способ получения для физлиц
Способ получения для юрлиц
Изменения в количестве товаров при самовывозе
Состояния блока баллов. Мы заметили, что часто пользователи списывают либо круглую сумму баллов, либо столько сколько возможно списать за заказ, по этому добавили кнопку «Списать все»
Оформление заказа для физлиц с товарами только для самовывоза
История заказов
– Клиенты часто собирают новую корзину из истории заказов, причём не через простой повтор одного заказа, а комбинируя позиции из разных. Поэтому появилась отдельная вкладка «Купленные товары», где все позиции из прошлых заказов собраны в один список с поиском и простой фильтрацией. Так как история хранится только за последние полтора года, этот список не успевает превратиться в бесконечную простыню
– В истории заказов отображается общая задолженность по договору, чтобы клиент видел суммарный долг перед компанией, а не искал и оплачивал его по каждому заказу отдельно
– В истории заказов появилась наглядная шкала отслеживания: вместо десятков внутренних статусов из 1С вроде «На контроле» или «Частично отгружен на склад» клиент видит несколько понятных этапов и быстро считывает, что сейчас происходит с заказом. Для тех, кому нужно более детальное отслеживание логистики, есть интеграция с трекером доставки
Повторение заказа при изменениях в позициях
To be continued…
– Скоро добавлю дизайн систему и первые показатели MVP версии