Тендеры и лиды
Информация
Сайт Madar стал одним из самых заметных проектов на WDA26: технологичный, смелый, наполненный глубоким смыслом и впечатляющим 3D. Чтобы понять, как создавался такой продукт, мы поговорили сразу с двумя сторонами — агентством Vide Infra и заказчиком Madar. В интервью Vide Infra и Madar рассказывают, как создавали сайт, который не просто решает задачи, а задает новые стандарты отрасли.
Мы пообщались о кейсе с представителями компаний в рамках интервью с участниками текущего сезона премии Workspace Digital Awards. Прием заявок продлится до 27 марта 2026 года. Если у вашей студии есть сильные проекты в разработке и рекламе — приглашаем тоже поучаствовать в нашем конкурсе кейсов!
Антон Сульский, CEO в Vide Infra
Рашид аль-Маймани, Маркетинговый директор в Madar
Начнем!
Антон: Спасибо за столь высокую оценку нашей работы! Мы рады участвовать в конкурсе, особенно учитывая его высокий уровень судейства и организации, и надеемся получить призовые места!
Мы не хотим выделять какой-то конкретный проект среди других, так как все они разные, участвуют в нескольких категориях и было бы некорректно выделять что-либо самим — надеемся на точное и глубокое судейство. Но Madar и несколько других проектов более объемные и сложные. В этом контексте они более ценны для нас. При этом все проекты сделаны с одинаковым уровнем внимания и проработки: и простые, и сложные.
Антон: Мы думали использовать WebGL для иллюстраций на сайте в начале проекта — перевозки ассоциируются с картами и движением и, как минимум, мы могли реализовать что-то в этом духе. Более интересные и оригинальные идеи пришли после разработки контента, когда мы определили УТП продукта и решили иллюстрировать их. Заказчик поддержал идею.
К финальной графике, реализованной на сайте мы пришли через несколько итераций. Было непросто искать образы для таких абстрактных понятий, как «аналитика в реальном времени», «онлайн-платежи» и связать их вместе в единую графическую композицию.
Ключевая 3D-иллюстрация Madar. Финальная визуальная концепция, к которой команда пришла после серии итераций.
Антон: Концептуальную графику для 3D-иллюстраций мы прорабатываем в Figma, а также используем ИИ. После того, как образы и предполагаемая механика устраивает, мы создаем 3D-модель в Cinema 4D, где разрабатываем внешний вид, идеи эффектов и поведение. Визуально, это все еще концептуальная графика, но уже хорошо продуманная.
Финальная проработка наступает, когда мы выгружаем 3D-модель в glTF-формате для Three.JS и воссоздаем внешний вид, эффекты и поведение уже там. Какие-то задуманные эффекты невозможно реализовать из-за очень большой нагрузки на GPU, какие-то идеи приходят на этом этапе, поэтому интеграция также включает дизайн и доводку. Эффекты и интерактив мы пишем кастомно на JavaScript.
Финальные 3Д-модели, используемые в WebGL-иллюстрациях на сайте.
Антон: 3D-моделирование и последующая разработка конечно требуют больше времени, если сравнивать с обычном сайтом. Продолжительность зависит от сложности сцены и эффектов, поэтому трудно сказать, насколько это дольше разработки обычного сайта. Но для проектов уровня Madar или, например, интерактивной карты района, которую мы делали для Nicole (nicole.ru/map), дополнительное время может составлять около месяца.
WebGL поддерживается всеми современными браузерами, в том числе, на мобильных устройствах, поэтому адаптация под них занимает примерно столько же времени, сколько и адаптация обычного фронтенда сайта. Благодаря тому, что пишем кастомный код и не используем какие-либо конструкторы, мы можем оптимизировать его на самом глубоком уровне и добиться отличной работы на мобильных устройствах.
Оптимизация Madar для устройств с низкой производительностью заключалась в понижении качества эффектов — отражений и мягкости свечения, которые требуют мощностей. Технически это не заняло много времени. Скорее, нужно было спланировать такое решение и убедиться, что оно, несмотря на снижение уровня прорисовки, выглядит хорошо.
Мобильная адаптация Madar: WebGL-сцены оптимизированы под устройства с разной производительностью.
Антон: Языковой барьер не был существенным, потому что команда Madar отлично говорит на английском, и мы тоже уверенно общаемся на этом языке, так как давно работаем на международном рынке.
Более сложным оказалось погружение в саму индустрию логистики, ее процессы и терминологию, а также в особенности рынка и регулирования в Саудовской Аравии. Мы организовали серию интервью со стейкхолдерами клиента, с кем-то встречались несколько раз, чтобы уточнить и провалидировать понимание. Анализ продукта, компании, индустрии, рынка, конкурентов и предложение предварительных идей для позиционирования и креатива заняли больше месяца.
Антон: Мы начинаем проект с разработки стратегии сайта. Она включает как фазу сбора и анализа информации, так и синтеза нового знания — понимания специфики и задач проекта, моделирования коммуникационного решения, разработки прототипа и креативной концепции.
Сбор и анализ информации — фундамент для разработки проекта. Сайт — это коммуникационный инструмент, рассказывающий о компании или продукте потенциальным и существующим клиентам и партнерам. Чем лучше мы понимаем продукт, индустрию, компанию, клиентов и конкурентов, тем эффективнее будет сайт.
Мы проводим серию интервью с представителями команды заказчика из разных департаментов, чтобы получить объемное понимание всех этих дисциплин. Стараемся поговорить как с высшим руководством, так и с теми, кто продает или обслуживает клиентов, потому что чем выше в иерархии компании сотрудник, тем дальше в будущем находится его видение и понимание компании.
Благодаря этому, мы можем определить стратегические и тактические цели компании, отличия от конкурентов, потребности потребителей и контекст использования продукта, ценности и характер компании — словом, все, что необходимо, чтобы разработать оригинальное решение, способное донести послание нужной аудитории лучшим образом.
Антон: Текст играет для нас фундаментальную роль, так как в дизайне мы отталкиваемся от него — мы оформляем заложенное в нем сообщение. Поэтому содержание и характер текста напрямую влияют на дизайн.
На главной странице нам нужно рассказать об УТП продукта так, чтобы это сразу зацепило потенциальных клиентов. Клиенты — владельцы и руководители больших предприятий, у которых уже есть настроенные процессы и обслуживающие их ИТ-продукты. Меньше всего они хотят менять их или интегрировать еще один. Поэтому, мы сделали акцент на тех преимуществах Madar, которые дают максимальный эффект для бизнеса:
полный отчет о машине и грузе в реальном времени;
онлайн-кошелек для автоматизации массовых платежей;
маркетплейс для поиска новых клиентов и поставщиков;
возможность быстрой интеграции с существующей ИТ-инфраструктурой.
В сознании профессионала эти атрибуты моментально трансформируются в возможности сокращения затрат, увеличения прибыли, при этом без необходимости чтобы либо менять в уже настроенных процессах в компании.
Антон: У любого продукта или компании есть какая-то выгодная особенность, иначе они не существовали бы. Возможно, продукт проигрывает конкурентам функциями, но берет поддержкой, и т.д. Клиенты за что-то его выбирают и ценят. Необходимо определить данную причину и построить на ней коммуникацию.
Классический пример — слоган Avis, которые проигрывали Hertz: «Мы № 2. Мы стараемся больше», т.е. слабость превратили в преимущество. Но такая идея должна рождаться из реальных инсайтов и точно отражать положение дел, иначе она не будет работать.
Хорошая идея — создать свою категорию, чтобы быть первым и лучшим в ней, а не конкурировать с лидерами в уже существующих. Например, Madar можно было противопоставить конкурентам в уже сложившейся категории Transportation Management Systems. Это не самое удачное решение, так как в ней много крупных игроков мирового масштаба. Вместо этого мы предложили создать новую — Unified Transportation Platform, отличаясь с помощью нескольких уникальных атрибутов продукта. Таким образом, Madar предлагает новую ценность и создает свою категорию, где они — лидер.
Антон: Мы стараемся предлагать такое качество, которое было бы оценено как лучшее на любом рынке. Ведь чтобы работать на мировом рынке, необходимо предлагать лучшее в мире. Это, само собой, касается дизайна и разработки.
Еще очень важно понимание бизнеса и маркетинга — способность понять клиента и самостоятельно предложить решение, которое ему поможет. Нужно вести диалог на том же уровне понимания бизнеса, что и заказчик, чтобы тебе доверяли. Чем больше ценности ты приносишь клиенту, тем больше он готов заплатить за услуги.
Зачастую, приходя за сайтом, на самом деле компании приходят за решением гораздо более общих коммуникационных задач, которые, они может даже до конца не осознают. Они понимают, что им нужен сайт. Но в реальности им нужно найти новый способ говорить о себе и своих услугах так, чтобы это их выделяло на фоне конкурентов, было аутентичным, и вдохновляло их клиентов и саму команду. Для этого нужно уметь смотреть дальше задачи по разработке и понимать: как помочь клиенту сформулировать не только ответы, но и вопросы, которые нужно решить перед тем, как вообще браться за дизайн и разработку.
Рашид: Madar — это инновационный и прогрессивный продукт, и я искал компанию, способную разработать такой же сайт. Я нашел работы Vide Infra на Awwwards — это престижный конкурс веб-дизайна, где можно найти самые передовые решения. В сайтах, разработанных Vide Infra, есть баланс между креативностью и серьезностью. Это позволяет им привлекать внимание, вдохновлять, но в то же время быть прекрасным бизнес-инструментом. Именно такую комбинацию я искал, и она встречается не так часто.
Поэтому, Vide Infra привлекла мое внимание. Мы организовали несколько встреч, чтобы познакомиться с компанией и убедиться, что они могут понять наш продукт и задачи, стоящие перед нами. У нас не было готового задания для дизайна и разработки, и было важно, чтобы партнер мог проанализировать материалы, понять задачу и решить ее самостоятельно и на самом высоком уровне.
Рашид: Саудовская Аравия стремительно развивается. Вы наверняка слышали про самые амбициозные в мире проекты в сфере недвижимости, градостроения и индустрии, которые возводятся в нашей стране. Они, а также миллионы других проектов и бизнесов, зависят от логистики — своевременной и эффективной транспортировки грузов.
Madar решает весь комплекс задач, связанных с управлением логистикой. От поиска подрядчиков, до планирования маршрутов, финансов и расчетов, состояния перевозки и груза. Словом, всего, что может быть необходимо, чтобы эффективно управлять бизнесом.
Ключевое отличие Madar от конкурентов в покрытии всех сфер и задач как для перевозчиков, так и для заказчиков. А еще невероятный уровень технологического решения: от мониторинга состояния груза, включая температуру и нахождение, до анализа бизнес-рисков, состояния техники и документов водителей, финансового анализа и многого другого. На рынке есть множество конкурентов, кто предлагает часть возможностей Madar, но не все. Кроме этого, клиентам не обязательно менять существующие системы на Madar. Можно подключить Madar к ним и получать дополнительную выгоду за короткое время.
Рашид: Наш первый горизонт после Саудовской Аравии — это ближайшие к нам страны, регион MENA. Мы уже ведем активные работы там. Но лидерская позиция на рынке Саудовской Аравии — уже превосходное достижение и пока мы нацелены на него.
Рашид: Наша задача — показать через сайт, что мы не еще одно решение из целого набора аналогов, а прорывной и инновационный продукт. И на потенциальных клиентов сайт работает именно так. Он отлично передает ощущение технологического новаторства продукта, и в то же время, прекрасно справляется с передачей рационального сообщения — выгод использования и простоты интеграции.
Насколько я могу судить, на нашем рынке, и даже в мире, похожего сайта нет. Это дает нам преимущество в привлечении внимания потенциальных клиентов.
Рашид: Сайт служит прекрасным инструментом для создания и поддержки передового имиджа компании. Особенно для продаж и прямого маркетинга, когда потенциальные клиенты заходят на сайт для получения дополнительной информации или подтверждения своего представления о компании и остаются приятно удивлены его уровнем.
Рашид: В подходе Vide Infra нам сразу понравилось то, что разработка сайта начиналась с проработки стратегии. Это стало важным фактором при выборе агентства. Без четкого понимания, что и как нужно рассказать о продукте, невозможно создать по-настоящему эффективный сайт.
Использование элементов бренда, выделенных Vide Infra для создания визуального языка сайта, было неожиданным, но эффектным решением. Этот момент занял несколько итераций и дискуссий — главным образом, потому что финальное решение в 3D сильно отличалось от первых, общих набросков. Однако итоговый результат превзошел ожидания: и графика, и анимации получились превосходными.
Рашид: Материал, разработанный Vide Infra для сайта, мы используем в наших презентациях и промо-материалах. А визуальный язык, созданный для сайта, позволил перевести оформление наших промо-материалов на новый качественный уровень.
Рашид: Мы не то, что бы однозначно хотели получить 3D-анимации, когда начинали работу. Скорее, мы хотели получить выдающийся сайт, сделанный с передовыми дизайн- и техническими решениями. Vide Infra показывали нам свои наработки в WebGL при первых встречах, они выглядели интересно, и мы были не против попробовать эту технологию.
Когда команда создала отличный дизайн на смысловом и визуальном уровне — это было уже впечатляюще, а реализация в 3D стала «вишенкой на торте». Наши пожелания лежали прежде всего в бизнес-сфере, в смысле и эстетике. В технической реализации мы были уверены, так как у агентства серьезный послужной список, и вряд ли это стало бы проблемой.
Визуальный язык Madar, созданный для сайта, стал основой презентаций и маркетинговых материалов компании
Рашид: Наша маркетинговая стратегия включает целый комплекс активностей: выставки, конференции, рекламу и прямую коммуникацию. Задача сайта — поддерживать все это максимально эффективно. Мы стараемся передать всю полноту новаторского решения Madar в каждом канале и, конечно же, будем развивать этот имидж.
Супер! Желаем вам удачи в покорении новых горизонтов и благодарим за участие в интервью!
