Имиджевый сайт поставщика нефтепродуктов

Компания «Рус-ОйлЭкс» работает на рынке нефтепродуктов с 2016 года и занимается поставками топлива, транспортной логистикой и трейдингом. Центральный офис расположен в Санкт-Петербурге, также компания представлена в Москве и Казахстане.

Основные направления деятельности компании:

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

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

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

При этом важно понимать одну особенность проекта.

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

Здесь ситуация была совершенно иной.

Компания не планирует использовать сайт как инструмент лидогенерации. 

Основные задачи нового сайта выглядели следующим образом:

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

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

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

Отдельной проблемой являлся визуальный стиль.

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

Кроме этого, страницы были оформлены по-разному.

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

Несмотря на то что при разработке имиджевого сайта мы понимали, что он не предназначался для SEO-продвижения, этап проектирования оказался не менее важным, чем в проектах, ориентированных на поисковый трафик.

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

Мы отказались от концепции непрерывной презентации и построили классическую многостраничную архитектуру.

На сайте появились самостоятельные разделы:

• Главная;
• О компании;
• Логистика;
• Трейдинг;
• Новости;
• Контакты.

Теперь пользователь в любой момент понимает, где именно находится и как перейти в интересующий раздел.

При разработке структуры мы постарались максимально приблизить архитектуру сайта к устройству самого бизнеса.

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

В новом проекте каждое направление получило собственную страницу и самостоятельную структуру.

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

Основной задачей при разработке дизайна имиджевого сайта было создать впечатление компании федерального масштаба еще до того, как пользователь начнет читать текст.

Поэтому главный акцент проекта сделан именно на визуальную составляющую.

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

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

Такое решение позволило добиться сразу нескольких целей.

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

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

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

Фактически дизайн стал главным инструментом коммуникации с посетителем.

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

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

Еще одна задача проекта заключалась в том, чтобы привести весь сайт к единому визуальному стандарту.

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

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

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

Единые правила оформления применяются ко всем элементам сайта: типографике, карточкам, кнопкам, цветовой палитре, отступам и принципам размещения информации.

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

Для корпоративного сайта это особенно важно. Именно единая дизайн-система формирует ощущение целостности бренда и становится одним из признаков профессионально выполненного проекта.

Работая над новым сайтом, мы уделили большое внимание тому, как воспринимается информация.

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

В новом проекте мы изменили сам принцип подачи.

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

Такой подход делает информацию значительно более наглядной.

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

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

Одной из важных задач стало переосмысление структуры услуг компании.

Исторически «Рус-ОйлЭкс» развивает два самостоятельных направления деятельности: логистику и трейдинг. Однако на старом сайте эта особенность практически не ощущалась.

Различные услуги располагались рядом друг с другом без выраженной структуры. Железнодорожные перевозки, экспедирование, трейдинг и другие направления воспринимались как единый перечень возможностей.

В новом проекте архитектура сайта полностью повторяет устройство самого бизнеса.

Появились два крупных самостоятельных раздела — «Логистика» и «Трейдинг». Каждый из них подробно рассказывает о своем направлении работы и имеет собственную структуру.

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

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

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

Масштаб компании определяется не только объемом перевозок, но и географией работы.

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

В новой версии сайта мы объединили всю географию в единый интерактивный блок.

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

Такое решение позволяет буквально за несколько секунд оценить масштаб присутствия компании.

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

Одной из самых заметных переработок стал раздел, посвященный истории компании.

На старом сайте информация о развитии «Рус-ОйлЭкс» была представлена в виде нескольких больших абзацев. Дата основания, расширение географии присутствия, развитие собственного парка цистерн и другие важные события следовали друг за другом обычным текстом. Формально вся необходимая информация присутствовала, но воспринималась она тяжело.

В новой версии сайта история компании получила собственную страницу с интерактивной временной шкалой.

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

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

Такое решение значительно лучше соответствует задаче имиджевого сайта.

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

Еще одним новым разделом стали новости компании.

На старом сайте полноценной новостной ленты не существовало. Из-за этого после знакомства с основной информацией ресурс практически переставал развиваться с точки зрения посетителя.

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

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

На момент завершения разработки раздел только начинает наполняться, однако сама структура уже готова к дальнейшей работе.

Это позволяет компании регулярно рассказывать о расширении собственного парка, новых проектах, развитии логистической инфраструктуры и других значимых событиях.

Даже если сайт не используется для привлечения клиентов через поисковые системы, наличие новостного раздела остается важным элементом корпоративного ресурса. Он показывает, что компания продолжает развиваться, а сам сайт остается актуальным после запуска.

Страница контактов также была полностью переработана.

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

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

Отдельное внимание уделили структуре контактов.

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

Еще одна особенность проекта — отсутствие формы обратной связи.

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

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

Для B2B-сегмента подобный подход выглядит более естественным. Когда речь идет о крупных поставках и долгосрочном сотрудничестве, партнеры чаще предпочитают сразу общаться с конкретным человеком, а не отправлять запрос через универсальную форму.

При разработке мобильной версии мы не ограничились простой адаптацией десктопного интерфейса.

Перед нами стояла задача сохранить то впечатление, которое производит сайт на больших экранах.

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

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

Отдельного внимания заслуживает подход к контактной информации.

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

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

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

Сайт разработан на платформе 1С-Битрикс, которая обеспечивает удобное управление контентом и дальнейшее развитие проекта.

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

В результате компания получила современный корпоративный сайт, который соответствует ее текущему позиционированию и масштабу бизнеса.

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

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

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

Этот проект показывает, что корпоративный сайт далеко не всегда создается ради поискового продвижения или получения заявок.

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

В подобных случаях главной задачей становится не количество лидов, а качество первого впечатления.

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