Для чего нужен сайт?
Традиционный российский бизнес, особенно тот, что запустился и стал успешным и устойчивым до глобальной цифровизации, доступного интернета и популярности поисковых систем, часто откладывает экспансию в цифровой мир до момента реальной необходимости. Проблема в том, что при наступлении такой необходимости вы неизбежно окажетесь в позиции догоняющего, и пока вы будете делать первые шаги, конкуренты будут собирать лиды и закрывать сделки в новых каналах привлечения клиентов, где вашей компании просто нет.
С другой стороны, крупный завод, порт или торговая компания с сайтом в стиле «начало нулевых» или вовсе без него — весьма стандартная для Рунета история. Но что будет через 3-4 года при условии, что сегодня даже государство суровой административной рукой направляет бизнес в сторону цифровизации? Мы рекомендуем выводить ваш бизнес в интернет, даже если сегодня особой потребности в этом нет. Действовать на опережение, как подсказывает опыт, очень хорошая практика.
Ниже — история про то, как интернет агентство NUTS Digital помогло компании «Профпоток» появиться в интернете не только в качестве учётной карточки на СБИС.
Компания
«Профпоток» — один из лидеров в области оптовых поставок оборудования и комплектующих для тепло- и водоснабжения в ЮФО.
Компания закрывает потребности в оборудовании для инженерных систем у застройщиков, монтажников, проектировщиков и юридических лиц, поставляет товар самых востребованных производителей в розничные магазины.
Подробнее о компании вы сможете узнать на сайте.
Вводные
К моменту начала нашего сотрудничества компания «Профпоток» успешно вела оффлайн бизнес уже 15 лет. Благодаря отлаженным продажам с помощью нецифровых каналов и инструментов, наличию прямых договорённостей с производителями и отлично выстроенной логистике организация не видела необходимости в разработке сайта.
Руководители компании, к общему счастью, оказались весьма опытны и дальновидны, и в 2019 году было принято решение о смене фирменного стиля и запуску проектов по разработке цифровых инструментов, корпоративного сайта в первую очередь.
Разработать базовую версию многостраничного сайта компании «Профпоток» с возможностью его дальнейшего развития.
-
презентовать компанию, её конкурентные преимущества, опыт работы, услуги, поставляемые бренды и ассортимент.
-
собрать лиды потенциальных клиентов и партнёров.
-
сделать возможным интеграцию сайта с B2B-кабинетом для получения подробных данных о товаре.
-
обеспечить оптимальную стоимость развития сайта в любом направлении.
-
внедрить административную часть для управления контентом сотрудниками «Профпоток».
Подготовка контента
Рекомендуем обсуждать вопросы поставки и производства контента для сайта на самом старте проекта.
Это защитит вас от следующих рисков:
-
проект готов, а контента нет, т.к. не был определены ответственные;
-
клиент рад заплатить за качественный контент «под ключ», но у него нет знакомых подрядчиков;
-
готовый сайт не выдерживает форму или объём боевого контента, а платить за изменения никто не готов.
Мы стараемся использовать максимум боевого контента уже на прототипе, если его нет, используем контент с сайтов конкурентов до появления собственного. «Рыба», особенно Lorem Ipsum — это ужасно. Для «Профпотока» мы заказали все тексты, самостоятельно их откорректировали перед размещением на сайте, поделились контактами проверенного видеографа, посоветовали фотографа.
Аналитика
Компания работает исключительно с юридическими лицами, не с конечным потребителем, и сайт в первую очередь должен быть привлекателен именно для B2B-клиентов.
Но, в любом случае, решение о запросе условий сотрудничества принимает конкретный посетитель сайта, а не весь отдел закупок или снабжения.
Для того, чтобы лучше понять, кто для нас целевой пользователь, и что может предложить ему сайт, мы провели анализ по методу персон на основе нескольких интервью с командой заказчика, дополнили его результатами конкурентного анализа и схемой общего видения проекта и ожиданий всех причастных сторон.
В результате, при составлении структуры страниц мы точно знали, зачем нам тот или иной смысловой блок, какую задачу он выполняет. Особое удовольствие доставляет отсечение лишнего и выделение интерфейса, который можно использовать на нескольких страницах.
Разработали кликабельный прототип в Figma для десктопной и мобильной версии. Получили обратную связь от команды клиента, обсудили изменения, и двинулись дальше.
На этапе прототипа возникла идея сделать ещё несколько посадочных страниц. Оценили все, некоторые сделали, некоторые отложили за релиз.
Фирменный стиль компании был создан незадолго до старта разработки сайта. Сказать, что он чертовски хорош, нельзя: он прекрасен! Градиенты, фирменный паттерн и цвета, типографика и логотип компании восхитительны. Это не только доставляет веб-дизайнерам удовольствие, но и мотивирует их работать на 200%.
Спасибо, Focusbrand! Всегда приятно работать с вашим результатом :-)
Сделали макеты для десктопа, после их презентации реализовали адаптивную версию для смартфонов.
Написали техническое задание на разработку, финализировали активные элементы и их состояния на отдельном холсте (UI kit), нарисовали все иконки, подписали результат этапа, и передали проект в код.
Отдельно отметим пару интересных решений, принятых по ходу проектирования и дизайна.
Структура сайта не предполагает полноценного каталога с карточками товаров, однако ассортимент и представляемые бренды оборудования — одно из основных преимуществ «Профпотока», без его демонстрации вряд ли получилось бы отразить его как следует.
Подумали, и сделали страницы каталога c разделением на «Оборудование» и «Запасные части», вывели в первый экран количество позиций и брендов, добавили кнопки для скачивания файлов полного прайс-листа, и плитки для скачивания отдельных его частей с указанием содержимого. Дополнили страницу брендами и кнопкой вызова формы обратной связи. Готово!
«Шапка» (header)
При проектировании многостраничных корпоративных сайтов часто возникает проблема так называемого «второго уровня»: например, разделы «Клиентам» и «О компании» не имеет разводящей страницы, где перечислены подразделы (их можно сделать, но это увеличит количество кликов пользователя для путешествия к нужной странице), а «Новости» и «Портфолио» — наоборот.
Базово с этой проблемой справляется выпадающее меню по наведению на разделы без разводящей страницы, и его отсутствие на остальных.
Мы захотели сделать ещё удобнее, и дополнили основную шапку сайта дополнительной со ссылками на другие страницы раздела, в котором находится пользователь.
«Профпоток» — компания серьёзная и солидная, от массивных анимаций по этой причине отказались. Однако тепло- и водоснабжение не терпит статики (привет всем, кто прокачивает радиаторы отопления, чтобы стало тепло), так что совсем без неё тоже никак.
Мы решили сосредоточиться на динамике в деталях: на первый экран главной страницы загрузили видео, сделали плавную, но ненавязчивую анимацию на активных элементах и на некоторых экранах на главной странице.
Вишенкой на торте стала кнопка обратной связи с переливом фирменного градиента.
Сборка, админка, SEO
Сайт собран на OctoberCMS+Laravel (чтобы подробнее узнать о технологиях разработки - переходите по ссылкам), в административной части можно править контент существующих страниц, и создавать новые на основе типовых. Мануал к админке мы передали клиенту, он занимается контентом на сайте самостоятельно.
Фреймворк Laravel гарантирует возможность дополнения сайта любым функционалом в адекватный срок и бюджет.
Перед релизом написали мета-теги для всех страниц, с акцентом на «оптом» и «подбор и поставка», чтобы максимально оградить сайт от появления в поисковиках по запросам розничных покупателей.
Для полной индексации страниц сайта внедрили карту сайта для поисковых систем (sitemap.xml). Для защиты форм от ботов поставили Google ReCaptha Invisible.
Итоги и перспективы
Сайт получился стильный, чётко отражающий как позицию и услуги компании, так и конкретную пользу для потенциального партнёра, в меру динамичный, с возможностью размещения новостей компании, демонстрации реализованных проектов в портфолио.
После релиза сайта сделали несколько дополнительных задач, и перешли в режим технической поддержки.
Что дальше? В планах интегрировать сайт с B2B-кабинетом, чтобы получить данные о товаре, и сделать полноценный каталог для достижения более высоких позиций в поисковиках, а до этого — сделать каталог интерактивный, с поиском и оглавлением.
Следите за изменениями на profpotok.ru, приходите в офис NUTS Digital, если вам нужен хороший корпоративный сайт.
