Превратили сайт модельного агентства RFMODELS в инструмент доверия и заявок

RFMODELS — одно из крупнейших модельных агентств России. За 8 лет работы они накопили солидное портфолио (200+ моделей) и лояльных клиентов из мира моды, бьюти-индустрии и рекламы. Но их старый сайт перестал быть инструментом, превратившись в цифровое хранилище. Он не отражал уровня агентства и, что важнее, не работал на бизнес-процессы.

Контекст и боль

Представьте: вам нужно срочно найти модель для съемки. Вы открываете сайт агентства и видите стандартную сетку с фотографиями. Бесконечный скролл, нет системы, непонятно, как быстро получить конкретную модель или подборку. Клиенты RFMODELS — креативные директора, продюсеры, бренд-менеджеры — ценили вкус и скорость. Старый сайт не давал ни того, ни другого. Он был просто каталогом, одним из сотен.

Клиент пришел с четким запросом: сделать сайт, который будет работать как полноценный бизнес-инструмент. Не красивая, но бесполезная галерея, а эффективная система для двух ключевых сценариев:

1) Быстро найти и забронировать конкретную модель.

2) Легко отправить ТЗ менеджеру и получить персональную подборку.

Вызовы, которые усложняли все

1) Визуал vs. Конверсия. В модельном бизнесе фото — это продукт. Сайт должен был выглядеть как обложка глянца, но вести по сценарию как функциональный сервис. Малейший перекос — и получаем либо арт-объект без действий, либо скучный каталог.

2) Гигантский объем медиа. 200+ моделей, у каждой — десятки, а то и сотни фото и видео. Сайт должен был оставаться легким и быстрым, не проседая по скорости загрузки.

3) Две разные аудитории. Опытные клиенты, которые знают, кого хотят, и новички, которые ищут «модель под задачу». Нужно было закрыть потребности и тех, и других, не перегружая интерфейс.

Коротко о главном: что нужно было сделать?

Превратить устаревший каталог в презентационно-конверсионный хаб, который:

— Сразу вызывает доверие своим уровнем.

— Позволяет за 3 клика найти модель или связаться с букинг-менеджером.

— Автоматически справляется с огромным потоком контента.

— Работает одинаково эффективно для модного дома, запускающего показ, и для маленького бренда, ищущего лицо для рекламы.

Вызов принят.

Мы не стали сразу рисовать «красиво». Вместо этого мы взяли за основу принцип сначала логика, потом — глянец. Наша задача была не в том, чтобы просто обновить картинки, а в том, чтобы перепроектировать ядро сайта под реальные бизнес-сценарии агентства.

Наш подход: от исследований к системе, от системы — к прототипам.

Мы разобрали по полочкам, как думают, ищут и принимают решения креативные директора, продюсеры и букинг-менеджеры. Провели глубокий анализ аудитории, построили Customer Journey Map и выделили два ключевых пути:

1) «Знаю имя» — нужен сверхбыстрый поиск и удобное портфолио.

2) «Знаю задачу» — нужен понятный вход в коммуникацию с менеджером.

Все, что не работало на эти сценарии, мы безжалостно выносили за скобки. Только после этого мы взялись за дизайн и разработку, создав не сайт, а точный цифровой интерфейс для модельного бизнеса.

Что было критически важно?

– Сайт должен за 3 секунды показать уровень агентства.

– Пользователь за 15 секунд должен найти свой сценарий.

 – И за 60 секунд — совершить целевое действие.

Именно вокруг этой скоростной логики мы и выстроили всю архитектуру проекта. Дальше — рассказываем, как именно мы это сделали, разбив процесс на ключевые этапы.

Сколько времени у вас уходит, чтобы понять, подходит ли вам агентство? 5 секунд? 10?

Мы узнали у самих заказчиков RFMODELS — креативных директоров, продюсеров, бренд-менеджеров — как они ищут модели и что им мешает. Оказалось, что классический каталог с фильтрами по росту и цвету глаз почти не работает. Вместо этого есть два реальных сценария:

Сценарий №1: «Я знаю её имя»

Клиент приходит за конкретной моделью. Ему нужно:

— Найти её за 2 клика,

— Пролистать портфолио без задержек,

— Увидеть не только фото, но и видео, снепы, композитки,

— Сразу понять, свободна ли она на нужную дату.

Сценарий №2: «У меня задача, а не имя»

Клиент не хочет копаться в сотнях карточек. Он:

— Скидывает ТЗ менеджеру,

— Ждёт подборку «под ключ»,

— Выбирает из готового,

— Обсуждает детали уже в личном общении.

Главный инсайт:

Больше 50% клиентов возвращаются снова. Значит, сайт должен работать не только на первое впечатление, но и на повторные быстрые заказы.

Что мы сделали:

Провели интервью, построили CJM (карту пути клиента), выделили точки принятия решений и точки сомнения.

Нашли, где клиенты спотыкались на старом сайте:

— Нет возможности забукировать сразу несколько моделей,

— Неясно, как отправить ТЗ,

— Карточки моделей недостаточно информативны.

Мы получили не просто портрет аудитории, а карту их действий и мыслей. Это стало чек-листом для всего проекта: если элемент не помогает в одном из двух сценариев — его не добавляем в прототип.

Дальше нужно было превратить эти сценарии в рабочий прототип, который можно пощупать руками.

Итак, у нас на руках были карты сценариев и четкое понимание, что нужно двум разным типам клиентов. Самое время превратить схемы во что-то осязаемое. Мы пошли по пути prototype-first — создали высокодетализированные, кликабельные прототипы всего сайта.

Зачем? Чтобы спорить не о вкусе, а о путях.

Вместо того чтобы показывать заказчику и фокус-группе статичные картинки и спрашивать «нравится?», мы дали им полноценный симулятор сайта. Без финальных цветов и фото, но со всей структурой, текстами кнопок и работающими переходами. Задача была одна: пройти по двум главным сценариям, найти слабые и места и исправить до того, как всё перейдёт на этап дизайна и разработки.

Что было в прототипе:

Полная логика всех страниц и карточки модели: как переключаются фото, где появляются якоря на снепы, как ведет себя кнопка «Забронировать». Путь от главной до отправки ТЗ менеджеру — все шаги, все поля форм.

Как тестировали:

Подключили через команду RFMODELS реальных представителей их ЦА. Дали задачи: найти модель, связаться и т.д. Смотрели, как они ищут, где кликают, где зависают взглядом, где начинают «тыкать» в неактивные элементы в надежде, что это кнопка.

Что выяснили (спойлер: это было ценно):

– В карточке модели все хотели видеть снепы и видео сразу, а не искать их в отдельной вкладке.

– После отправки заявки люди испытывали легкую растерянность: «а что теперь?». Нужен был четкий фидбек.

Итог этапа:

Мы отшлифовали логику до блеска еще до того, как нарисовали первую картинку. Это сэкономило кучу времени и денег: правки на уровне прототипа в разы дешевле правок в готовой верстке. У нас появился выверенный скелет, на который можно было без страха наращивать «мышцы» дизайна.

Дальше стояла самая вкусная задача: как превратить эту четкую логику в визуал, который выглядит премиально, но не усложняется функциональность.

Идеальный прототип есть. Теперь — самый сложный фокус: сделать так, чтобы сайт выглядел как обложка Vogue, но работал как швейцарские часы. В модельном бизнесе визуал — это не украшение, а часть продукта. Значит, каждая пиксель должен говорить о качестве, но при этом не мешать действию.

Наша задача: создать дизайн-систему, которая будет единой для всего сайта, выдержит тонны контента и не превратится в арт-хаос.

Как рождался стиль: три концепции первого экрана

Мы не стали рисовать один вариант. Вместо этого наша лид-дизайнер подготовила три принципиально разных подхода к первому экрану — чтобы выбрать направление, которое станет ДНК всего сайта.

1) Горизонтальный кадр и вытянутая типографика. Четкий ритм, крупная фотография, название как элемент композиции. Сразу чувствуется модный бренд с историей.

2) Прямой оммаж обложке журнала. Лицо модели, вписанное в заголовок. Максимально про fashion-индустрию, но требует идеального фото.

3) Абстрактные премиальные 3D-рендеры. Фигуры из розового золота, футуризм, никаких лиц. Смело, нешаблонно, но рискованно.

Клиент выбрал первую концепцию — за ее баланс элегантности и четкости. Именно она задала тон всей дальнейшей работе.

Съемка специально для сайта: красная перчатка как акцент

Когда концепция утверждена, становится ясно: фото на главной не может быть случайным. Наш дизайнер, имеющий опыт в фотографии, подготовила ТЗ для отдельной съемки. Нужно было оставить чистое пространство для типографики, задать нужное настроение.

В итоге сняли кадр с девушкой-моделью и… красной перчаткой. Эта деталь стала визуальным якорем всего проекта. Красный перешел в акцентный цвет интерфейса и связал все страницы в единое целое.

Дизайн-система: журнальная верстка для бизнеса

Дальше мы разнесли стиль первого экрана по всем страницам. Наша система держалась на трех китах:

1) Журнальный ритм и воздух. Мы играли масштабами шрифтов, оставляли поля, выстраивали композицию как в глянцевом журнале. Но каждый красивый блок мы проверяли вопросом: помогает ли это двигаться по сценарию? Если нет — упрощали.

2) Конверсия, встроенная в интерфейс. Никаких кричащих баннеров. Кнопка «Забронировать» превращалась в липкий элемент при скролле в карточке модели. Формы захвата появлялись в нужный момент. Микровзаимодействия (как кнопка меняется после клика) были продуманы до мелочей.

3) Живой, но управляемый визуал. Мы знали про 200+ моделей и тысячи фото. Поэтому дизайн был таким, чтобы он не ломался от нового контента. Слайдеры, плитки, сетки — все подстраивается автоматически.

У нас есть прототип, который прошёл огонь и воду. У нас есть дизайн, от которого мурашки. Теперь нужно превратить это в живой, дышащий сайт, который не упадёт под нагрузкой в 200+ моделей и тысячи медиафайлов.

Наш стэк: React для скорости, WordPress для удобства наполнения сайта командой заказчика.

Мы выбрали гибридный подход.

– React отвечает за всю динамику на фронтенде: быстрые переходы, интерактивные слайдеры, мгновенный поиск и фильтры. 

– WordPress стал мощной системой для команды агентства. Загружать новые портфолио, обновлять снепы, управлять порядком моделей — всё это делается в интуитивной админке без единой строчки кода.

Карточка модели

Это сердце сайта. Здесь сошлось всё: глянцевый дизайн, тонны контента и жёсткие требования к юзабилити.

Что должно работать безупречно:

1) Два режима просмотра: плавный слайдер для погружения и плитка для быстрого поиска нужного кадра.

2) Умные якоря: кнопки на снепы и композитку появляются только если контент есть. 

3) Липкая панель с действиями: когда пользователь скроллит вглубь портфолио, кнопка «Забронировать» всегда под рукой. Не нужно проматывать всё назад.

4) Контекст: выйдя из карточки, пользователь возвращается в каталог на то же место, с теми же фильтрами.

И всё это — с идеальной отзывчивостью на мобильных. Мы десять раз прогнали каждую анимацию на разных устройствах.

Анимируем не для красоты, а для смысла

Анимации на GSAP — это про эмоциональный опыт пользователей. Плавные появления блоков, естественные переходы между страницами, микроинтеракции кнопок. Всё работает для одной цели: вести пользователя по сценарию, делая путь не только понятным, но и приятным.

Формы

Мы настраиваем не просто сбор данных, а процессы.

– Анкета для моделей — это 5 коротких шагов с обязательной загрузкой снепов. Это отсекает случайные заявки, собирает данные в одном формате и экономит время букинг-менеджеров.

– Система подборок для клиентов — это отдельный личный кабинет. Клиент видит подобранные варианты, ставит лайки, оставляет комментарии прямо на сайте. Менеджер видит выбор и финализирует детали уже в переписке.

– Заявки летят сразу на нужную почту — без лишних действий в админке.

Теперь сайт — полноценное звено в цепочке работы агентства.

Когда мы запустили сайт, финальным тестом стали не наши оценки, а первые рабочие дни команды RFMODELS. Главный вопрос был: изменится ли реальный процесс подбора моделей? Оказалось — да, и сразу.

Сайт, который закрывает возражения ещё до разговора

Мы сразу видим, как работает вшитое в UX доверие:

1) Для новых клиентов — уровень агентства понятен с первых секунд. Большие фото, журнальная верстка и продуманная структура отвечают на вопрос «Почему именно RFMODELS?» быстрее любого менеджера.

2) Для постоянных клиентов — скорость работы выросла в разы. Вместо долгой переписки с уточнениями, клиент за пару минут видит подборку через сайт, а менеджер уже видит предпочтения через систему лайков в личном кабинете (о нём расскажем в следующем кейсе).

3) Для моделей — анкета стала фильтром качества. Букинг-менеджеры получают структурированные заявки со всеми данными и снепами, что экономит часы на первичном отборе.

Ключевые фишки, которые теперь работают каждый день

1) Динамическая главная. За счёт куков пользователи каждый раз видят новые лица. Сайт живёт, даже когда его не обновляют вручную.

2) Карточка модели как исчерпывающее досье. Все материалы — от профессиональных фото до быстрых снепов — доступны в два клика. Это снимает 80% уточняющих вопросов по внешности и опыту модели.

3) Бесшовный переход от сайта к личному общению. Клиент не проваливается в вакуум после заявки. Форма говорит «спасибо» и возвращает на главную, а менеджер получает уведомление на почту. Процесс непрерывный.

Что в итоге получил бизнес

— Инструмент для первого контакта, который сам продаёт уровень агентства.

— Автоматизацию рутинных запросов на подборку и анкетирование.

— Единую и предсказуемую среду для работы с контентом (админка WordPress) и для пользователей (быстрый фронтенд на React).

— Сайт, который масштабируется вместе с агентством — добавление новых моделей и портфолио не ломает логику и дизайн.

Мы подошли к проекту системно: от CJM до кастомной разработки. Сайт для RFMODELS — это теперь единая экосистема, которая автоматизирует рутину для менеджеров и сокращает путь к решению для клиентов. За счёт детальной проработки сценариев мы вывели user experience на новый уровень, где визуал и функционал усиливают друг друга, а не конфликтуют. Результат — платформа, которая ежедневно генерирует качественные лиды и экономит десятки рабочих часов.