AGIMA Вихрь: оптимизация процессов дизайна

AGIMA Вихрь — внутренний конструктор кейсов и промостраниц. Он собирает типовые компоненты в единый процесс, сокращает ручную вёрстку и позволяет дизайнерам быстрее публиковать результат проекта.

Коротко

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

Было	Стало
Отдельный макет и ручная вёрстка каждого кейса	Сборка из готовых компонентов
Зависимость от свободного верстальщика	Публикация силами дизайн-команды
Повторное согласование типовых решений	Единые правила сетки и типографики

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

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

При этом дизайнеры отдельно делали кейсы на Behance, но прямо перенести их на сайт не получалось. То есть, Behance он для дизайнеров, а нам еще очень многое нужно сказать. Нестыковка.

Вихрь

Поэтому в начале года мы приняли жесткое решение об упрощении. У нас выходил новый сайт (я писал здесь про это, его надо было насытить новыми кейсами. «Времени на раскачку нет», — сказал наш бизнес лидер. Так появился ВИХРЬ.

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

Интерфейс конструктора AGIMA Вихрь с библиотекой блоков

Начали с самых простых вещей. Вот этот кейс о наших работах для Эльдорадо собран самым банальным образом: картинка + текстовый блок (повторить) + блок с командой внизу. Ничего больше! Почему было нельзя сделать так раньше? Это, действительно, странно, потому что до этого мы уже сделали несколько описаний, дизайнеры придумывали анимации. Все в топку!

Формула 1+1

Конечно, было бы очень скучно всегда иметь одинаковую подачу. Всегда есть специфика, всегда есть различные моменты, которые нужно подчеркнуть. Но мы помним нашу первичную задачу ускорения. Тот же конструктор можно усложнить до безобразия. Отсюда появилась формула 1+1 — для каждого нового кейса мы внедряем в Вихрь один новый кастомный блок. Обогащаем и развиваем систему ритмично.

Сам конструктор предельно простой. Если раньше нужен был верстальщик, то теперь со сборкой кейса справляются стажеры PR-отдела. Представляете какая экономия?

Статистика

В 2019 мы выпустили всего несколько кейсов. 4 месяца на кейс. Сейчас — один кейс в месяц.

Затраты:

Дизайн: было — 30 часов / стало — 6 часов Верстка: 12 часов / 0 часов Тестирование: 2 часа / 0 часов Интеграция: 1 час / 0 часов Да, дизайнер нам все еще нужен. Он переносить макеты в шаблоны Вихря в фигме, но из-за общей стандартизации процесс идет быстро.

F *ck it, Dude. Let’s go bowling.

И one more thing. Почему новый подход заработал? Потому что мы решили ориентироваться не на супер-профессиональную публику, экспертов рынка, гуру-дигитализации, а на обычных людей. На условного расслабленного Чувака. Что он поймет, лениво пролистывая наш кейс, попивая белый русский?По статистике кейсы смотрят 20% посетителей и смотрят по три кейса. Среднее время просмотра кейса 2,5 минуты. Это не мало, но для того, чтобы прочитать большой кейс-статью явно недостаточно. А что самое главное, конверсия в заявку у тех, кто кейсы посмотрел, выше.

Раньше кейс готовился как статья. Теперь это презентация! Буквально. Презентация в гугл докс. Только основные мысли. Поменьше воды. Информационный стиль и несколько важных картинок.

Вот, например котики.Приложение Petstory. Весело, кратко и хорошо. Сделано на Вихре, прошло тест расслабленного чувака. Очень простой, кстати, тест. Даете ссылку кому-то совсем не в теме. Очень далекому от разработки. Например, твоему дяде, военному врачу. Он смотрит и отвечает на несколько вопросов. О чем был кейс? Что мы сделали? Круто?Если круто, но непонятно, как часто бывает на awwwards, значит надо еще поработать.

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