Разработка корпоративного сайта для «РОСМЭН»

Главное о кейсе

«РОСМЭН» — ведущий игрок на рынке детских товаров, работающий уже 30 лет. Компания входит в ТОП-5 крупнейших издательств и ТОП-3 дистрибьюторов на рынке игрушек России.

В 2023 году «РОСМЭН» объявил о ребрендинге, который не только позволил обновиться бренду визуально, но и отразил новый этап развития компании. Бренд сохранил позиции одного из лучших издательств России и стал крупным игроком на рынке детских товаров и игрушек. В его портфеле более 20 популярных брендов, включая куклы L.O.L, Baby Born, Cry Babies, Bratz, POP MART и пр.

Ребрендинг стал знаковым для «РОСМЭН» и подчеркнул трансформацию компании за последние годы. Новый стиль получил признание в профессиональном сообществе и потребовал развития IT-инфраструктуры.

Прошлая версия сайта устарела функционально. Она не выполняла задачи маркетинга и не отражала данные о бизнесе. Например, то, что направление по продаже игрушек по объему сравнялось с издательскими проектами. «РОСМЭН» стал дистрибьютором иностранных брендов.

Выросла и изменилась аудитория бренда. Нужно было отразить информацию, полезную не только для b2c рынка, но и для b2b. Сделать сайт удобным для сотрудников, авторов, блогеров, русских и международных партнеров, журналистов.

Как проект изменил жизнь пользователей

Проект по обновлению сайта «РОСМЭН» заметно улучшил жизнь его пользователей — как розничных клиентов, так и бизнес-партнеров:

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

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

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

Прямой доступ к HR-ресурсам: Потенциальные сотрудники могут легко ознакомиться с корпоративной культурой компании и быстро найти актуальные вакансии благодаря интеграции с HeadHunter. Это делает процесс поиска работы проще и способствует укреплению HR-бренда «РОСМЭН», привлекая квалифицированных специалистов.

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

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

Бизнес-задача и ее решение

Разработать сайт, учитывающий интересы и запросы всех групп целевой аудитории бренда:

1) покупатели книг и игрушек разного возраста,
2) партнеры, в том числе, международные («Детский мир», «Читай-город», «Меломан», «Азбука вкуса» и другие),
3) текущие и потенциальные сотрудники РОСМЭН,
4) авторы и блогеры, делающие ролики про книги и игрушки.
5) производители игрушек,
6) СМИ и широкая общественность.


Раскрыть два направления работы компании — книги и игрушки.
До ребрендинга раздел игрушек освещался некорректно. Тематические страницы нелогично встраивались в каталог сайта с книгами. На новом сайте оба раздела должны быть представлены привлекательно и удобно для клиентов.

Разработать сайт, соединяющий бренд с маркетплейсами, который делает их конечной точкой для совершения покупок. Ресурс должен помогать продажам в Интернете.
Организовать бесшовный переезд с точки зрения SEO.

Крафт (мастерство), реализация, технические детали

Сайт «РОСМЭН» стал продуктовой задачей, поставившей перед командой ряд вопросов:
Как сделать два раздела под одним началом?
Как отразить интересы разнородной аудитории?
Как заложить возможности масштабирования и развития?

Дуальность работы компании мы представили, сделав два непохожих друг на друга раздела — «Книги» и «Игрушки».


ТЕХНОЛОГИИ

Представители «РОСМЭН» пришли с четким видением сайта с концептуальной и маркетинговой точки зрения, но без понимания, каким ресурс должен быть с технической и визуальной точки зрения.

Мы стали продолжением команды клиента и в ходе работы опирались не только на продуктовую аналитику от «Осьминожки», но и результаты исследования рынка от «РОСМЭН». Изучали, как работают маркетплейсы и сайты конкурентов.

Предложили клиенту обновить ТЗ для сайта, усилив его с технически. Проанализировали, каким должен быть сайт, чтобы работать на имидж и HR-бренд «РОСМЭН», привлекать внимание клиентов к книгам и игрушкам и собирать аналитику по продажам.

Объем задач по проекту сразу был удвоенным: сайт состоит из двух разделов с двумя главными страницами. Произошло кратное увеличение числа страниц. Появился карьерный раздел, карточки авторов, каталог видео, раздел для партнеров, раздел «Случайная книга», «Вишлист» и пр.

Разделы «Игрушки» и «Книги» заметно отличаются по подаче, визуальным акцентам и принципу устройства. Яркий красочный раздел с игрушками вовлекает пользователя в игру. Он содержит кастомные страницы топ-брендов.

Раздел «Книги» похож на уютную виртуальную библиотеку, показывающую популярные тематические подборки и авторов. Можно пролистать страницы книг и насладиться иллюстрациями.

Английская версия сайта в форме сокращенного варианта для зарубежных b2b клиентов и партнеров доступна не во всех странах. Она отличается по наполнению от основной версии.


Стек технологий:
Backend — 1С Bitrix
Frontend — JS, Tailwind CSS, Sass, HTML, Gulp


ИНТЕГРАЦИИ И E-COMMERCE

Сайт «РОСМЭН» не конкурирует с маркетплейсами, но на нем должны действовать все интеграции, важные для e-commerce. Бренд передает логистику и реализацию товаров маркетплейсам на аутсорс, а через сайт предоставляет подробную информацию о каждой книге и игрушке.
Ресурс помогает выстроить более теплые отношения с покупателями. Прямых продаж на сайте нет, ссылки ведут пользователей на маркетплейсы. Они могут перейти на страницу «РОСМЭН» и сравнить цены на товар.

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

В карточках товара реализована интеграция с маркетплейсами (Ozon, WB, Маркет). Система проставляет ссылку на товары в маркетплейсах и проверяет, в наличии ли товар. Если он выкуплен, ссылка пропадет.

Сделали в карьерном разделе сайта интеграцию с HeadHunter. API проверяет, есть вакансия на сайте или нет. Контент-менеджеру остаётся включить отображение вакансии. Скрипт обновляет данные раз в сутки.

АНАЛИТИКА
Ранее аналитика не отслеживалась, и компания теряла часть прибыли, не владея данными по категориям товаров. Сайт создает больше возможностей для аналитики. Сотрудники РОСМЭН будут видеть ценность отдельных направлений в структуре доходов компании:
что важнее и масштабнее — книги или игрушки,
как часто пользователи переходят на каждый из разделов,
как много переходов на маркетплейсы происходит и т.д.

Трудно организовать сквозную аналитику между сайтом и маркетплейсом, это два независимых контура. Отследить динамику продаж, связанных с переходами на карточки на маркетплейсах, можно через utm-метки.


КАТАЛОГ И ТОВАРНЫЕ КАРТОЧКИ

Учли привычный пользователям интерфейс маркетплейса, чтобы обеспечить приятный и бесшовный опыт. Бренды «РОСМЭН» должны удобно быть представлены в каталоге, а улучшенные карточки товаров — содержать reach content (видео, отзывы).

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

По игрушкам деталей еще больше: персонаж, серия, мультфильм и конкретный сезон, материал и т.п. Помогли родителям выбирать подарки детям. Учли, что игрушки ищут по типам (допустим, куклы, трансформеры), а не по названиям. Реализовали и текстовый, и голосовой поиск.

Добавили ленты рекомендаций в карточке товара. В 1С каждый товар принадлежит к серии или подборке. Написали скрипт, позволяющий отобразить в рекомендациях товары, связанные по смыслу.

ПРОЕКТИРОВАНИЕ И ДИЗАЙН
Учли концепцию маркетологов «РОСМЭН» и ребрендинг, отразившийся на выборе шрифтов, цвета, анимаций и элементов.

У сайта изначально сложная логика с т.з. UX/UI. Сделали интеграцию с 1С, обеспечили броскую нестандартную подачу разделов и стилизовали страницы сайта под страницы маркетплейсов. Пользователь должен чувствовать связь сайта с площадками, где он покупает книги и игрушки.

Главный экран реализовали в двух версиях со сложной анимацией:

Главная страница раздела «Книги» сделана с акцентом на подборки и контент типа новостей по теме издательства. Пользователям доступен анимированный интерактивный ТОП-10 книг. Они могут листать книги и любоваться книжными разворотами, типографикой. Нажав на кнопку, читатели узнают больше об издании или его авторе.

В разделе «Игрушки» сделан акцент на видеообзоры блогеров. Если нажать на видео, открывается поп-ап с возможностью посмотреть видео на текущей странице. Внимание пользователей привлекают слайдеры с хитами продаж и логотипы брендов.

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

Используя админпанель в Bitrix, контент-менеджеры могут использовать 15 блоков и на их основе создать кастомное решение под бренд. Благодаря этому в разделе «Игрушки» будут собраны непохожие друг на друга страницы, погружающие пользователей в мир любимых игрушек.

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


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

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


ДОПОЛНИТЕЛЬНЫЕ ВОЗМОЖНОСТИ

Если кликнуть по кнопке «Случайная книга», пользователь переходит на рандомизатор и может получить незнакомое ему название книги.

Пользователь может сохранить вишлист по желаемым покупкам в каталогах без регистрации в личном кабинете и позднее приобрести товары на маркетплейсе.

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

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

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

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

5. Технические и организационные трудности: почти детектив
Во время интеграции с маркетплейсами возникла непредвиденная сложность: одна из платформ изменила API-протоколы в процессе работы над проектом. Команде потребовалось в сжатые сроки адаптировать интеграцию, что потребовало почти детективного исследования изменений, внесенных платформой без предварительного уведомления. Благодаря профессионализму и скорости работы технической команды удалось быстро восстановить совместимость, не повлияв на сроки запуска проекта.

6. Поддержка бренда работодателя: удачный эксперимент с «жизнеописанием» компании
Особым запросом клиента было создание привлекательного HR-раздела, чтобы повысить узнаваемость компании на рынке труда. Для этого было предложено реализовать концепцию «жизнеописания», где, кроме актуальных вакансий, были бы описаны проекты компании, внутренняя культура, ценности и достижения. Этот нестандартный ход показал себя эффективным: после запуска раздела компания получила на 20% больше откликов от потенциальных сотрудников, что превзошло ожидания заказчика и стало одной из удач проекта.

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

Итог
Проект «РОСМЭН» показал, что создание крупного цифрового продукта — это не только про технологии и дизайн, но и про динамичное взаимодействие, постоянное тестирование гипотез и глубокое понимание аудитории. Работая в условиях непредсказуемых вызовов и компромиссов, команда нашла оптимальные решения, которые позволили превратить сайт в эффективный инструмент как для клиентов, так и для самой компании.

Рады быть причастны к масштабному проекту. Он полезен для большого числа пользователей: детей и их родителей, сотрудников «РОСМЭН», писателей, продавцов и создателей игрушек и пр. Мы успешно выдержали баланс между контентом для детей и взрослых, корпоративной и клиентской частями сайта, между книгами и игрушками.

Организовали бесшовный переезд пользователей на новый сайт. Сохранили идентичность ссылок и сделали редирект на новые страницы. Трафик не просел в сравнении с показателями за прошлый месяц.

Сайт соединен с маркетплейсами и привлекательно представляет на рынке направления работы компании. Команда проекта может масштабировать проекты и добавлять функционал. Обновленный бренд вшит на страницы сайта и создает правильное впечатление о «РОСМЭН».

Скриншоты