Укрепили имидж и сохранили традиции: как borevich.agency° сделали сайт компании «Русский Свет»

На связи digital-агентство borevich.agency°.

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

Входим в топ-200 B2B-разработчиков по версии Рейтинга Рунета за 2024 год. Делимся экспертизой на программах MBA и DBA, участвуем в образовательных проектах банков ВТБ и Уралсиб.

Сейчас расскажем, какой корпоративный сайт поможет укрепить имидж и показать партнерам с инвесторами масштаб компании. Будет полезно B2B-компаниям, которые ищут способ подтвердить серьезность и качество своей работы уже на этапе сайта.

Клиент, контекст и задачи

«Русский Свет» — один из крупнейших дистрибьюторов электротехники в России, на рынке с 1995 года. Входит в ТОП-500 РБК.

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

– партнеры,

– поставщики продукции,

– дистрибьюторы,

– крупные юридические лица,

– внутренние сотрудники,

– финансовые организации,

– государство.

У каждой ЦА свои цели: одним надо подтверждение, что «Русский Свет» — надежный работодатель, другим уверенность, что это ответственный партнер, который контролирует качество продукции, соблюдает сроки и гарантирует адекватные цены. И так далее.

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

Почему «Русский Свет» выбрал borevich.agency°

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

«Русский Свет» искал не исполнителя, а надежного партнера, с которым будет комфортно пройти этот сложный и долгий путь. С которым совпадут взгляды и легко синхронизироваться на весь проект и дальше.

Уже на этапе пресейла и первой презентации «Русский Свет» оценил глубину погружения borevich.agency°. Некоторые тезисы из презентации:

– Описали экспертизу и достижения агентства.

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

– Сформировали концепцию проекта.

– Описали целевые аудитории заказчика.

– Составили поэтапный план работ со сроками и конкретными задачами.

– Собрали первые референсы, чтобы указать, на что мы ориентируемся в плане результата.

Команда проекта

Четкого сформулированного запроса не было, поэтому команда специалистов borevich.agency° с нуля разработала концепцию и структуру. Участвовали:

– Маркетолог — отвечал за стратегию проекта.

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

– Арт-директор — управлял визуальным стилем проекта, контролировал работу UX/UI, обеспечивал соответствие дизайна бренду заказчика, генерировал креативные идеи и отвечал за общее визуальное восприятие продукта.

– UX/UI дизайнер — отвечал за качество пользовательского опыта, создавал прототипы, разрабатывал дизайн-макеты и тестировал интерфейсы.

– Фронтенд- и бэкенд-разработчики — отвечали за визуальную часть сайта и его взаимодействие с пользователем, обеспечивали работу серверной части и интеграцию с внешними сервисами.

– Контент-менеджер — отвечал за наполнение сайта текстами, изображениями, видео и т.д. Обеспечивал соответствие контента задачам проекта.

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

Масштаб проекта подразумевал трудности, к которым мы были готовы. Это:

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

– Поиск концепции. Мы должны были нащупать нужное направление и создать сайт, который отвечает требованиям и решает задачи всех заинтересованных: команды, заказчика и каждой ЦА.

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

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

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

Экран → зачем нужен → ЦА → референсы.

Фрагмент прототипа. У каждого блока было от 1 до 9 референсов. Мы старались уже на первоначальном этапе закрыть основные вопросы заказчика и упростить коммуникацию.

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

Все лучшие практики рынка в одном пространстве — это максимально упрощает работу.

Согласовав прототип, начали формировать концепцию.

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

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

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

Что подразумевала наша концепция:

– Использовать мотивы швейцарской типографики — она совмещает строгость, стиль и современность, это создает ощущение надежности и уверенности.

– Видео — визуализировать все, что можно, с помощью видео. Это добавит динамики и упростит восприятие сайта.

– Возможная сетка — крупный текст акцентирует на сильных сторонах компании, но при этом позволяет дальше изучать визуал. Это современное решение, которое позволяет сохранить фирменный стиль клиента.

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

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

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

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

– Яркие акценты в тексте — писали минимально, но броско.

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

– 3D-рендеры — технологичный способ показать ассортимент и доказать, что компания не отстает от прогресса. 

Динамичные элементы — анимации и бегущие строки позволили показать больше информации и усилить ощущение масштабов компании.

– Плавный скролл — каждый раздел сайта бесшовно перетекает в новый. Это позволяет органично изучить все основные блоки.

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

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

Передали готовые согласованные макеты верстальщику.

– Уточнили области кликабельных элементов.

– Сделали текст читабельным с любого экрана.

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

– Проследили, чтобы рендеры, видео и анимации быстро загружались и отображались корректно.

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

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

Затем команда разработки подготовила техническую базу сайта:

– развернула фреймворк,

– настроила шаблоны,

– создала модули для разделов сайта,

– настроила резервную копию сайта, подключила SSL-сертификат и прочее.

Использовали стек PHP, HTML, CSS, JavaScript. Минимум рисков — важнейший фактор для таких компаний, как «Русский Свет», поэтому в качестве CMS выступил 1С-Битрикс.

1С-Битрикс отвечает требованиям безопасности и знакома крупным компаниям. CMS российская, поэтому заказчик может не бояться, что в какой-то момент она уйдет из России.

Закончив с технической частью, мы финально тестировали проект в три этапа:

Первый — front-end и back-end разработчики проверяют сайт по чек-листу от менеджера проекта.

Второй — менеджер проходит по этому чек-листу еще раз самостоятельно.

Третий — QA-менеджер еще раз проверяет проект целиком.

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

Столько тестов нужно, чтобы довести проект до идеального состояния, что напрямую отвечает цели появления нового сайта — подтвердить надежность и качество работы «Русского Света».

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

Новый сайт компании «Русский Свет» заработал 1 ноября 2023 года.

У команды borevich.agency° получилось:

– Переосмыслить визуал в рамках заданного фирменного стиля.

– С помощью современных механик решить задачи разных ЦА.

– Найти баланс между мнениями десятков людей, которые участвовали в проекте.

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

Новый корпоративный сайт «Русский Свет» — впечатляющий проект, который наглядно показывает глобальность и масштабы работы компании. И мы гордимся результатом.