Madar. Масштабный корпоративный сайт для IT-стартапа из Саудовской Аравии

Madar — лидирующие разработчики IT-решений для логистики в Саудовской Аравии. Компания помогает транспортным предприятиям и крупным корпорациям автоматизировать и упростить управление автомобильными перевозками.

Компания развивается, выходит на новый уровень и ищет способ заявить о своем масштабном и комплексном продукте. Им нужно подчеркнуть свой статус новаторов, которые преобразуют глобальную индустрию. Чтобы выделяться в мировом контексте, они обратились к нам за вдохновляющим, глубоким и убедительным корпоративным сайтом.

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

Как сломить предвзятое отношение и достучаться до консервативных клиентов? Нам нужно было одновременно зацепить их свежим прогрессивным дизайном и объяснить сложное и нестандартное предложение Madar — чтобы те, кто сопротивляется инновациям, их захотели. У нас большой опыт в решении подобных задач, но на этот раз перед нами стояло сразу несколько дополнительных сложностей:

— Комплексный продукт. Madar — это обширная экосистема из инструментов для менеджмента и анализа логистики, мобильных приложений, смарт-устройств, систем автоматизации документооборота и платежей,интегрированная с государственными цифровыми сервисами. Эта платформа объединена с маркетплейсом Madar — агрегатором, на котором грузоперевозчики находят клиентов. Потребовалось глубоко разобраться в функциональных особенностях продукта, чтобы сделать эффективный сайт.

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

— Непривычная индустрия. Когда мы приступали к проекту, у нас не было четкого понимания того, как организована цепочка ценности в логистике. А чтобы сделать эффективный корпоративный сайт, необходимо понимать, с какими проблемами сталкиваются клиенты Madar, какие у них потребности, как Madar им помогает. Наш метод работы позволяет оперативно разобраться в новой сфере и ответить на эти вопросы.

— Новый регион. Madar — не первая компания из региона MENA, с которой мы работаем. Тем не менее нам пришлось погружаться в особенности правового регулирования логистики, а также принципы работы eGov сервисов Саудовской Аравии, чтобы полностью понять контекст рынка.

— Двойная аудитория. Madar предлагает решения для компаний, обладающих собственным транспортом или пользующихся услугами перевозчиков, а также для самих перевозчиков. Интересы этих аудиторий могут не просто не совпадать,а противоречить. Нам нужно было рассказать о преимуществах Madar, учитывая и тех и других.

Чтобы создать эффективный сайт с передовым дизайном, мы предложили основательное и комплексное решение:

— Провели исследование компании.

— Разработали стратегию сайта.

— Выстроили структуру и подготовили контент.

— Доработали фирменный стиль и разработали дизайн.

— Создали презентацию для главной с 3D анимацией на WebGL.

— Реализовали сайт, позаботившись об оптимизации и адаптивности.

— Локализовали сайт для Саудовской Аравии.

Мы начинали работу над проектом с воркшопов — серии встреч с командой Madar. Это продолжительные беседы с топ-менеджментом, маркетологами, техническими специалистами, менеджерами по работе с клиентами.

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

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

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

Все это составляет стратегию сайта, вместе с целью, структурой, а также первичными креативными идеями и требованиями к SEO. Стратегия фиксируется в Definition Document, который позволяет убедиться, что мы с клиентом одинаково понимаем цели и задачи сайта. Четко выстроенная стратегия нужна для того, чтобы согласовать все элементы, заставить их работать на единый лаконичный месседж. Тогда воздействие на клиентов будет максимальным.

Для многих наших клиентов не очевидно, каким контентом наполнить корпоративный сайт — о чем и как рассказывать? Этот вопрос снимает грамотно проведенное исследование: тесты и структура сайта выстраиваются в соответствии со стратегией.

На сайте Madar акцент сделан на описании продукта: на главной — эффектном и лаконичном, на внутренних страницах — детальном. Раздел с кейсами и презентация компании усиливают имидж и повышают доверие к Madar.

Главная

Главная страница должна поражать и захватывать внимание клиента. Роль текстов здесь — превзойти ожидания. Клиент видит, что его потребности понимают, но Madar предлагает сверх того, на что он рассчитывал.

Описание продукта

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

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

О компании

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

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

Case studies

Истории клиентов Madar — это возможность продемонстрировать наглядный результат работы. Потенциальным клиентам проще соотнести себя с конкретным примером, и оценить, что Madar может принести их бизнесу.

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

С помощью дизайна мы переводим кристаллизованные в текстах идеи на новый уровень. Дизайн Madar доносит ощущение новизны и выдающегося качества на языке визуальных впечатлений.

Заряженная энергией футуристичная 3D-анимация вдохновляет и задает настроение, с которым клиенты будут изучать продукт. Она ведет пользователей сквозь презентацию, в которой максимально емко сконцентрированы основные преимущества Madar. Благодаря выразительной графике они цепляют клиента на уровне ощущений и запоминаются.

Пульсирующие неоновые линии сплетаются в визуальные метафоры. Образы дороги, движения — не просто означают логистику, они вызывают ассоциации с деловым азартом, перспективами, скоростью развития. График превращается в горы, которые преодолевают грузовики клиентов, чтобы привести их бизнес к вершинам.

Фирменный стиль

Все богатство эффектных образов вырастает из лаконичного набора сдержанных визуальных средств. Когда мы приступали к работе над проектом, у Madar была очень ограниченная айдентика. Мы взяли за основу ключевые элементы визуального стиля: динамичные линии на темно-синем фоне — и существенно их развили.

Обновленная айдентика стала более современной — она подняла бренд на уровень выше, усилив его индивидуальность, и дольше останется актуальной. Ее можно экстраполировать на другие ресурсы компании. В рамках проекта она дала нам творческую свободу для создания современного, выразительного дизайна.

Внутренние страницы

Цельное стилистическое решение ярче всего выражено в дизайне главной, но оно пронизывает сайт от начала до конца. Каждая деталь интерфейса и все внутренние страницы продуманы и выверены.

Мы добились комфортного UI-дизайна, не пожертвовав эстетическим единством. Такая забота о качестве сайта считывается клиентами как признак высокого качества продукта Madar: если сайт выглядит так, то продукт должен быть потрясающим.

Мы добились комфортного UI-дизайна, не пожертвовав эстетическим единством. Такая забота о качестве сайта считывается клиентами как признак высокого качества продукта Madar: если сайт выглядит так, то продукт должен быть потрясающим.

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

Кастомные иконки и инфографика визуализируют преимущества Madar. Наглядная, структурированная информация проще считывается и отпечатывается в сознании клиентов.

Анимация на WebGL

Ядро проекта — потрясающая трехмерная презентация, открывающая сайт. Каждый экран главной — вовлекающий интерактивный баннер. Такой продвинутый визуал мы разработали с помощью WebGL.

WebGL позволяет создавать интерактивную динамическую 3D-графику прямо в браузере. С ее помощью можно делать новаторскую анимацию и зрелищные визуальные эффекты. Madar — прекрасный пример того, на какой уровень можно поднять корпоративный сайт благодаря WebGL.

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

Взаимодействие в команде

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

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

Синхронизация элементов

Разработать WebGL анимацию — только часть задачи. Ведь это не изолированная графика, а один из элементов презентации. Чтобы презентация была иммерсивной и бесшовной, потребовались дополнительные усилия. Мы тщательно синхронизировали WebGL анимацию с анимацией веб-компонентов.

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

Смарт-оптимизация

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

Локализация

Сайт полностью локализован для Саудовской Аравии: переведен на арабский и адаптирован для удобного чтения справа налево.

Масштабный и новаторский корпоративный сайт — под стать самому продукту Madar. Он работает и как лендинг, и как исчерпывающая презентация очень высокого уровня.

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