Profi.travel B2B Networking System
роль продуктового дизайнера
В туристическом бизнеса регулярно проводятся выставки под летний и зимний турпродукт. Агенты со всей страны съезжаются в выставочные павильоны (в России чаще в Москву), знакомятся с операторами и отельерами, обмениваются визитками, обсуждают комиссии.
Проблема такого офлайн-формата в его недоступности большей части рынка. Далеко не каждый агент может позволить себе дорогу и проживание. Profi.Travel перенёс выставку в онлайн: та же деловая программа, презентации операторов, вебинары — но без дороги и билета.
Первая версия онлайн-выставки повторяла только доклады. Пропала часть, которая на офлайн-выставке даёт основную ценность, — кулуарные знакомства и обмен контактами между сессиями. Зарубежные конкуренты уже решали это отдельным networking-модулем: каталог участников, деление на байеров и селлеров, видеовстречи.
Задача: сделать networking-платформу для российского внутреннего и въездного турпотока.
Это был мой первый опыт в продуктовом дизайне. Ранее команда преимущественно закрывала коммуникационные задачи — веб-дизайн для маркетинговых спецпроектов. Здесь я отложил роль арт-директора и погрузился в продуктовую разработку целиком — от пользовательских путей до атомарного дизайна и адаптивности.
Задача и структура
Разработка платформы велась на базе онлайн-выставки по въездному туризму Russian Expo Days. Ориентированной на байеров из Индии, Китая и Европы.
Ключевая развилка в архитектуре строится из делении пользователя на два типа:
Buyer
Представитель компании, пришедший на выставку что‑то покупать (турагенты, представители туроператоров). Их большинство.
Seller
Тот, кто это направление продаёт (туристические офисы регионов, отели, DMC, курорты, музеи, транспортные компании).
ядро системы нетворкинга — сосватать байера и селлера, а главное — дать им начать сделку внутри платформы
Условия и потребности
Пользователь при регистрации мог завести либо компанию, либо выступать частным лицом — это тоже закладывалось в архитектуру ролей и доступных действий.
Обменяться контактами, назначить видеозвонок, договориться о партнёрстве. На этом делении строиться всё: фильтры каталога, типы карточек, наборы доступных действий, даже структуру меню — под каждую ситуацию (роль, состояние регистрации, статус компании) уникальное меню.
Появляется структура которая закрывает эти потребности:
- Каталог нетворкинга
- Стенды экспонентов
- Личный кабинет с возможностью планировать свой календарь, делиться контактами, администрировать профиль нетворкинга и т.д.
- Встречи и созвон
- Broadcast-модуль для просмотра трансляций и вебинаров
Главные условия и ограничения, которые мы сформулировали в начале разработки:
- Платформа должна была одинаково хорошо работать на любом языке. Интерфейс от смены языка не должен ломаться, перегружать или наоборот пустовать;
- Не изобретаем велосипед: используем, улучшаем или пересобираем прошлые наши решения;
- Систему предстоит масштабировать на другие выставки с разным дизайном, коммуникацией и функционалом.
дизайн-система
В основу взят принцип атомарного дизайн: сетки, шрифты и отступы как первый слой, затем контролы: кнопки, иконки, скроллбары, и т.д. По ним уже собирались составные компоненты: карточки, меню, расписания.
Многоуровневое меню
предполагали несколько представлений одного и того же меню под разные контексты и разрешения — Hub-меню, Sandwich-меню, Sidebar-меню, отдельное Company-меню — которые пересобирались под разные адаптивы, сохраняя одинаковый набор пунктов и логику.
Языковая адаптивность
Так как модуль в итоге работал на нескольких языках, при проектировании интерфейса закладывалось заведомо больше воздушного пространства, чем требовалось бы для русского или английского.
В качестве эталона языка с самыми длинными словами использовался немецкий. Если интерфейс выдерживал немецкий текст без разломов сетки, он выдерживал любой другой. В качестве языка с самыми короткими словами — Китайский. Так мы проверяли не «рассыпается» ли дизайн от обилия воздуха.
Разделы платформы
Каталог нетворкинга
По сути самая главная страница всей платформы. Каталог с делением на роли Buyer-Seller и фильтрация по типу компании и специализацией: DMC, туроператоры, отели, VIP, resorts, музеи, entertainment, транспортные компании, MICE (корпоративный туризм), детский отдых, образование, круизы — вплоть до кастомных ниш вроде горнолыжного туризма и т.д.
Карточки в каталоге ранжированы по весу. Регионы, крупные организации, партнеры выставки получают развёрнутую карточку с изображением и несколькими логотипами. Байеры — компактную визитку.
Список группируется по регионам продвижения, что превращает каталог одновременно в справочник направлений.
Стенд экспонента
Страница экспонента — полноценная витрина компании или региона. Описание, контакты представителей, материалы, контакты, расписанием вебинаров, запись на встречу — всё необходимое для решения о сотрудничестве, не выходя за пределы платформы.
стенд Региона / партнера выставки
Самый крупный стенд: обложка, блок «о регионе», партнёры-сателлиты, возможность связаться с представителями или задать вопрос из формы. Расписание вебинаров, каталоги для скачивания, фото/видеогалерея, контакты. Всё адаптивно — блоки можно подключать и отключать из админки.
Кастомная мокап-обложка стенда. разработка велась в разгар пандемии, и «физического» выставочного стенда возвращал ощущение присутствия, которого людям не хватало в дистанционном формате.
стенд сателлита
Бизнес-партнёр региона: тот же набор блоков в облегчённой версии, но с возможностью отправить запрос на тур из формы.
стенд независимого бизнеса
Без региональной привязки, но с тем же ядром функций.
Байер — бесплатный стенд
минимальная бесплатная карточка: название, логотип, тег роли, краткое описание и специализация, контакты.
страница представителя
Личная карточка представителя стенда. Имя, должность, офис, о себе, языки общения, специализация по туризму, контакты для связи.
Личный кабинет: Встречи, вебинары, визитки
Операционный центр участника, куда стекаются все сценарии нетворкинга.
Основные инструменты для нетворкинга — возможность обмениваться контактами и устраивать созвоны внутри. Из календаря можно инициировать запрос на видеозвонок и увидеть его отдельно в виде списка входящих/исходящих запросов — по логике, близкой к почтовому клиенту.
Механика обмена контактами: запрос визитки, ответный обмен, статус запроса, фильтрация по типу партнёра — тот самый мостик между байером и селлером, переведённый в конкретное действие в интерфейсе.
Кабинет компании и Профиль нетворкинга
Заполнение информации которая и будет отражаться на стенде компании.
Изначально заказчики хотела включить заполнение профиля нетворкинга в флоу регистрации. А для этого нужно собрать много данных — но большая форма регистрации на входе убивает конверсию. Либо пользователей игнорировал поля и страница нетворкинга была бы усыпана полупустыми стендами.
Решение — разделение общей регистрации на выставку и регистрации в каталоге на два отдельных шага. Чат с отдельный поток заявок с датами и статусами — когда контакты сразу перерастает в предметный запрос на туристический продукт.
Личные данные, Баллы и рейтинг
Страница активности с начислением баллов за действия в системе и историей — элемент вовлечения, подталкивающий пользователя возвращаться и быть активным в каталоге, а не просто зарегистрироваться и пропасть.
Контактные данные, смена пароля, локализация (переключение языков), статус нетворкинга — стандартный, но многосоставной хаб настроек, интегрированный с тем же деревом состояний профиля.
Онлайн-встречи и видеозвонки
По сути внутренний аналог Zoom/Skype, встроенный прямо в систему. Поверх каталога и контактов система предлагала провести саму встречу, не выходя за пределы платформы.
Отдельным потоком спроектировано назначение встречи: выбор доступного слота в календаре, форма запроса, состояния модерации/подтверждения. Пользователь предварительно резервирует слоты, в которые готов встречаться, — и другие участники видят и занимают именно эти слоты, а не произвольное время.
Трансляция
Broadcast-модуль обслуживал деловую программу самой выставки — вебинары, панельные дискуссии, презентации курортов и продуктов. Логика и наработки, использованные для внутренних вебинарных инструментов компании, были переиспользованы здесь
Спроектирована матрица состояний:
- по времени: до трансляции / трансляция идёт / трансляция завершилась;
- по регистрации: пользователь зареган на сессию / не зареган;
- по наличию контента: чат открыт / закрыт, запись уже доступна / пока нет;
- по функциональности: версия с возможностью задавать вопросы спикеру в живом чате и версия без неё.