АПА-КАНДТ СИБИРЬ — сайт для лидера в поставках оборудования высокого давления

Компания АПА-КАНДТ СИБИРЬ (АКС) поставляет оборудование из Европы и Китая — технологии высокого давления (мегамощные насосы), комплектующие для металлургии и нефтегазовой промышленности, — а также развивает водородную энергетику.

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

Теперь к проблеме. Прежний сайт компании неплохо работал и закрывал основные задачи, но не формировал имидж компании.

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

Разработали современный сайт с продуманным UX от идеи до запуска.

1. Провели аналитику рынка и целевой аудитории;

2. Собрали вайрфреймы будущего сайта и адаптировали их под SEO;

3. Освежили брендинг клиента;

4. Создали дизайн сайта с живыми анимациями;

5. Разработали фронтенд сайта на React+Next.js, а бэкенд на WordPress, протестировали и запустили сайт.

Забрифовали клиента, собрали портрет целевой аудитории и изучили ее потребности.

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

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

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

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

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

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

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

Также добавили в вайрфреймы функционал реквест-листа (аналог корзины). Дело в том, что на старом сайте, чтобы заказать несколько позиций, пользователю надо было запомнить их названия, перейти в блок «Отправить заявку» и там прописать в комментариях информацию по товарам. На новом же сайте, чтобы выбрать несколько позиций, надо просто нажать плюсики в нужных карточках товаров — все это попадает в реквест-лист, и оттуда можно одной заявкой оформить заказ. Менеджерам АКС сразу на почту и в CRM-ку прилетит информация с названиями товаров, артикулами, фотографиями, комментариями и контактами клиента. Это значительно экономит время как клиентам, так и менеджерам АКС. 

Освежили логотип АПА-КАНДТ СИБИРЬ. Подобрали новый шрифт в стиле condensed: он будто находится под давлением с двух сторон, что классно символизирует АКС (компания работает с оборудованием высокого давления). Клиенту, кстати, тоже очень понравилась эта метафора.

Использовали цвета из брендбука, но немного адаптировали их под веб.

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

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

Детально продумали навигацию сайта

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

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

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

Проработали цепляющий дизайн

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

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

— Добавили акцентов в главные фрагменты (в том числе использовали акцентные заголовки) и проработали композицию.

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

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

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

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

Например, спрятали по сайту барометры (приборы для измерения давления — стоят на каждом насосе, которые поставляет АПА-КАНДТ СИБИРЬ). Даже прелоадер создали с ним!

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

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

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

Фронтенд сайта реализован на базе React+Next.js, что повысило скорость загрузки страниц и улучшило их индексацию поисковыми системами. 

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

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

При работе с анимациями мы использовали WebGL, GSAP, Canvas и Framer Motion. Такой подход придал анимациям плавность и высокую скорость загрузки на любых устройствах и при любом качестве интернета.

Новый сайт АПА-КАНДТ СИБИРЬ закрывает поставленные на старте работы задачи: современный дизайн отражает инновационность компании, а продуманная навигация упрощает работу с сайтом. Все вместе способствует привлечению пользователей и повышению лояльности клиентов и партнеров.

1. Сайт соответствует потребностям всех сегментов целевой аудитории, которые были выявлены на этапе аналитики. Здесь:

  — быстрый поиск оборудования АКС;

  — основные сведения о продукции представлены в виде характеристик и карточек товаров;

  — есть блок под исполненные проекты АКС, где указаны их заказчики, количество, объем, изображения и т.д.

2. Сайт закрывает основные боли аудитории.

Боль 1 — длительная загрузка сайтов в этой сфере.

Результат: показателя performance сайта АПА-КАНДТ СИБИРЬ — 90 из 100 баллов, по результатам тестирования десктопной версии сайта в Lighthouse (большинство посетителей в этой тематике заходят с ПК), что более чем соответствует хорошей скорости загрузки.

Боль 2 — устаревшие интерфейсы компаний на рынке.

Результат: новый сайт АКС имеет современный дизайн и продуманный UX.

Боль 3 — пользователям сложно найти товары или нужные разделы.

Результат: на сайте АКС есть удобное меню, поиск по товарам и проектам, каталог продукции и фильтр по уровню давления и подкатегориям.

Боль 4 — мало информации о товарах.

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

Боль 5 — компании не вызывают доверия.

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

 Результат в цифрах

1. Глубина просмотров на сайте выросла в 3,1 раза (с 4,5 до 14 за визит).

2. Среднее время на сайте выросло с 7:00 до 12:00 минут, то есть увеличилось в 1,7 раза. 

3. Время загрузки снизилось в среднем в 3 раза.

4. А также по времени на сайте, доле отказов и глубине просмотров показатели АКС существенно лучше средних показателей по рынку среди конкурентов.