CoMagic — платформа аналитики маркетинга и продаж, которая помогает сделать рекламу прозрачной. Предлагает услуги коллтрекинга, сквозной аналитики и контроля обращений.
Компания 9 лет на рынке. Среди клиентов: «Альфа-Лизинг», Ingrad, «ПИК», банк «Открытие», «Авторусь», Makita PRO и другие.
Предыстория
CoMagic поставили нам задачу разработать конструкторов блоков, чтобы самостоятельно верстать материалы для своего блога.
Раньше этим занималась наша команда: клиент присылал дизайн-макет статьи, а разработчики вручную делали верстку.
Процесс занимал 3–5 дней. В денежном эквиваленте верстка могла стоить до 10 тысяч рублей. И это только для одного материала.
В общем, долго, дорого и неудобно.
Задача
Разработать конструктор блоков, который позволит верстать материалы быстро, бесплатно и без специальных знаний HTML и CSS.
По другим оценкам разработка модуля должна была занять полгода. Мы договорились уложиться в 3 месяца.
Мы провели аналитику вместе со специалистами Intensa и пришли к выводу, что для блога хватит около 5 блоков с контентом и несколько технических: форма заявки, хлебные крошки, формы, кнопки CTA, отступы.
Для продуктовых страниц разработали 30 различных блоков, включая шапку и подвал.
Вся работа — от анализа до релиза — заняла порядка 3 месяцев.
Благодаря конструктору блоков мы можем самостоятельно создавать страницы. Подчеркну — не только для блога, но и для продукта.
Результат
В среднем в блоге выходит 4–5 материалов в месяц. Раньше это занимало около месяца работы разработчиков и стоило около 40–50 тысяч рублей.
Теперь клиент может выкладывать любое количество материалов без привлечения подрядчиков.
Конструктор помог сократить время верстки одной статьи с нескольких дней до 15–20 минут в среднем.
Если все тексты, ссылки, изображения уже готовы и оптимизированы, лежат в одном месте и их не нужно искать, то материал реально собрать за 5–10 минут.
Если хочется попробовать разные блоки, покрутить цвет кнопок в редакторе и т. д., то верстать материал можно и час, и больше. В этом тоже плюс — конструктор блоков дает больше вариативности и свободы действий.
Например, раньше, когда клиент отдавал на верстку дизайн-макет, переделывать в процессе было дорого — разработчики уже верстают. Слишком многое придется поправить, чтобы скорректировать дизайн статьи. Следовательно, процесс будет дольше и, соответственно, дороже.
Сейчас клиент может пробовать разные блоки, самостоятельно подбирать расположение и цвета элементов и ни от кого не зависеть.
Из плюсов:
1. Скорость. Буквально за час менеджер может создать страницу с готовым дизайном.
2. Общий стиль. Все элементы управления выглядят одинаково на всем сайте (кнопки, ссылки и прочее).
3. Цена. Разумеется, мы внедряли конструктор из-за экономии на проекте.
Единожды разработав блоки, больше не нужно обращаться к разработчикам, чтобы они верстали статьи и страницы продукта. Это экономит бюджет и позволяет переключить разработчиков на другие задачи. Например, по оптимизации SEO.
Из минусов:
1. Нашим контент-менеджерам приходится подбирать количество текста, чтобы блок выглядел аккуратно.
2. Работа с редактором подразумевает, что менеджер сайта знает, как блок работает. Это не совсем визуальная история, как в Tilda.
3. Невозможно создать абсолютно уникальную страницу, по дизайну есть ограничения, как и в любом подобном конструкторе.
Пример статьи, сверстанной через конструктор блоков: Зачем нужны лайки.
Верстка этого материала заняла около 45 минут с учетом отрисовки иконок, подбора картинок и сбора контента в редакторе.
На создание модуля ушло 2 месяца — сейчас занимаемся развитием конструктора.
Этапы работы
1. Создание дизайна блоков
Разработка конструктора заключалась в том, чтобы единоразово сверстать все блоки, которые клиент потом сможет использовать.
До этого было так: дизайнер разрабатывал макет одной статьи и отдавал нам. Мы ее верстали — делали фронтенд материала и загружали его на сайт. Когда нужно было сверстать новую статью, цикл с дизайном и версткой повторялся.
Поэтому на первом этапе нужно было подготовить макеты всех блоков, которые могут пригодиться для верстки. Этим занимался дизайнер со стороны клиента. Он разрабатывал макеты и передавал нам в работу.
Нужно было сделать 50 блоков — объем довольно большой. Если делать сразу все, то на один дизайн могло уйти порядка месяца. Поэтому мы работали спринтами — 10 блоков в неделю. Пока разработчики верстали одну часть, дизайнер готовил вторую. Это помогло запараллелить и ускорить работу.
2. Разработка блоков
Этот этап проходит в две фазы.
Фронтенд — то есть сама верстка блоков, как они будут отображаться на сайте.
Бэкенд — подключение блоков к системе управления. То есть мы задаём, какие поля будут редактироваться из административной панели «Битрикса», какого цвета будет кнопка, цвет полей, форма и т. д.
Особенности проекта
Сложность была в том, чтобы спрогнозировать, какие именно нужны блоки и какие у них должны быть функции.
Например, мы делаем блок «баннер с кнопкой» по изначальному ТЗ. В процессе понимаем, что не на всех страницах в рамках нашего фирменного стиля кнопка обязательно должна быть именно того цвета, который указан в ТЗ. Поэтому решаем прикрутить управление цветом кнопки.
Это могло вносить в процесс немного хаотичности, но в результате позволило еще больше облегчить работу клиента с версткой. Так нам удалось создать продукт, который полностью решает задачи бизнеса.
Intensa — производственное агентство для e‑commerce.
Начать проект