Как мы вдохнули новую жизнь в сайт «РОСМЭН»

Как мы вдохнули новую жизнь в сайт «РОСМЭН»

Добрый день. Меня зовут Михаил Шрайбман, я — фаундер интегратора «Осьминожка». Моя команда специализируется на разработке web-продуктов, Al и Web 3.0 решениях.

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

В работе столкнулись со многими вызовами: так, потребовалось создать два независимых товарных раздела. Аудитория проекта включала не только покупателей книг и игрушек, но и партнеров, сотрудников, блогеров. Из статьи вы узнаете, как команда справилась с вызовами, и что в итоге получилось. Приятного прочтения!

О компании «РОСМЭН»

«РОСМЭН» работает на рынке уже 30 лет. В этом году компания объявила о ребрендинге, который позволил обновиться бренду визуально и отразил развитие компании.

Как мы вдохнули новую жизнь в сайт «РОСМЭН»

Бренд сохранил позиции одного из лучших российских издательств и стал крупным игроком на рынке детских товаров и игрушек. В портфеле компании свыше 20 популярных брендов, включая L. O.L, Baby Born, Cry Babies, Bratz, POP MART.

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

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

Как мы вдохнули новую жизнь в сайт «РОСМЭН»

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

Что требовалось сделать в рамках проекта

Полноценно отразить два направления работы — книги и игрушки

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

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

1) покупатели книг и игрушек разного возраста,

2) русские и международные партнеры,

3) текущие и потенциальные сотрудники компании,

4) авторы и блогеры,

5) производители детских товаров,

6) медиа и широкая общественность.

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

Как мы вдохнули новую жизнь в сайт «РОСМЭН»

Организовать бесшовный переезд со старого сайта на новый с точки зрения SEO, сохранив трафик.

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

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

Алия Талипова, маркетинговый директор «РОСМЭН»

Как команда подошла к решению

В работе над этой продуктовой задачей мы ответили на ряд вопросов:

  • Как сделать два независимых раздела под общим началом?
  • Как учесть интересы и запросы разнородной аудитории?
  • Как обеспечить возможности масштабирования и развития.

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

Как мы вдохнули новую жизнь в сайт «РОСМЭН»

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

Денис Нагаев, технический директор «Осьминожки»

Как проходила разработка

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

Как мы вдохнули новую жизнь в сайт «РОСМЭН»

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

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

Объем задач по проекту сразу был х2: сайт состоит из двух разделов с двумя главными страницами.

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

Как мы вдохнули новую жизнь в сайт «РОСМЭН»

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

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

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

Бренд передает логистику и реализацию товаров маркетплейсам на аутсорс, а через сайт предоставляет подробную информацию о каждой книге и игрушке.

Прямых продаж на сайте нет, ссылки ведут пользователей на маркетплейсы. Можно перейти на страницу «росмэн» и сравнить цены на книги и игрушки.

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

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

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

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

Михаил Шрайбман

Новый сайт собирает больше аналитики

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

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

Реализация товара происходит на маркетплейсе. Трудно отследить, с какой страницы пользователь перешел в карточку товара и организовать сквозную аналитику между сайтом и маркетплейсом. Это два независимых контура. Если поставить метки на карточки товаров на тех маркетплейсах, где возможно (например, Ozon) , сотрудники смогут анализировать переходы на сайт.

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

Каталог и карточки товаров оформлены, как на маркетплейсе

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

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

Владислав Кольца, аналитик «Осьминожки»
Как мы вдохнули новую жизнь в сайт «РОСМЭН»

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

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

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

Как мы вдохнули новую жизнь в сайт «РОСМЭН»

Привлекательный дизайн с учетом обновленного бренда

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

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

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

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

Как мы вдохнули новую жизнь в сайт «РОСМЭН»
Как мы вдохнули новую жизнь в сайт «РОСМЭН»
Как мы вдохнули новую жизнь в сайт «РОСМЭН»
Как мы вдохнули новую жизнь в сайт «РОСМЭН»
Как мы вдохнули новую жизнь в сайт «РОСМЭН»

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

Как мы вдохнули новую жизнь в сайт «РОСМЭН»

Любой бренд можно представить на кастомной странице, оформив ее в конструкторе лендингов:

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

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

Как мы вдохнули новую жизнь в сайт «РОСМЭН»

Геймификация обеспечит интерактивный показ продуктов на сайте:

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

С точки зрения хэдеров сайт делится на три раздела: о компании (HR) , хэдер в форме книги, хэдер для раздела по игрушкам.

Каталоги разделов отличаются по дизайну. Для книг реализован упрощенный листинг. Для игрушек добавлена возможность указать серию/сезон, бренд.

Как мы вдохнули новую жизнь в сайт «РОСМЭН»

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

Что еще интересного есть на сайте:

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

Результаты работы

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

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

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

Максим Малов, руководитель проекта «РОСМЭН» со стороны «Осьминожки»

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

Команда проекта

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

Со стороны «РОСМЭН»:

  • Алия Талипова — маркетинговый директор;

  • Наталья Дерновская — руководитель проекта;

  • Дарина Домрачева — руководитель проекта.

Со стороны «Осьминожки»:

  • Максим Малов — руководитель проекта;
  • Владислав Парасий — account manager;
  • Тимур Иллаев — team lead;
  • Артем Попеня — арт-директор;
  • Владислав Кольца — аналитик;
  • Александр Левинов — back-end разработчик;
  • Дарья Шестерина — front-end разработчик;
  • Алмаз Фахрутдинов — front-end разработчик.

Если вам понравилась наша статья и стали интересны другие кейсы, над которыми мы работаем — читайте обо всех проектах на сайте или в соцсетях «Осьминожки».

Михаил Шрайбман
СЕО интегратора web 3.0 «Осьминожка»
2525
8 комментариев

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

Саммари:
- «РОСМЭН» - крупный игрок на рынке детских товаров
- Ребрендинг и новый сайт от компании «Осьминожка»
- Цели: отразить книги и игрушки, учесть нужды разной аудитории
- Вызовы: SEO переезд, устаревший функционал предыдущего сайта
- Решения: два раздела «Книги» и «Игрушки», улучшенная аналитика
- Интеграция с 1С, система фильтрации, нет прямых продаж
- Геймификация, движущиеся элементы, адаптированный дизайн
- Сотрудничество с маркетплейсами, упрощение перехода
- Внедрение карьерного раздела, интеграция с HeadHunter
- Развиваемая платформа, социальная значимость проекта
- Продолжение сотрудничества с «РОСМЭН», успешные результаты

Стараюсь выделять самое важное для вас.

1
Ответить

Спасибо за отличное резюме :)

1
Ответить

👍

1
Ответить

Спасибо!

1
Ответить

Отличная работа👍

1
Ответить

спасибо!

Ответить

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

1
Ответить