Разработка личного кабинета RFMODELS: внутренний веб-сервис для управления подбором 200+ моделей
Собрали для RFMODELS внутренний сервис для менеджеров, который заменил Mediaslide и закрыл главную боль модельного бизнеса: быстро работать с огромными объемами фото/видео без ручной рутины в файлах и держать всю информацию по статистике и клиентам в одном месте.
Что мы сделали
Чтобы было понятно по масштабу, а не на словах: в базе уже 200+ моделей, и менеджеры собирают примерно 500 подборок в месяц. Это рабочее место сотрудников агентства, где есть 3 критичных процесса: модели → подборки → клиенты, а в системе над единой базой ежедневно работает до 10 менеджеров. И мы с нуля собрали личный кабинет, заточенный специально под процессы бизнеса.
Таск: сделать свой аналог Mediaslide на стороне клиента. Управляемый, кастомизируемый, разработанный под реальные процессы агентства и связанный с внешним сайтом так, чтобы изменения по моделям и портфолио оперативно отражались на сайте.
Солюшен: погружение в процессы менеджеров и правила букинга / ресерч конкурентов и валидация гипотезы на этапе прототипов (CJM и User Flow) / проектирование пользовательских сценариев / проектирование структуры и UX админ-панели / UX/UI дизайн веб-сервиса и адаптив / реализация ядра: подборки, модели, медиа, композитки, клиенты, настройки для суперадмина / механика контроля контента сайта.
Фичи:
медиа грузятся один раз в карточку модели, дальше подборки собираются из базы (без повторной загрузки каждый раз);
Packages со статусами Sent / Opened / Clicked / Draft и статистикой выбора Selected / Rejected / Viewed;
гибкое управление портфолио: мультизагрузка, drag&drop порядок, Default/Website фото;
композитки в PDF A4 как продуктовая фича;
дашборд со статистикой по периодам и ролям (у суперадмина — глобально, у менеджера — по своим действиям).
Главный результат разработки для RFMODELS не в том, что появилась еще одна платформа с файлами. Выгода в том, что команда ушла от ограничений Mediaslide: примитивной фильтрации, бедной подачи подборок и ручного ведения статусов, и начала тратить время на то, что приносит выручку: качественную подборку и скорость ответа клиенту.
Любую рутину можно и нужно автоматизировать. Если у вас все материалы в папках, чатах и «перешли все фото еще раз», проблема обычно не в сотрудниках. Проблема в том, что инструменты не поддерживают процесс. Здесь мы как раз собрали систему, которая основана на процессе работы в компании.
говорит Head of PM
ПОГРУЖЕНИЕ В ОПЕРАЦИОНКУ: С ЧЕГО НАЧАЛИ, ЧТО УВИДЕЛИ
RFMODELS — крупный игрок рынка, у которого ошибка в управлении портфолио стоит дорого: не только времени менеджера, но и качества выбора клиента. До проекта агентство работало через Mediaslide (который по ощущениям застрял где-то в 00-х), как единую базу моделей для букинга и отправки портфолио, но сервис уперся в 3 ограничения:
нельзя кастомизировать под процессы агентства;
стоимость перестала оправдываться на масштабе;
появились ограничения доступа/оплаты (зарубежный сервис, VPN/санкционные риски).
Чтобы сделать не просто админку, а рабочий инструмент под реальные задачи RFMODELS, мы начали с базы: как менеджеры живут, где они теряют время и почему даже хороший внешний сервис не закрывает операционку для B2B.
Что взяли за основу:
Вводные от команды и заказчика: кто с кем взаимодействует, как собираются подборки, где ломается процесс, что критично по медиа и скорости.
Аналитику рынка и визуальные референсы: собрали шортлист из 35+ сайтов агентств и паттернов (от структуры карточек до поведения галерей и видео на мобилках).
Тестирование логики еще на прототипах с менеджерами. Для этого были разработаны, как и для внешнего многостраничного сайта, high-fidelity интерактивные прототипы. Наглядно всегда проще обсуждать и понимать друг друга, особенно, когда речь идет о многоуровневом сервисе.
У сервиса два слоя аудитории:
Внутренняя команда RFMODELS. Букеры и менеджеры, которые делают подборки, ведут карточки моделей, общаются с клиентами. Плюс медиа-отдел, который живет в контенте и хочет, чтобы ничего не лагало.
Внешние клиенты агентства. Фотографы, стилисты, бренды, продакшены. Они не видят админку, но именно для них собираются подборки и от их действий зависят статусы Opened/Clicked и финальный выбор.
Главный инсайт погружения
В модельном бизнесе контент — не украшение. Это продукт. Поэтому ключевой фокус разработки личного кабинета был не на редких сценариях, а на потоке: база на несколько сотен моделей и в среднем по несколько десятков подборок отправляется клиентам ежедневно.
3 ОСНОВНЫХ СЦЕНАРИЯ, ВОКРУГ КОТОРЫХ СОБРАЛИ СЕРВИС
На главную, как в дашборде, поместили статистику: количество созданных менеджером подборок, и количество подборок, просмотренных получателями. Пользователь может выбрать период, за который считается статистика. Справа диаграмма, которая показывает конверсию, чтобы менеджеры работали data-driven, а не на ощущениях.
Ниже общая по всем менеджерам информация: количество созданных в системе клиентов и число загруженных в систему моделей, чтобы все менеджеры оставались в одном инфополе. Еще ниже блок с бесконечным скроллом — новости. Здесь отображаются все последние обновления системы:
Новости по моделям (модель добавлена / удалена / заархивирована / перемещена из архивирована / загружены новые фотографии);
Новости по подборкам (подборка создана / удалена);
Системные уведомления.
А для внутренних разделов собрали отдельные User Flow вокруг 3 ежедневных сценариев.
Сценарий 1. Подборка как главный рабочий цикл
Как это устроено в жизни: менеджер собирает подборку, отправляет клиенту, клиент выбирает моделей, дальше начинается личная коммуникация для финализации букинга.
предпросмотр, чтобы менеджер видел подборку глазами клиента еще до отправки;
статусы Draft / Sent / Opened / Clicked и статистика Viewed / Selected / Rejected, чтобы иметь полное понимание картины.
Сценарий 2. Модель и медиа как единый источник правды
Решение в UX логике: фото и видео загружаются один раз в карточку модели, дальше менеджер просто собирает подборки из готовой базы. Это резко снижает рутину и риск ошибок.
Чтобы эта логика работала системно, мы сделали:
мультизагрузку и организацию портфолио, включая порядок drag and drop;
флаги Default/Website, чтобы управлять тем, что актуально для сайта и что лучше работает как обложка;
композитки в PDF A4 как отдельный быстрый сценарий, а не как ручную сборку файла
Сценарий 3. Клиенты и контроль взаимодействий
Клиентская база нужна, чтобы:
быстро находить компанию и контакты;
видеть статус «новый клиент» 72 часа, пока контакт максимально горячий.
Мы сознательно упростили структуру после прототипов и еще раз упростили ее на этапе разработки: в ежедневной работе у менеджера нет времени разбираться в длинных подсказках и большом количестве кнопок. Поэтому UX строили вокруг скорости, предсказуемости и понятных состояний элементов.
РАЗДЕЛ ПЕРВЫЙ. ПОДБОРКИ
Подборки в RFMODELS — это не письмо с фотками. Это основной продуктовый поток: менеджер собирает пакет, отправляет, клиент открывает и выбирает. И все это должно быть видно в системе без созвонов и уточнений.
Чтобы выдерживать темп в полтысячи подборок каждый месяц, мы превратили Packages в отдельный раздел личного кабинета с логикой статусов, метрик, отдельными вкладками, ресендом, сохранением черновиков, статистикой и удобной сборкой.
Лента подборок: контроль, поиск, статусность
В списке подборок менеджер видит все, что важно для управления процессом:
статусы подборок Draft / Sent / Opened / Clicked;
поиск и фильтры по названию, компании, модели, создателю и времени;
отдельный список черновиков Drafts, чтобы не терять незавершенные подборки;
понятный приоритет статуса при нескольких получателях: общий статус всегда считается по самому позитивному действию.
Это мелочь, но она убирает все вопросы. Менеджер сразу видит, где тишина, а где клиент уже вовлечен.
Создание подборки: пошаговый flow и предпросмотр
Мы сделали сборку подборки предсказуемой и быстрой всего в 4 шага, которые можно заполнять в любом удобном порядке или пропустить ненужные в данный момент: выбор моделей из базы, выбор получателей, текст и детали отправки, предпросмотр, чтобы менеджер видел итог глазами клиента.
Плюс важная для темпа вещь: порядок моделей можно менять, в том числе через drag and drop. Это значительно ускоряет работу, так как менеджерам в этой нише всегда проще работать с наглядным представлением информации, чем с жестким последовательным заполнением полей, где страшно ошибиться, чтобы не начинать все с начала.
Среднее время сборки около 50 минут, и на него влияет не интерфейс, а качество выбора фото самим менеджером. Поэтому задача UX здесь была не «ускорить до 2 минут», а убрать все лишние движения вокруг медиа и отправки.
Внутри подборки: статистика и действия
Внутри каждой подборки менеджер получает управляемость:
статистика по моделям и действиям клиента: Viewed / Selected / Rejected;
вкладка с получателями и возможностью отправить повторно с доработками;
вкладки Models, Agency info, Message, чтобы вся история была в одном месте.
Именно эта часть делает процесс контролируемым.
РАЗДЕЛ ВТОРОЙ. КАРТОЧКИ МОДЕЛЕЙ
Если Packages — это поток, то Models — это база данных. Тут есть все параметры, портфолио и то, что в конечном счете покупает клиент. В RFMODELS база уже на 200+ моделей, и в такой системе нельзя позволить себе дубли, разные версии одних и тех же фото.
Каталог моделей: скорость и порядок
Список моделей построен так, чтобы менеджер за секунды находил нужного человека:
активные и архивные модели, архивирование и восстановление;
фильтрация по параметрам и категориям (начиная от пола, роста и возраста, заканчивая локацией, цветом глаз, волос и всеми возможными мерками);
алфавитная навигация и быстрый поиск.
Внутри портфолио мы предусмотрели:
мультизагрузку и управление порядком;
флаги Default pic и Website pic, чтобы контролировать обложки и то, что уходит на внешний сайт;
работу с видео, чтобы карточка оставалась удобной и управляемой.
Композитки: PDF A4 из базы, а не ручная верстка
Композитка — это обязательный артефакт в индустрии (лучшие фотографии, параметры и контакты модели на профессиональной визитной карточке), но часто ее собирают каждый раз заново или в неудобных инструментах по частям.
Мы встроили генерацию композитной карточки как быстрый сценарий прямо в личном кабинете: менеджер выбирает фото, данные подтягиваются из базы, на выходе получается готовыйA4 PDFпод печать или отправку буквально за минуту (нужно лишь выбрать 5 фото для отображения).
Меньше ошибок и потерь контента, быстрее сборка подборок, стабильнее качество презентации моделей клиенту. Это и есть смысл кастомной разработки под бизнес: не просто повторить Mediaslide, а выстроить систему под свои процессы, свою нагрузку и свой темп.
РАЗДЕЛ ТРЕТИЙ. ПОРЯДОК В КОНТАКТАХ И УПРАВЛЕНИЕ ДОСТУПОМ
Подборки и модели не работают в вакууме. Нужна клиентская база, чтобы менеджер не искал контакты по перепискам, а суперадмин мог держать систему в руках: кто работает, кому что доступно, куда уходят заявки с сайта.
Клиенты: быстро найти, быстро добавить, не терять горячих
Модуль Clients сделали прагматичным, отображаем только то, что реально нужно под подборки и коммуникации:
поиск по компании и контактам, включая телефон и email;
карточка клиента с несколькими контактами;
сортировки и понятная структура;
метка «новый клиент» на 72 часа, пока лид максимально горячий и важно не потерять момент.
Для операционки это критично: менеджер не тратит время на поиск, а процесс «подборка → клиент → выбор» держится в одном месте.
Суперадмин: доступы, порядок и настройки, которые не должны зависеть от разработчика
В продукте есть роль суперадмина, потому что система должна быть управляемой внутри агентства:
создание админов, включение и отключение доступов (самостоятельно зарегистрироваться в системе в качестве менеджера не получится);
управление настройками панели;
настройки обработки заявок с сайта, включая распределение разных типов заявок на разные email.
ПРОДУКТОВЫЙ ДИЗАЙН В СТИЛЕ БРЕНДА: 106 ЭКРАНОВ ПО 5 БРЕЙК-ПОИНТОВ
Админ панели часто делают по остаточному принципу. Мы сделали наоборот: интерфейс должен поддерживать ежедневную работу, быть легким, предсказуемым и современным. Особенно когда внутри много медиа и менеджер проводит в системе часы. Поэтому UX/UI дизайн веб-сервиса строили вокруг скорости.
Две версии структуры и цветовые итерации
Мы прошли один большой пересбор структуры после прототипов и еще чуть упростили интерфейс на этапе разработки. Причина простая: менеджеру нельзя заставлять думать над интерфейсом, когда он собирает десятки подборок каждую неделю.
Для каждой страницы личного кабинета мы отдельно прорисовали адаптивные экраны. Причем не только для десктопа и телефона, как это часто делают. Создали по 5 версий макетов для каждой страницы: ширины на 360, 576, 992, 1250 и 1920 пикселей, чтобы учесть все брейкпоинты и менеджеры могли удобно работать с системой на любом устройстве.
А всего для личного кабинета в дизайне было разработано 106 страниц, не считая адаптивные макеты к ним, и 8 UI-китов для ховеров, error, disabled и других состояний всех интерактивных элементов для отдельных разделов.
Поскольку личный кабинет рассчитан на внутреннее ежедневное использование сотрудниками компании, приоритет в дизайне мы отдавали функциональности, чистоте и читабельности. В первую очередь протестировали концепции в более нейтральных и спокойных цветах: синий, зеленый — они когнитивно не перегружают + на уровне психологии воздействуют более позитивно и мягко, чем оттенки красного.
Но в конечном итоге по просьбе заказчика пересобрали дизайн таким образом, чтобы он больше соответствовал стилистике сайта и ощущался частью одного бренда. Пришли к выводу, что бордовый цвет будем использовать только для акцентов, так как на кнопках он смотрится как сигнал об ошибке или безвозвратном действии. Остановили внимание на черном и бежевом — получился стильный и юзабельный контраст.
ИНЖЕНЕРИЯ ПОД НАГРУЗКУ: ОПТИМИЗАЦИЯ ЗАГРУЗКИ
В RFMODELS разработка личного кабинета и админ-панели упирается не в формы и таблицы. Упирается в медиа. Много фото, видео, частые операции. Поэтому мы проектировали и собирали сервис как продукт, где производительность и удобство — это часть бизнес-логики.
Оптимизация фото и контроль веса. Основной упор делали на огромный объем памяти для медиафайлов, соответственно оставались минимальные расходы на остальные ресурсы сервера. Нашим разработчикам пришлось потратить немало времени на профилирование логики и оптимизации запросов к базе данных. Не менее важной была и скорость загрузки всех этих изображений и видео. Под это мы подготовили отдельную механику оптимизации и сделали кастомный скрипт сжатия фотографий, чтобы уменьшить вес изображений в среднем на 20%.
Важно: мы не раскрываем детали безопасности и инфраструктуры, но логика подхода прозрачная. Мы уменьшали вес там, где это не бьет по качеству портфолио, и оставляли максимальную детализацию там, где это критично для индустрии.
Сервис не должен жить отдельно от маркетинга: если модель архивирована, обновлена или изменен состав портфолио, изменения должны отражаться на сайте без ручного обновления. Поэтому в процессе разработки сразу заложили связку панели с внешним сайтом и контент-контроль из админки.
Авторизация и безопасность стандартная: вход по email и паролю, с поддержкой двухфакторной аутентификации, восстановление пароля через email. А для усиления безопасности добавили подтверждение входа при авторизации с нового устройства через отправку кода на почту.
Ключевая статистика (конверсия по откликам и динамика количества клиентов и моделей) на дашборде рассчитывается по отдельным формулам. А количество подборок по периодам и их просмотры отображаются для каждой роли индивидуально. Суперадмин же видит статистику по всем менеджерам.
Суперадмину доступно создание и управление администраторами (активация/деактивация), управление почтовыми настройками для входящих заявок и глобальная статистика по всем администраторам агентства.
В ИТОГЕ RFMODELS ПОЛУЧИЛ НЕ ПРОСТО АДМИН-ПАНЕЛЬ, А ЛИЧНЫЙ И УПРАВЛЯЕМЫЙ ВЕБ-СЕРВИС, КОТОРЫЙ ОБРАБАТЫВАЕТ 200+ МОДЕЛЕЙ В БАЗЕ И ОКОЛО 500 ПОДБОРОК В МЕСЯЦ, ЧТОБЫ РАБОТА С ПОРТФОЛИО, КЛИЕНТАМИ И СТАТИСТИКОИ БЫЛА БЫСТРОЙ, ПРЕДСКАЗУЕМОЙ И ОТВЕЧАЛА ВСЕМ БИЗНЕС-ПРОЦЕССАМ.
Кейсы
Неделя рекламы 
Новости 
How to 
Интервью и дискуссии 
Маркетинговые исследования 
Просто о сложном 
Энциклопедия обмана 
Проверено ADPASS 
Рекламные кампании 