Редизайн RFMODELS, который усиливает доверие брендов и ускоряет подбор моделей

Обновили ключевой медиа-инструмент крупного бизнеса: многостраничный корпоративный сайт для RFMODELS, который работает как витрина доверия для брендов и как рабочий инструмент для подбора моделей.

Главная страница сайта RFMODELS

ЧТО МЫ СДЕЛАЛИ

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

Солюшен: брифинг / прототипирование под сценарии ЦА / редактура структуры и смыслов с маркетолог-mind подходом / визуальная концепция первого экрана + съемка специально под сайт / дизайн-система с журнальной версткой / кастомная разработка сайта для бизнеса на React + WordPress / настройка отправки заявок и подборок на почту / шлифовка UX-деталей (поиск, фильтры, сохранение сортировки) / индексация страниц моделей.

Фичи:

1. дизайн не ради дизайна: сделали 35 макетов и экранов (с адаптивами) + UI-kit и 2 раскадровки оригинальных анимаций загрузки страниц, чтобы сайт выглядел дорого и последовательно во всех сценариях. 
2. карточка модели — не просто портфолио: предусмотрели SEO-требования, разные режимы просмотра фото, липкие элементы и якоря, чтобы пользователь не терялся в контенте и не выпадал из флоу. 
3. логика подбора и коммуникации: заявки с сайта и подборки уходят на почты клиентов агентства без лишних «войдите в систему, чтобы просто посмотреть».

В премиальных проектах с упором на визуал главная сложность (и самый интересный челлендж) — найти компромисс между эстетикой глянца и конверсионностью. А в модельном бизнесе визуал — это не украшение, а часть продукта. Но если переборщить с арт-дирекшеном, сайт превращается в красивую галерею без действий. Если перегнуть в сторону лидогенерации, получаем обычный каталог моделей, которых на рынке и так сотни. Мы держали баланс на уровне UX, текста и реализации, чтобы пользователь залипал на визуале, но всегда понимал следующий шаг.

В премиальном сегменте UX часто ломают в угоду красивой картинке. Мы сделали наоборот: разработали сильную структуру, а после упаковали в качественный дизайн, чтобы сайт не только впечатлял, но и работал как инструмент для бизнеса.

говорит UX/UI-дизайнер

ВЕЧНЫЙ ЧЕЛЛЕНДЖ: ЭСТЕТИКА VS КОНВЕРСИЯ

RFMODELS — агентство, которое уже 8 лет представлено на рынке (есть сайт и соцсети), поэтому наша задача была не в масштабировании. Клиент хотел обновиться визуально и сделать сайт более привлекательным, чтобы его было не стыдно открывать на встречах и показах, когда решается вопрос доверия в моменте.

Почему пришли к нам: мы попали в поле доверия через цепочку рекомендаций. RFMODELS узнали о нас через проект для другого нашего клиента, плюс сработало медийное касание (реклама у блогера в инстаграм). Короче: это не случайный лид, а осознанный выбор по репутации и пруфам.

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

1. Контент решает. Клиент хотел, чтобы фото были достаточно крупные и не требовали открытия, а это сразу влияет на UX карточки модели и производительность.
2. Колоссальный объем фото/видео — техническое ограничение, которое нельзя игнорировать: если сайт тяжелый, никакой имидж не спасает.
3. Разные сценарии для разных аудиторий. Брендам важны скорость подбора и ощущение уровня агентства; будущим моделям — понятный путь «как попасть» и куда писать. Поэтому сайт должен быть одновременно и презентацией, и рабочим инструментом первого касания.

Если у вас похожая ситуация (сайт есть, красивый, но он не конвертит в заявки), почти всегда проблема не в кнопке и даже не в цвете. Проблема в том, что дизайн не привязан к сценариям ЦА. Мы в Ninen изначально выстраиваем все от сценариев.

Десктопная версия сайта

КТО ПРИХОДИТ НА САЙТ И КАК ПРИНИМАЕТ РЕШЕНИЕ

Аналитику по проекту проводили последовательно: маркетолог дал фактуру и гипотезы по рынку, а UX/UI-дизайнер разложил ее на сценарии и точки принятия решения на сайте. Итогом стала CJM-карта: кто приходит в RFMODELS, что хочет увидеть за первые секунды и где чаще всего ломается доверие; и high-fidelity прототипы для каждой страницы сайта.

Основной сегмент ЦА — это те, кто берет моделей на съемки, показы, шоу и презентации в нишах одежды и косметики. И здесь же важная особенность: больше 50% клиентов возвращаются, то есть сайт должен работать не только на первое касание, но и на повторные, т.е. быстрые подборы моделей под новые проекты.

Сегменты ЦА:

1. Модные дома и дизайнеры: 40–45%.
2. Модные журналы и издательства: 20–25%.
3. PR и рекламные агентства в моде: около 20%.
4. Продакшн и модельные агентства: 3–5% (часто со своими моделями, реже ищут вовне).

А с кем реально говорим через сайт? Креативные директора, руководители PR/маркетинга, продюсеры и координаторы съемок, а также модельные агенты и букинг-менеджеры. Плюс «хвост» контактов: фотографы, стилисты, редакторы.

Два базовых сценария, которые определили UX:

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

Отдельно учли поведение крупных и небольших клиентов. Крупные могут брать до 10 моделей в месяц, лучше понимают специфику и ценят скорость. Мелкие чаще более чувствительны к стоимости. Это влияет на тональность текста и на то, как мы объясняем процесс взаимодействия.

ДОВЕРИЕ ВШИТО В UX: ОТВЕТЫ НА ВОЗРАЖЕНИЯ КАК ОСНОВА ИНТЕРФЕЙСА

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

Ключевые вопросы, которые клиент фактически закрывает на сайте (и которые мы поддержали дизайном и контентом): доступность в нужную дату, бюджет, качество портфолио, наличие снепов, возможность приехать на примерку.

Чтобы не повторить типовой каталог плиточкой, мы собрали пул прямых конкурентов и сильных аналогов из рынка. В исследовании зафиксировали список из 50+ сайтов (конкуренты, международные агентства и референсы по UX-паттернам вроде карточки модели и первого экрана). Два ключевых прямых конкурента, которых смотрели в первую очередь: Open Up Models и VProject Models.

Главные инсайты по конкурентам и рынку в целом:

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

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

1. «Мы не уверены в профессионализме ваших моделей» или «Мы боимся, что модель не будет соответствовать ожиданиям на съемке». 
   Это про риски на площадке: пунктуальность, соответствие заявленным характеристикам, умение работать в кадре. Мы закрывали это глубиной карточки модели и структурой контента в портфолио: чтобы человек мог быстро оценить качество, снепы и дополнительные материалы, чтобы мог сразу проверить именно то, что для него критично.
2. «Мы опасаемся сложностей в организации и взаимодействии»
   Здесь прямо звучит страх сложной коммуникации и классический набор: модель не такая, опоздала, кто ответственный за доп вопросы. Мы закрывали это прозрачностью процесса: понятной точкой входа в контакт и логикой: подборка → выбор → менеджер, и акцентом на том, что финализация букинга все равно происходит в личной коммуникации.
3. «Стоимость выше, чем у конкурентов» и «Можно найти дешевле на фрилансе»
   Это возражение мы не давили скидками. Мы показывали ценность агентства как системы, которая берет на себя организационные риски и разруливание ситуаций, вплоть до замены модели при необходимости. Это один из аргументов, который отличает агентство от поиска лиц в соцсетях.
4. «Мы уже работаем с другим агентством»
   Здесь цель сайта не переубеждать в лоб, а дать повод сравнить уровень. Поэтому мы собирали визуальную подачу и структуру так, чтобы за короткий просмотр было понятно: у RFMODELS есть вкус, порядок в каталоге и понятный процесс взаимодействия.

СНАЧАЛА КЛИКИ, ПОТОМ «КРАСОТА»: PROTOTYPE-FIRST ПОДХОД

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

У проекта 2 основных сценария:

1. Главная не как приветственный лендинг, а витрина с видео и каталогом, в который можно провалиться за секунды.
2. Отдельные страницы доверия и процесса. О нас, Клиенты, Контакты, Стать моделью, плюс карточка модели как конечная точка выбора.

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

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

Что вошло в структуру многостраничника:

1) Главная
Главная собрана как единый маршрут с бургер-меню и якорями на ключевые разделы. Внутри главной мы держали несколько целей одновременно:

1. Каталог моделей. Категории Women и Men с подкатегориями (например, new faces, mulatto, asian, size+), поиск с автоподсказками по имени и фамилии, алфавитный фильтр, возможность сброса параметров поиска.
2. Понятный контакт без перегруза. Форма захвата в модальном окне и сценарий «спасибо» с возвратом на главную, чтобы человек не терялся после отправки.
3. Динамика контента. Блок соцсетей и блок Лица построены так, чтобы сайт ощущался живым: в админке загружаются 50 фото, а за счет cookies пользователь при каждом заходе видит по 10 новых, это создает ощущение обновляемости без постоянной ручной работы.

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

1. слайдер с неограниченным количеством материалов, которые автоматически подтягиваются из админки, плюс переключение в режим плитки по 1 клику;
2. кнопки на снепы и комп кард. Композитку можно открыть и скачать, а элементы появляются только если контент реально загружен;
3. кнопка Book model при скролле фиксируется в залипающей плашке параметров, чтобы действие всегда было под рукой.

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

4) Об агентстве
Собирает прогрев: лица, новости, блок логотипов клиентов  в строку через анимацию или прокрутки, команда в слайдере.

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

6) Стать моделью
Анкета разбита на 5 коротких шагов: выбор пола и базовых данных, гражданство и город, параметры и внешность, загрузка снепов (без них нельзя перейти дальше), контакты и согласия. Это помогает собрать данные в едином для всех моделей формате и отсечь сырые заявки. А для пользователей не запутаться в длинных и сложных формах в один экран.

Плюс предусмотрели отдельную страницу для клиентов агентства, где отображается отправленная подборка и где клиент в ответ передает менеджеру, какие модели понравились. Это важная связка между презентацией и реальной операционной работой.

1 / 5

ВОВЛЕЧЬ ЗА 3 СЕКУНДЫ ПЕРВЫМ ЭКРАНОМ

В этом проекте дизайн первого экрана был не просто красивой обложкой. Он должен был стать визуальным кодом всего сайта и сразу отвечать на главный вопрос клиентов RFMODELS: «уровень соответствует?». В нише, где у заказчика, его менеджеров и их клиентов есть вкус и насмотренность, просто хороший дизайн не работает. Нужно было сделать стильно и привлекательно, но не потерять конверсионность.

Мы пошли по базовой схеме Ninen: лид-дизайнер подготовил 3 принципиально разные концепции первого экрана, чтобы заказчик выбрал направление, которое станет основой для оформления всего сайта. При этом у концепций были четкие рамки от клиента: без темных цветов, с нейтральной палитрой (включая бежевые оттенки) и с крупным названием агентства на первом экране.

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

Концепция 1. Горизонтальный кадр и вытянутая типографика

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

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

Концепция 2. Прямой оммаж обложке журнала

Все строилось вокруг лица модели, которое вписывалось в заголовок. Композиция шла от центрального элемента, а типографика работала как часть изображения. Это максимально про fashion-подачу и ощущение «мы из индустрии», но требовало идеального фото и очень точной типографики, иначе прием превращается в декоративный шум.

Концепция 3. Абстрактные премиальные 3D-рендеры

Самая нешаблонная. Вместо модели в центре были 3D-фигуры из розового золота с профессиональным рендерингом. Премиальность передавалась вайбом и формами, с легким футуристичным оттенком. Решение не похоже на типовые каталоги моделей и хорошо показывает, что мы умеем упаковывать даже такие ниши нестандартно.

Съемка специально под первый экран

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

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

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

ДИЗАЙН-СИСТЕМА ЖУРНАЛЬНОЙ ВЕРСТКИ

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

Поэтому дизайн строили на трех опорах:

1. Журнальная верстка с логикой продукта
   Мы держали глянцевый характер за счет ритма типографики и работы с масштабами текста, сочетали большие и маленькие кегли, оставляли воздух. При этом каждое «красиво» проверяли простым вопросом: помогает ли это двигаться по сценарию, который нужен бренду? Там, где эстетика могла мешать восприятию, мы упрощали подачу, усиливали читабельность и собирали блоки так, чтобы взгляд шел по странице без напряжения.
2. Конверсионные приемы встроены в интерфейс, а не поверх него
   Вместо того чтобы ставить кричащие кнопки, мы встроили действия в естественные точки внимания. На карточке модели кнопка букинга превращается в залипающий элемент при скролле, чтобы пользователь не терял действие в длинном просмотре портфолио. На главной предусмотрены формы захвата и понятные переходы к ключевым разделам, чтобы после вау-эффекта человек видел следующий шаг. Плюс продумали микросценарии: состояния после отправки, логичные возвраты назад, кликабельные элементы там, где их ожидают.
3. Визуал живой, но управляемый
   Мы изначально знали, что у RFMODELS большой объем контента, поэтому дизайн разрабатывали так, чтобы он не ломался при росте данных и не требовал ручной подгонки. Слайдер и плитка в карточке модели автоматически подтягивают материалы из админки, а композиция блоков выдерживает разные объемы фото и видео. Это позволяет сохранять премиальный вид даже тогда, когда контента становится больше.

ПИКСЕЛЬ В ПИКСЕЛЬ: КАК МЫ СОБРАЛИ ДИЗАЙН В ПРОДАКШЕНЕ

Когда визуальная система утверждена, начинается то, что обычно скрыто от глаз заказчика. Мы собирали проект в рамках разработки на React и WordPress. React отвечал за скорость интерфейса и интерактивные сценарии. WordPress стал опорой для контента и управления портфолио из админ-панели: категории, сортировка по параметрам, полный контроль администратора над выбором фото, порядком расположения и отображением. Это было критично, потому что в базе уже 200+ моделей, а количество фото и видео в карточках не ограничено.

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

Добавили формы для рекрутинга моделей — сбор полной анкеты кандидата с загрузкой фото и всей необходимой информации. И формы для контакта с администратором. Заявки с сайта и подборки уходят на почты админов и клиентов соответственно. Плюс настроили SEO-оптимизацию сайта и базовую веб-аналитику.

Самая техническая часть проекта — это карточка модели. Там много нюансов, которые кажутся простыми, пока их не начинаешь собирать в верстке:

1. возврат в каталог без сброса сортировок и действий пользователя, чтобы человек не терял контекст;
2. два режима отображения фото с переключением в плитку; плюс отображение ленты в плитке на весь экран после нескольких скроллов;
3. якорные кнопки и логика скрытия элементов, если у модели нет композитки или снепов;
4. залипающая плашка, которая появляется при скролле и удерживает быстрые действия, чтобы пользователь не проваливался в бесконечный просмотр.

И все это мы неоднократно прогоняли на мобильных разрешениях. 

Еще одна важная часть разработки — это страница подборки для клиентов агентства. Там сценарий другой: пользователь не просто смотрит, он подтверждает выбор. По ТЗ мы заложили логику, где:

1. считается реальное количество моделей в подборке и количество выбранных;
2. блок с информацией и сообщением от менеджера залипает при скролле;
3. на карточках есть like/dislike, а в системе фиксируются статусы selected, rejected и viewed.

Если хотите быстро оценить свой сайт до редизайна, проверьте три вещи: пользователь за 3 секунды понимает кто вы и чем сильны, за 15 секунд находит нужный сценарий, и за 60 секунд может сделать действие без лишних вопросов. Если хотя бы один пункт не сходится, значит проблема не в «картинке», а в структуре и UX. Оставьте заявку и мы подскажем, какие изменения дадут максимальный эффект именно в вашем случае.

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