Marilyn 2.0: редизайн сайта для платформы автоматизации интернет-рекламы

От креатива к эффективности: как mymarilyn.ru сменил кожу, сохранив ДНК


Сайт проекта mymarilyn.ru
Год создания 2022

Разработка на Юми; Наполнение; Базовая seo-оптимизация; Дизайн райта; Фирменный стиль, 3D модели; Верстка; Программирование; Регистрация сайта в 2ГИС, Яндекс бизнес; Настойка аналитики

Клиент

Мarilyn — это платформа автоматизации интернет-рекламы, которая объединяет управление рекламными кампаниями, аналитику и отчётность в едином интерфейсе.


Как это было

АНдрей Сомов
Андрей Сомов

Директор «Пятого измерения»

Когда клиент впервые пришёл к нам в 2019 г., он хотел яркий, нестандартный сайт — что-то, что запомнится. Мы сделали дерзкий вариант: тёмный фон с неоново-синими акцентами — выглядело как «цифровая вселенная» рекламных технологий; изометрические иллюстрации — словно интерфейс системы собран из кибер модулей.; сложная анимация...

Клиент был в восторге — мы тоже!

Первая версия сайта
Первая версия сайта

Первая версия сайта прожила 3 года, а затем клиент пришел к нам снова!

Почему понадобился редизайн?

Клиент эволюционировал:

  • Сместил фокус на B2B-сегмент (требовалась строгость + экспертный контент) Нужна лёгкость восприятия, а не «вау эффект» к которому стремились в первой версии сайта.
  • Запустил блог с объемными статьями и сложной структурой материала — тёмный фон мешал чтению (а блог стал ключевым инструментом).
  • Клиент начал использовать персонажа «Мерилин» девушку-ассистента в статьях, но на сайте она выглядела чужой.

Задача

Создать дизайн где:

  • Лёгкость восприятия сложных данных
  • Гибкость для контент-стратегии
  • Узнаваемость
  • Использование фирменного персонажа

Решение

Как мы нашли баланс между креативом и функционалом


1.Визуальный код

  1. Мы сохранили узнаваемость, но переработали стиль. (оставили прежний логотип и сохранили акцентные цвета родственные первой версии сайта)
  2. Светлая тема + чёткая типографика — теперь контент читается легко.
  3. Персонажи Мери и Вася (система и помощник) — стали «лицом» продукта и сдел
  4. Микроанимации — например, Мери «получает» письмо когда вы отправляете заявку через форму.
marilyn
/assets/cases/marilyn/_astro/ill-1.BnUp-vQL.jpg /assets/cases/marilyn/_astro/ill-2.Bh-M7bMc.jpg /assets/cases/marilyn/_astro/ill-3.4dyLrVv2.jpg /assets/cases/marilyn/_astro/ill-4._M_aNCdC.jpg /assets/cases/marilyn/_astro/ill-5.CBDx_gJ0.jpg /assets/cases/marilyn/_astro/ill-6.Bl6YwGsV.jpg /assets/cases/marilyn/_astro/ill-7.BgzJmzxO.jpg /assets/cases/marilyn/_astro/ill-8.B3YAE0z0.jpg /assets/cases/marilyn/_astro/ill-9.Cb6f9VHD.jpg /assets/cases/marilyn/_astro/ill-10.mHwNhMyZ.jpg /assets/cases/marilyn/_astro/ill-11.D-QXNWU5.jpg /assets/cases/marilyn/_astro/ill-12.BLS01V5N.jpg /assets/cases/marilyn/_astro/ill-13.Bd3qGsn9.jpg /assets/cases/marilyn/_astro/ill-14.B2KjRYiX.jpg /assets/cases/marilyn/_astro/ill-15.BtmK6t2m.jpg
/assets/cases/marilyn/_astro/ill-1.BnUp-vQL.jpg /assets/cases/marilyn/_astro/ill-2.Bh-M7bMc.jpg /assets/cases/marilyn/_astro/ill-3.4dyLrVv2.jpg /assets/cases/marilyn/_astro/ill-4._M_aNCdC.jpg /assets/cases/marilyn/_astro/ill-5.CBDx_gJ0.jpg /assets/cases/marilyn/_astro/ill-6.Bl6YwGsV.jpg /assets/cases/marilyn/_astro/ill-7.BgzJmzxO.jpg /assets/cases/marilyn/_astro/ill-8.B3YAE0z0.jpg /assets/cases/marilyn/_astro/ill-9.Cb6f9VHD.jpg /assets/cases/marilyn/_astro/ill-10.mHwNhMyZ.jpg /assets/cases/marilyn/_astro/ill-11.D-QXNWU5.jpg /assets/cases/marilyn/_astro/ill-12.BLS01V5N.jpg /assets/cases/marilyn/_astro/ill-13.Bd3qGsn9.jpg /assets/cases/marilyn/_astro/ill-14.B2KjRYiX.jpg /assets/cases/marilyn/_astro/ill-15.BtmK6t2m.jpg

База иллюстраций

/assets/cases/marilyn/_astro/icon-1.CZduxWl8.jpg /assets/cases/marilyn/_astro/icon-2.q-_yUhbV.jpg /assets/cases/marilyn/_astro/icon-3.7u8uG5M1.jpg /assets/cases/marilyn/_astro/icon-4.D7pmkIMN.jpg /assets/cases/marilyn/_astro/icon-5.CywcQJH4.jpg /assets/cases/marilyn/_astro/icon-6.fNmtojBT.jpg /assets/cases/marilyn/_astro/icon-7.CeapyGC2.jpg /assets/cases/marilyn/_astro/icon-8.Cp2XLTWe.jpg /assets/cases/marilyn/_astro/icon-9.9box55cp.jpg /assets/cases/marilyn/_astro/icon-10.CaiqLwOv.jpg /assets/cases/marilyn/_astro/icon-11.BIYgN8VD.jpg /assets/cases/marilyn/_astro/icon-12.DeDbRsvQ.jpg /assets/cases/marilyn/_astro/icon-13.Mdo9MBRH.jpg /assets/cases/marilyn/_astro/icon-14.CuoLRJ3-.jpg /assets/cases/marilyn/_astro/icon-15.acSlWUov.jpg /assets/cases/marilyn/_astro/icon-16.V7QPA90M.jpg /assets/cases/marilyn/_astro/icon-17.CNGhopjt.jpg /assets/cases/marilyn/_astro/icon-18.CWAPQRua.jpg /assets/cases/marilyn/_astro/icon-19.DFZpKIDD.jpg /assets/cases/marilyn/_astro/icon-20.B7BDsMTi.jpg /assets/cases/marilyn/_astro/icon-21.CLqiYrzT.jpg /assets/cases/marilyn/_astro/icon-22.DFAiJKg0.jpg /assets/cases/marilyn/_astro/icon-23.Bf2X5zlX.jpg /assets/cases/marilyn/_astro/icon-24.DInl4qAb.jpg /assets/cases/marilyn/_astro/icon-25.CWxxDbIh.jpg /assets/cases/marilyn/_astro/icon-26.BWDJ0TXK.jpg /assets/cases/marilyn/_astro/icon-27.C862youm.jpg /assets/cases/marilyn/_astro/icon-28._drG9ybC.jpg /assets/cases/marilyn/_astro/icon-29.Dtv6dQip.jpg /assets/cases/marilyn/_astro/icon-30.C-d-8nXY.jpg /assets/cases/marilyn/_astro/icon-31.D7pA7nIa.jpg /assets/cases/marilyn/_astro/icon-32.C_H9wqie.jpg
/assets/cases/marilyn/_astro/icon-1.CZduxWl8.jpg /assets/cases/marilyn/_astro/icon-2.q-_yUhbV.jpg /assets/cases/marilyn/_astro/icon-3.7u8uG5M1.jpg /assets/cases/marilyn/_astro/icon-4.D7pmkIMN.jpg /assets/cases/marilyn/_astro/icon-5.CywcQJH4.jpg /assets/cases/marilyn/_astro/icon-6.fNmtojBT.jpg /assets/cases/marilyn/_astro/icon-7.CeapyGC2.jpg /assets/cases/marilyn/_astro/icon-8.Cp2XLTWe.jpg /assets/cases/marilyn/_astro/icon-9.9box55cp.jpg /assets/cases/marilyn/_astro/icon-10.CaiqLwOv.jpg /assets/cases/marilyn/_astro/icon-11.BIYgN8VD.jpg /assets/cases/marilyn/_astro/icon-12.DeDbRsvQ.jpg /assets/cases/marilyn/_astro/icon-13.Mdo9MBRH.jpg /assets/cases/marilyn/_astro/icon-14.CuoLRJ3-.jpg /assets/cases/marilyn/_astro/icon-15.acSlWUov.jpg /assets/cases/marilyn/_astro/icon-16.V7QPA90M.jpg /assets/cases/marilyn/_astro/icon-17.CNGhopjt.jpg /assets/cases/marilyn/_astro/icon-18.CWAPQRua.jpg /assets/cases/marilyn/_astro/icon-19.DFZpKIDD.jpg /assets/cases/marilyn/_astro/icon-20.B7BDsMTi.jpg /assets/cases/marilyn/_astro/icon-21.CLqiYrzT.jpg /assets/cases/marilyn/_astro/icon-22.DFAiJKg0.jpg /assets/cases/marilyn/_astro/icon-23.Bf2X5zlX.jpg /assets/cases/marilyn/_astro/icon-24.DInl4qAb.jpg /assets/cases/marilyn/_astro/icon-25.CWxxDbIh.jpg /assets/cases/marilyn/_astro/icon-26.BWDJ0TXK.jpg /assets/cases/marilyn/_astro/icon-27.C862youm.jpg /assets/cases/marilyn/_astro/icon-28._drG9ybC.jpg /assets/cases/marilyn/_astro/icon-29.Dtv6dQip.jpg /assets/cases/marilyn/_astro/icon-30.C-d-8nXY.jpg /assets/cases/marilyn/_astro/icon-31.D7pA7nIa.jpg /assets/cases/marilyn/_astro/icon-32.C_H9wqie.jpg

База иконок

Новый дизайн

Новый дизайн


2. Гибкая структура: «Конструктор» для контента

  • Цифра 1

    30+ модульных секций — как «кирпичики LEGO» для сборки страниц.

  • Цифра 2

    Готовые шаблоны для статей — можно комбинировать тексты, графики, CTA.

  • Цифра 3

    Адаптивные блоки — на ПК и мобильном всё выглядит идеально.

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

  • Desktop

    Сайт marilyn на пк
  • Tablet

    Сайт marilyn на планшете
  • Phone

    Сайт marilyn на телефоне

Все модульные секции полностью адаптивные. Для наглядности, они собранны на “Странице стилей”.

Информационные страницы

Информационные страницы собранные при помощи модульных секций


Результат

Дизайн, который принёс победу

marilyn
  1. Рост времени на сайте на 40% (благодаря читаемости)
  2. Блог стал драйвером лидов (статьи легко вписываются в новые секции)
  3. Для маркетологов — ясность
  4. Для блога — гибкость
  5. Для бренда — узнаваемость
  6. 1-е место в «Рейтинге Рунета» (2022) — за лучший B2B-дизайн.

mymarilyn.ru