Как мы превратили сайт модельного агентства в инструмент доверия и заявок для RFMODELS
ЧТО МЫ СДЕЛАЛИ
Вместо классического имиджевого сайта мы, команда Ninen, спроектировали кастомную архитектуру корпоративного сайта, который решает сразу несколько задач бизнеса: презентацию агентства, подбор моделей, сбор заявок и поддержку внутренних процессов.
RFMODELS — одно из крупнейших модельных агентств РФ, работающее с брендами одежды, косметики, журналами и рекламными агентствами по всей России и за ее пределами. Агентство управляет базой из сотен моделей и ежедневно обрабатывает запросы на подбор и букинг под коммерческие и креативные съемки. К старту проекта прежний сайт перестал соответствовать задачам бизнеса.
Итак, наша задача заключалась не просто в редизайне. Нужно было создать полноценный корпоративный многостраничник, упаковать модельное агентство в современный, стильный и презентационный сайт, который одновременно работает на бренды и на будущих моделей. При этом сайт должен был выдерживать серьезную контентную нагрузку: базу из 200+ моделей с большим количеством фото и видео в каждой карточке, без просадок по скорости, UX и SEO. Речь шла не о косметическом редизайне, а о полноценном цифровом продукте, который можно масштабировать вместе с бизнесом.
Работу начали с брифинга и аналитики сценариев целевой аудитории. Мы переработали структуру и смыслы, заложили логику страниц и действий, а затем перешли к прототипированию под реальные сценарии использования. Отдельное внимание уделили дизайну: разработали визуальную концепцию в журнальной подаче и организовали съемку специально под сайт, чтобы визуал стал частью единой системы, которая удерживает баланс между эстетикой и удобством.
Далее проект перешел в кастомную разработку на связке React и WordPress. Мы настроили прямую отправку заявок на почту агентства, и подборок — на почты клиентов, проработали UX-детали поиска, фильтрации и сохранения контекста, а также заложили SEO-требования и индексацию страниц моделей.
Главный вызов: сохранить эстетику high fashion и не потерять конверсию в заявки. У модельных агентств всегда есть конфликт: дизайн должен быть эмоциональным и смелым, но пользователь приходит за прикладной задачей. Ему нужно быстро понять, кто подходит под съемку, открыть портфолио, посмотреть параметры и оставить заявку на букинг. Если в этой логике появляются лишние шаги, тяжелые загрузки или «красота ради красоты», конверсия падает, а доверие уходит к конкурентам.
Важно было сделать не просто красиво. В этом проекте важно было собрать сайт так, чтобы он работал как инструмент продаж и подбора, но при этом оставался fashion-продуктом по ощущению: дорогой, чистый, динамичный.
АнастасияМенеджер проектов
ЦЕЛЕВАЯ АУДИТОРИЯ И СЦЕНАРИИ: ОТ ПЕРВОГО КАСАНИЯ К ЗАЯВКЕ
Перед тем как переходить к дизайну и разработке, мы провели аналитику рынка, целевой аудитории и реальных сценариев взаимодействия с сайтом. В этом проекте было важно не «угадать» пользователя, а опереться на факты: кто именно заходит, с какой задачей и в какой момент принимает решение: продолжать взаимодействие или закрыть вкладку.
Основная аудитория сайта — это клиенты, которые берут моделей под коммерческие и креативные проекты в индустрии моды. По данным агентства, более 50% клиентов возвращаются повторно, а значит сайт должен одинаково хорошо работать как на первое касание, так и на быстрые повторные подборы. На основе маркетинговой аналитики и интервью с командой RFMODELS мы зафиксировали ключевые сегменты аудитории:
-
модные дома и дизайнеры, которые регулярно запускают коллекции и кампании;
-
модные журналы и издательства, включая digital-платформы;
-
PR и рекламные агентства, продакшн-студии и шоу-команды
Дальше мы разобрали, как именно эти пользователи ведут себя на сайте, и свели это в два базовых сценария, которые и определили будущий UX:
1. Клиент знает конкретную модель и хочет быстро проверить портфолио. В этом случае критичны поиск по имени, удобный просмотр фото, быстрый доступ к снэпам и видео, отсутствие лишних кликов.
2. Клиент ищет модель под задачу, но финальный выбор будет делать через менеджера. Здесь сайт работает как инструмент доверия: показать уровень агентства, эстетику, порядок в каталоге и дать простой шаг к заявке или подборке, не перегружая человека фильтрами.
Отдельно мы учитывали контекст: в премиальном сегменте любое усложнение интерфейса или просадка по скорости моментально бьет по доверию. Поэтому аналитика шла не только про «кто пользователь», но и про ограничения — большой объем визуального контента, мобильные сценарии и необходимость сохранить баланс между эстетикой и действием. Итогом этого этапа стала CJM-карта, где каждая функция и каждый экран были привязаны к конкретному пользовательскому сценарию, а не к абстрактным ожиданиям от «красивого сайта».
ДОВЕРИЕ КАК ЧАСТЬ ИНТЕРФЕЙСА: КАК МЫ ЗАШИЛИ В UX ОТВЕТЫ НА ВОЗРАЖЕНИЯ
На этапе аналитики стало понятно, что сайт редко используют как инструмент точного подбора по параметрам. Если клиент знает конкретную модель, он ищет по имени и быстро проверяет портфолио. Во всех остальных случаях логика другая: бренд или продакшн присылает ТЗ, а финальный подбор делает менеджер агентства. Это означало, что сайт должен уверенно работать в двух режимах одновременно — быстрый «проверить конкретную модель» и осознанный вход в процесс подбора через букера.
Мы дополнительно изучили рынок и собрали пул из более чем 50 сайтов конкурентов и аналогов, включая российские и международные агентства. Анализ показал, что большинство проблем кроется не в визуале как таковом, а в UX карточки модели, особенно на мобильных устройствах: либо фотографии слишком мелкие, либо просмотр превращается в бесконечный скролл без понятного следующего шага. Выигрывают не самые «красивые» сайты, а те, где есть система: продуманная типографика, понятная логика просмотра портфолио и аккуратные состояния интерфейса, которые не ломаются на адаптиве.
Дальше мы разложили ключевые возражения клиентов и начали закрывать их не текстами «в лоб», а структурой и логикой сайта.
-
Страх за профессионализм модели и результат съемки закрывается глубиной карточки: портфолио, снепы, дополнительные материалы и понятная навигация по ним.
-
Опасения по поводу сложности организации и коммуникации — прозрачным сценарием «подборка → выбор → менеджер», где сразу понятно, что сайт не заменяет живое общение, а упрощает первый шаг.
-
Возражения про стоимость и сравнение с фрилансом мы закрывали не скидками, а демонстрацией ценности агентства как системы, которая берет на себя риски и ответственность, вплоть до замены модели при необходимости.
-
А ситуацию «мы уже работаем с другим агентством» решали через общий уровень подачи: за короткий просмотр сайта должно быть очевидно, что у RFMODELS есть вкус, порядок и выстроенный процесс.
В итоге доверие стало не отдельным блоком или лозунгом, а частью UX. Сайт не убеждает напрямую, а последовательно снимает вопросы и снижает тревожность клиента ровно в тех точках, где обычно принимается решение — продолжать взаимодействие или искать дальше.
СНАЧАЛА СЦЕНАРИИ, ПОТОМ ВИЗУАЛ: PROTOTYPE-FIRST ПОДХОД
К прототипированию мы перешли только после того, как зафиксировали CJM и проверили гипотезы по функциям, которые действительно нужны пользователю. В аналитике стало ясно, что сайт RFMODELS должен поддерживать всего два ключевых сценария:
-
быстрый поиск конкретной модели,
-
и вход в коммуникацию через букера.
Поэтому мы сознательно отказались от сложных разветвлений и перегруженных маршрутов. Пользователю важно либо сразу попасть в каталог, либо за несколько секунд понять, куда писать и какой следующий шаг.
На этом этапе мы сделали high-fidelity кликабельные прототипы — интерактивные и максимально близкие к финальному продукту. Без финальных цветов и шрифтов, но уже с реальным контентом, текстами кнопок и логикой кликов.
Такой подход сильно упрощает согласования: вместо обсуждения вкуса мы проверяем сценарии на действиях и сразу видим, где пользователь теряет контекст. В премиальных нишах это критично, потому что визуал легко может «съесть» логику.
Для валидации мы подключили представителей целевой аудитории через команду RFMODELS. Пользователи проходили типовые задачи: найти конкретную модель, оценить портфолио, понять, как перейти к подборке. Мы фиксировали вопросы, возражения и точки потери внимания, после чего точечно правили структуру, микро-тексты и логику действий. И только после этого переносили решения в дизайн и разработку.
СТРУКТУРА МНОГОСТРАНИЧНОГО САЙТА КАК ЕДИНЫЙ ПОЛЬЗОВАТЕЛЬСКИЙ МАРШРУТ
В результате прототипирования сложилась четкая структура многостраничника, где каждая страница решает свою задачу и встроена в общий маршрут пользователя.
1. Главная собрана не как приветственный лендинг, а как витрина с видео и каталогом, в который можно провалиться за секунды. Здесь одновременно работают несколько задач: доступ к каталогу моделей с категориями и поиском по имени, понятный контакт через модальную форму без перегруза и ощущение живого контента. Блоки соцсетей и «Лица» обновляются динамически: в админке загружается большой пул материалов, а пользователь при каждом заходе видит новую выборку.
2. Карточка модели — конечная точка выбора. Здесь сосредоточены UX-механики, которые удерживают внимание и не ломают путь к заявке: слайдер с неограниченным количеством фото и видео, переключение в плитку, кнопки на снепы и композитку, а также фиксированная кнопка Book model, которая остается под рукой при скролле.
3. Отдельные страницы доверия и процесса усиливают общее впечатление и снимают возражения. Страница «Клиенты» показывает уровень агентства через кейсы и визуал. «Об агентстве» собирает прогрев: лица, новости, логотипы клиентов и команду. «Контакты» убирают анонимность — контакты разбиты по категориям и сопровождаются реальными фотографиями менеджеров, а переход к анкете модели всегда доступен из нижней части экрана в закрепленном блоке. Страница «Стать моделью» построена как понятный путь из пяти коротких шагов, что помогает собрать данные в едином формате и отсечь сырые заявки.
4. Дополнительно мы заложили страницу для клиентов агентства, где отображается отправленная подборка и где клиент может отметить понравившиеся модели. Эта связка стала важным мостом между презентацией сайта и реальной операционной работой агентства.
КАК ПЕРВЫЙ ЭКРАН ЗАДАЕТ УРОВЕНЬ ВСЕГО ПРОДУКТА
В этом проекте первый экран был не «красивой обложкой», а точкой, где решается главный вопрос клиентов RFMODELS: уровень соответствует или нет.
В нише модельного бизнеса доверие формируется мгновенно — бренд, продюсер или креативный директор открывает сайт и за несколько секунд понимает, перед ним агентство с насмотренностью и системой или очередной каталог «плиточкой».
Поэтому первый экран должен был задать визуальный код всему сайту, но при этом не ломать сценарий и не перегружать страницу.
Мы пошли по базовой схеме Ninen, которая хорошо работает в премиальных проектах. Сначала лид-дизайнер подготовил три принципиально разные концепции первого экрана, чтобы заказчик выбирал не детали, а направление, вокруг которого дальше собирается весь продукт. При этом у RFMODELS были четкие рамки, которые напрямую влияли и на визуал, и на UX:
-
светлая нейтральная палитра без темных тонов;
-
крупное и читаемое название агентства;
-
много воздуха и спокойная композиция.
Источником вдохновения стали не абстрактные референсы, а логика обложек глянцевых журналов. Дизайнер анализировал приемы, которые в модной индустрии давно доведены до автоматизма: как работает воздух, как человек вписывается в композицию, как типографика не спорит с фотографией, а направляет взгляд и задает ритм. В итоге подготовили три концепции с разным характером и ощущением бренда:
-
Вытянутая типографика. Название агентства становится частью композиции, создавая ощущение модного бренда и визуального ритма.
-
«Журнальная» обложка. Лицо модели встроено в заголовок, а типографика работает как элемент изображения, усиливая fashion-подачу.
-
Абстрактные 3D-фигуры. Нешаблонное решение с футуристичным вайбом, показывающее, что нишу можно упаковать без клише каталогов моделей.
Заказчик выбрал первую концепцию — с горизонтальным снимком и вытянутым названием. Этот формат заголовка лёг в основу обновлённого лого. И именно здесь стало понятно, что случайное фото из архива не сработает. Если первый экран держит на себе весь визуальный язык сайта, изображение тоже должно быть сделано под задачу. Поэтому мы подготовили подробное ТЗ на съемку и помогли заказчику организовать отдельную фотосессию специально под сайт.
В ТЗ были зафиксированы не общие слова, а конкретные параметры: интеллектуальное и сдержанное настроение, минимализм с акцентом на текстуры, нейтральная палитра с одним сильным акцентом, асимметричная поза модели и чистое пространство под типографику. В качестве визуального якоря заложили деталь — красную перчатку. Это решение стало ключевым для всего проекта.
В итоге съемка закрыла не только первый экран, но и задала единый визуальный код сайта. Красная перчатка превратилась в источник акцентного цвета, который дальше аккуратно использовали во всём дизайне: в микроакцентах, состояниях элементов и деталях. Первый экран стал не разовым вау-эффектом, а основой целостной визуальной системы, которая удерживает премиальное ощущение на всех страницах.
КАК СОХРАНИТЬ СТИЛЬ И НЕ СЛОМАТЬ UX
После утверждения первого экрана задача только звучала просто: перенести ощущение глянца и премиальности на все страницы сайта и при этом не превратить продукт в арт-альбом, где пользователь теряется и не понимает, куда нажимать.
Мы работали с дизайном как с системой, а не набором эффектных экранов. Журнальный вайб поддерживался через сетку, типографику и ритм. Каждый экран проверяли на простой критерий: помогает ли он двигаться по пользовательскому сценарию или начинает отвлекать от задачи. В тех местах, где эстетика могла мешать восприятию информации или действию, мы осознанно упрощали подачу, усиливали контраст и читабельность, оставляя «воздух» там, где он действительно работает на ощущение уровня.
Вся дизайн-система строилась вокруг трех опор, которые позволили удержать баланс между визуалом и функциональностью:
-
Журнальная логика, но продуктовый подход. Разные масштабы текста и блоков создают премиальное ощущение, но при этом каждый элемент встроен в понятную структуру и не ломает навигацию.
-
Действия встроены в интерфейс, а не навешаны сверху. Кнопки и конверсионные элементы появляются там, где пользователь ожидает их увидеть, и не спорят с визуалом.
-
Визуал живой, но управляемый. Дизайн изначально рассчитан на большой и растущий объем контента. Слайдеры, плитки и композиция блоков автоматически подстраиваются под большее количество фото и видео, сохраняя аккуратный и дорогой вид без ручной донастройки.
Такой подход позволил сохранить целостность визуального языка на всех страницах сайта. Он выглядит как fashion-продукт, но при этом остается рабочим инструментом: пользователь не теряется в «красоте», понимает, где он находится и какой следующий шаг может сделать. Именно это сочетание и стало ключевым для проекта — когда дизайн усиливает бизнес-логику, а не конкурирует с ней.
ОТ МАКЕТОВ К ПРОДУКТУ: ВЕРСТКА БЕЗ ПОТЕРИ СКОРОСТИ И КАЧЕСТВА
Технологическая основа проекта
Когда визуальная система была утверждена, проект перешел в ту фазу, которая обычно остается за кадром, но именно она определяет, будет ли сайт выглядеть так же хорошо в браузере, как в макетах. Мы изначально собирали продукт не как шаблонный многостраничник, а как кастомный сервис под бизнес-процессы агентства.
В основе проекта — связка React и WordPress. React отвечал за скорость интерфейса, интерактивные сценарии и плавные переходы между состояниями. WordPress стал управляемым центром контента, через который команда RFMODELS работает с каталогом моделей, портфолио, категориями и порядком отображения данных без участия разработчиков.
Анимации как часть пользовательского опыта
Отдельное внимание уделили анимациям и состояниям интерфейса. Все переходы и микроэффекты реализованы на GSAP и задумывались не как декоративные элементы, а как часть UX. Анимации помогают пользователю ориентироваться в интерфейсе, создают ощущение «дорогого» продукта и при этом не мешают восприятию контента.
Мы внимательно следили за производительностью: сайт работает с большим объемом визуальных материалов, поэтому все эффекты тестировались с учетом скорости загрузки, плавности и корректной работы на мобильных устройствах.
Самая сложная часть — карточка модели
Карточка модели стала самым технически насыщенным элементом проекта. В ней сошлись сразу несколько сценариев, которые на первый взгляд выглядят простыми, но в реализации требуют аккуратной инженерной работы:
-
сохранение контекста при возврате в каталог без сброса сортировки и действий пользователя;
-
разные режимы просмотра фото с переключением без перезагрузки страницы;
-
логика отображения элементов только при наличии контента (снэпы, компкард, видео);
-
залипающие элементы действий, которые появляются ровно в тот момент, когда они нужны.
Все эти сценарии мы многократно проверяли на адаптивах, потому что именно мобильный UX чаще всего ломает даже хорошо продуманный дизайн.
Страница подборки как связка с реальной работой агентства
Отдельный блок разработки — страница подборки для клиентов агентства. Здесь пользователь уже не просто смотрит, а принимает решение. Мы заложили механику, при которой фиксируются статусы просмотра и выбора, а ключевая информация от менеджера остается под рукой при скролле.
После отправки выбора данные автоматически уходят менеджеру. В итоге дизайн был реализован буквально «пиксель в пиксель» относительно утвержденных макетов, но при этом сохранил гибкость. Сайт масштабируется под рост базы моделей, выдерживает большие объемы фото и видео и остается управляемым. Именно на этом этапе проект из визуальной концепции окончательно превратился в рабочий цифровой продукт.
Если ваш сайт выглядит дорого, но клиенты все равно взаимодействуют только через мессенджеры и соцсети, чаще всего проблема не в визуале, а в сценариях и архитектуре. Оставьте заявку и мы подберем решение именно для вашего проекта.
Для RFMODELS мы пересобрали ключевой медиа-инструмент агентства: сайт, который одновременно работает на имидж и на заявки, передает ощущение глянцевой обложки, но при этом остается понятным, управляемым и ведет пользователя по четким бизнес-сценариям.
Лучшее в блогах
Вам понравится
За 3 месяца мы превратили локальный спрос на ремонт балконов в предсказуемый поток лидов через VK‑таргетинг: супергео по районам, чат‑бот в группе и ретаргетинг с look‑alike. Результат — 208 горячих заявок, CPL 471 ₽, CPC 51 ₽, бюджет 90 000 ₽.
Онлайн-кинотеатр Wink приобрел стриминговый сервис «Смотрёшка» с 550 телеканалами, крупного регионального игрока, работающего через местных операторов широкополосного доступа в интернет. Доля рынка «Смотрёшки» оценивается в 60–68%. Сумму сделки Wink не раскрыл, но на рынке ее оценивают в 3,5–4 млрд рублей.
Неделя рекламы
Энциклопедия обмана