Добрый день. Меня зовут Михаил Шрайбман, я — фаундер интегратора «Осьминожка». Моя команда специализируется на разработке 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 разработчик.
Если вам понравилась наша статья и стали интересны другие кейсы, над которыми мы работаем — читайте обо всех проектах на сайте или в соцсетях «Осьминожки».
Статья рассказывает о создании нового сайта для «РОСМЭН»
Саммари:
- «РОСМЭН» - крупный игрок на рынке детских товаров
- Ребрендинг и новый сайт от компании «Осьминожка»
- Цели: отразить книги и игрушки, учесть нужды разной аудитории
- Вызовы: SEO переезд, устаревший функционал предыдущего сайта
- Решения: два раздела «Книги» и «Игрушки», улучшенная аналитика
- Интеграция с 1С, система фильтрации, нет прямых продаж
- Геймификация, движущиеся элементы, адаптированный дизайн
- Сотрудничество с маркетплейсами, упрощение перехода
- Внедрение карьерного раздела, интеграция с HeadHunter
- Развиваемая платформа, социальная значимость проекта
- Продолжение сотрудничества с «РОСМЭН», успешные результаты
Стараюсь выделять самое важное для вас.
Спасибо за отличное резюме :)
👍
Спасибо!
Отличная работа👍
спасибо!
Сейчас хороший сайт, но как по мне и раньше было неплохо.Но да сейчас игрушки более завлекательно представлены
Добрый день! Спасибо за отзыв! Вопрос не в завлекательности, а в выполнении требований и интересов всех стейкхолдеров проекта, а также повышении бизнес-эффективности.