Многостраничный корпоративный сайт для Infinium: экосистема сервисов логистики на базе ИИ и Big Data

«Ребята, на стороне заказчика есть маркетолог и дизайнер», сообщил нам Head of PM. Мы радостно подготовили и отправили подробный бриф на 60+ вопросов. Когда в синергии работает диджитал-маркетолог и профильный продуктовый специалист, результат всегда бомбический. С вас подробнейшие данные, с нас — мощнейший продукт. Не тут-то было: ответы получили всего на 10% брифа.

Без внятного ТЗ, результат… Head of PM сориентировался быстро: позвонил, договорился о встрече, и, максимально оптимизировав маршрут, привез маркетолога оффлайн в офис заказчика. В БелТрансСпутнике не только ответили на все вопросы, но еще и провели экскурсию и погрузили в работу компании.

Итого: собраны живые и качественные вводные данные и исключен классический риск на старте проекта — недостаточное или неверное понимание бизнеса заказчика.

50+ сайтов логистических компаний, и везде одно и то же:

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

А дизайнеры в сторону этих сайтов вообще смотреть боялись. Но смотрели и плакали. О мобильной оптимизации речи вообще не велось.

Вывод простой: в узкоспециализированной сложной нише конкуренты даже не пытаются адаптироваться к трендам и развиваться. Вместо этого продолжают использовать паттерны из начала 2000-х. А, может, и 1990-х. Это создает огромный разрыв между ожиданиями клиентов и реальным опытом. Мы поняли, что задача Infinium — разорвать этот шаблон.

Но были и хорошие находки. У некоторых сайтов мы подсмотрели интересные идеи: динамическая подача данных, акцент на кейсы клиентов, лаконичные офферы. Мы вписали их в нашу стратегию — но на своих условиях.

У проекта такая ЦА, которую не найдешь в пабликах ВК. А вот конференции по ИИ, бизнес-миты, семинары — мы побывали везде, такие «шпионы Tibo-2024».

ЦА Infinium — это люди, которые понимают, что такое управление процессами:

• мужчины (85%) и женщины (15%), 27–45 лет
• владельцы бизнеса, руководители, C-level
• не консерваторы, напротив, готовы инвестировать в технологии
• ценят диалог по делу: выгоды, цифры, перспективы.

При этом ЦА ожидает, что интерфейс будет понятным и легким в использовании, а подрядчик — на одном с ними уровне ответственности.

Анализ конкурентов и аудитории — отправная точка проекта. Задача любого сайта не в том, чтобы удивить: а в том, чтобы решить проблемы пользователей — и сделать это лучше, чем делают все остальные

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

Здесь не обошлось без экспертных баттлов. Заказчик настаивал на длинных заголовках из 25 слов (каждое из которых открывается по скроллу). Мы же понимали, что аудитория Infinium — это бизнесмены aka люди, привыкшие к конкретике. Им не нужны красивые термины и они не обязаны в них разбираться. Их интересуют цифры и выгоды.

Мы переработали текст с нуля, избавились от избыточной сложности, но сохранили экспертный тон. Короткие и четкие заголовки, акценты на лаконичных емких УТП и ответ на вопрос клиентов: «Почему вы для меня выгодные?»

В кейсе звучит легко и просто, но этапов согласований мы прошли немереное количество. И каждый конверсионный символ отстаивался нашей Head of Marketing.

Как мы справлялись — красной нитью проходит по тексту нашего кейса.

Мы разработали 5 прототипов — для каждой страницы.

Кейс Infinium, действительно, уникальный во многих отношениях. Например: как правило, мы не отрисовываем на этапе проектирования шаги квизов, поп-апы, виджеты и, в целом, второстепенные элементы. Вместо этого описываем их в ТЗ дизайнерам, сразу раскрывая логику и механику работы. Infinium стал исключением: мы отрисовали каждое модальное окно, тонко прорабатывая юзабилити совместно с UX/UI дизайнерами — было крайне важно, чтобы пользователь не потерялся в потоке информации и вовремя дошел до целевого действия.

Первое, на что мы обратили внимание, — структура. Три продукта Infinium нужно было подать как единую экосистему, но при этом сохраняя их индивидуальность. Мы выстроили пользовательский путь таким образом, чтобы клиент:

1. Понял ценность каждого продукта
2. Быстро нашел информацию о функционале
3. Легко перешел к следующему целевому шагу — кейсам, контактам, демо

Динамика страниц — ключ к удержанию внимания. Вместо линейной подачи информации использовали прогревающую формулу: один блок вовлекает, второй — информирует, третий — подталкивает к действию.

Прототипы прошли несколько юзабилити-тестов. Мы собрали фокус-группы из представителей ЦА Infinium, с которыми познакомились на конференциях. Вместе прошлись по прототипам и выяснили: какие элементы требуют доработки.

Прототипы — не «черновик» сайта, а продуманное UX-решение, где каждый элемент имеет место и назначение. Так мы задали задали структуру проекта и заложили верные смыслы.

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

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

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

Для каждого проекта мы готовим как минимум три принципиально разные концепции.

Концепция 1
В первой концепции отобразили идею в классическом представлении. «Невесомый» кубик Рубика собирается через анимацию при загрузке страницы и затем разделяется на части, демонстрируя три продукта. В основе цветовой палитры синие и голубые оттенки — технологичные и инновационные.

Концепция 2
На второй концепции центральным элементом композиции стал сложный куб. На цветных гранях мы разместили первые буквы продуктов Infinium, а при наведении курсора один из сегментов должен был подсвечиваться и выезжать вперед. Концепция обращала на себя внимание яркостью и детализированностью.

Концепция 3
В третьей концепции мы предложили чуть отойти от кубика Рубика, но сохранить идею системности. В центре экрана — обтекаемая фигура, вокруг которой концентрируются элементы. Основной акцент был сделан на тексте и УТП, поддерживаемых анимацией вращения элементов по оси. Универсальный стиль и легкость восприятия делает такие концепции идеальными для корпоративного сайта.

В работу ушла *барабанная дробь* концепция 1.

Если вкратце, мы очень усердно доказывали, что дизайн должен работать на пользователя, а не на субъективные предпочтения. В центре внимания — не эстетика, а функциональность, подкрепленная аналитикой и UX-логикой.

Блок за блоком мы прорисовывали главную страницу проекта:

• прорываясь через новые челленджи,
• отстаивая конверсию,
• свято придерживаясь дизайн-инжиниринга.

Точно выдерживали стилистику концепции первого экрана, продумывали sophisticated UX в компоновке каждой группы элементов, создавали акцентные шрифтовые композиции и на ходу придумывали и внедряли динамические фишки.

Отточили главную, а затем разработали и остальные страницы:

1. Кейсы. Структурированные, детализированные и максимально понятные, несмотря на значительный объем контента. Акцент сделан на результатах.
2. Экспертиза. Ответы на вопросы оформили в стильные карточки — даже стандартную страницу можно сделать не только продвигаемой в SEO-выдаче, но и стильной и креативной.
3. О нас. Анимации в каждом блоке, как вам такое? А еще точное отражение айдентики компании и формирование мощного образа на рынке через визуал.
4. Контакты. Вместо стандартной квадратной карты из Гугла сделали аккуратный блок с мягкими скругленными углами. Могли бы сделать «как все», но такое не подходит.

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

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

Как вы уже поняли, анимации у нас много.

Artificial Intelligence, как одно из сильнейших УТП проекта, мы отобразили через точки, представляющие нейронные связи. Точки плавно перемещаются, образовывают сложные фигуры и имитируют обработку данных. Мы связали абстрактные концепции ИИ с визуальным образом, который легко воспринимается даже неподготовленными пользователями.

Особого внимания заслуживают 3D-машинки, которые Lead-дизайнер нарисовала для примера, но заметила в них скрытый потенциал. Машинки стали визуализацией логистических процессов, которые оптимизируются с помощью платформы Infinium. Каждая движется по заранее заданной траектории, отображая суть продукта — управление транспортом и маршрутизирование в реальном времени.

Мы совершенны в мелочах, это факт. Так, практически каждый элемент интерфейса интерактивный — кнопка меняет цвет при наведении, текстовые блоки появляются постепенно, а ключевые компоненты сопровождаются ненавязчивыми эффектами. Микро анимации создают дополнительный уровень вовлеченности, делая взаимодействие с сайтом более тактильным и эмоциональным.

Кстати, гордимся тем, что каждую анимацию отрисовывали вручную через Adobe After Effects. Устали? Не-а, еще хотим.

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

Что касается сложных анимаций, о которых мы так много говорим. Уникальный пользовательский опыт — да. Запредельно высокая нагрузка на устройства — ага. Но мы умеем работать и с таким. Чтобы избежать проблем с производительностью, мы оптимизировали скрипты, снизив их объем и активируя анимацию только при взаимодействии пользователя с соответствующим блоком.

Особое внимание уделили адаптивности. Сайт Infinium задумывался как инструмент, одинаково удобный и доступный на всех устройствах, от десктопов до смартфонов. Мы адаптировали структуру блоков, сохранив интуитивность и ясность навигации. Анимации и интерактивные элементы переработали так, чтобы не потерять в функциональности.

Backend — весело и прикольно, но мы, естественно, расскажем именно про кастомные шаблоны управления контентом. Заказчик хотел редактировать кейсы и статьи через админку, сохраняя уникальный визуальный стиль сайта. Мы реализовали гибкую систему шаблонов, которая позволяет легко добавлять новый контент без риска разрушить общую логику и эстетику страниц. И, конечно, инструкцию прислали по почте (на всякий случай).

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

Заказчику сайт понравился, а лидов мы ему приведем. Канон: каждый диджитал-продукт работает только в стратегической связке с другим продуктом. Настройка и ведение контекстной рекламы для сайта Infinium — часть стратегии по привлечению целевого трафика и увеличению конверсий через точные и проработанные рекламные кампании.

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

Для начала, сформулировали четкие бизнес-цели:

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

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

Подобрали более 200 ключевых слов и фраз, которые наилучшим образом отражают запросы аудитории, и разработали несколько уникальных рекламных креативов. Мы, знаете, немножко волшебники: проходим модерацию с первого раза даже в сложных и деликатных тематиках. Запустились идеально — дело за тестами.

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

Результат? За первый месяц привлекли качественный горячий трафик, снизили долю нерелевантных запросов до 5% и вышли на прогнозируемый уровень стоимости клика — $0.50–$0.80 для массовых запросов.