Промышленный гигант в онлайне. Как мы делали корпоративный сайт-каталог для лидера отрасли в России

1. Вводная задача от заказчика, проблематика, цели

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

2. Создать индивидуальный дизайн сайта на основе фирменного стиля.

3. Сделать сайт презентабельным настолько, насколько масштабной является деятельность компании.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Убийственное комбо: сложный продукт, тяжелый заказчик

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

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

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

• Выйти в ТОП поисковиков.
• Разместить всю продукцию на сайте настолько просто, чтобы любой пользователь смог найти то, что ему нужно. Естественно, с любого устройства, операционной системы, браузера и планеты солнечной системы.
• Сделать админку настолько простой, чтобы из неё можно было размножать сайт на разные языки без привлечения айтишников.
• “Показать всем, что мы – компания Мирового уровня” (с) Первый из четырех маркетологов, с которыми нам предстояло еще поработать.

Мы начали изучать: встречались с сотрудниками компании, проводили опросы, читали статьи, ездили на производство, изучали тему геокомпозитных материалов на ютубе и википедии, читали отзывы и смотрели новостные репортажи со строек, свалок и заводов. На пару недель мы “влезли в шкуру” клиентов Техполимера и поняли, что им нужно.

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

Мы сохраняли железобетонное спокойствие и ясность ума, ведь четко понимали – клиент хочет сделать ХОРОШО. А мы пришли ему в этом помочь, поэтому максимально прислушивались и пытались создать синергию. И снова вносили правки и новшества.

Урок №1: Экспертность ничего не стОит, если не знать бизнес клиента изнутри.

Семантика – необъятная и прекрасная

Геокомпозит, БлокТех, ТехноГрасс.. Армированная решетка, укрепление откосов, анкерные листы… Так звучал сонный бред нашего сеошника после сбора семантики для будущего сайта.

Семантика была действительно объёмной: мы собрали более 3500 поисковых фраз, прошлись по каждой и отсеяли ненужное. Получилась структура, включающая в себя 50 тем, на которые мы потом писали seo-тексты. Также структура легла в основу каталога.

А еще мы поняли:

- геосинтетика используется везде;

- многие люди ищут её по отраслям, например: геосинтетика для дорожного строительства.

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

Урок №2: Собирай семантику.

Кто прототип хороший сделал, тот на дизайне отдохнул. Или нет?

Наш дизайнер справедливо заметил: боевой контент на прототипах позволит сделать их максимально полезными и понятными – и согласуем быстрее, и на дизайне время сэкономим. Мы кивнули головой и собрали весь необходимый контент.

Сделали порядка тридцати симпатичных прототипов: разместили блоки, прикинули, какой может быть текст. Даже фотографии черно-белые разместили, чтобы все вопросы отбросить. Это помогло согласовать прототипы быстро, так как клиент с первого взгляда понял, какой контент будет размещаться на страницах. А тот факт, что мы использовали реальные данные, а не всякие lorem ipsum, сделал прототип таким родным…

Но здесь показался второй конец палки: клиент настолько привык к тому, как сайт выглядит на прототипах, что на этапе дизайна наши руки уже были связаны. Мы предлагали изометрические иконки, моушн, модные плавные градиенты и паттерны – всё зря. Ничего уже не нравилось. Хотелось просто разукрасить прототип и двигаться дальше. Мы погрустили и разукрасили.

Важно: Мы ни в коем случае не говорим, что результат получился плохим. Он получился строгим, консервативным и совсем не вычурным.Таким, каким хотел его видеть клиент

Урок №3: Чрезмерная детализация прототипов отнимает творчество на дизайне.

1000 и одна связь

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

Такие вот вводные, из которых нужно было сконструировать структуру базы данных.

Снаружи получилось изящно и просто: со страницы отрасли можно перейти в продукцию, в ней посмотреть подвиды продукции и узнать всю информацию о ней. Из продукции можно посмотреть объекты, на которых она применялась. И всё то же самое, но в другую сторону: Объекты – Продукция – Отрасль.

Вывели связи в фильтры и поиск, приправили тегами. Текстовые материалы (статьи и новости) тоже можно фильтровать по отраслям и продукции.

Урок №4: Грамотная база данных – основа удобной навигации

Админка

Сайт для Техполимера мы написали на Python’e, использовали фреймворк django. Так как сайт мультиязычный, а языковые версии должны создаваться из админки, мы вывели в неё всё. Каждую кнопку, каждый плейсхолдер. И, что удивительно, получилось довольно просто – клиент быстро научился управлять сайтом из админки, не путался “где что искать” и ничего не сломал. Сайт полностью наполнялся людьми, совершенно не являющимися профессиональными контент-мастерами.

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

Что касается контента: для фотогалерей предусмотрена мультизагрузка, все превью можно кропать вручную, для видеороликов загружаются обложки, на случай, если на ютубе обложка некрасивая.Многих нужных заказчику инструментов в стандартной “коробке” джанги не было, поэтому админку мы делали довольно долго. Но это явно стоило того.

Урок №5: Мало разработать классный сайт, нужно сделать его управляемым.

3, 2, 1...Запуск

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

3. Результаты сотрудничества

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

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

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