Укрепили имидж и сохранили традиции: как 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 превратится в отдельный мощный проект, который решит еще больше задач клиента.

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

Перейти на сайт