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

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

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

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

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

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

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

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

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

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

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

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

Поэтому заказчик решил работать именно с нами.

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

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

• Маркетолог — отвечал за стратегию проекта.
• Проджект-менеджер — разрабатывал план проекта, распределял бюджет, управлял командой, оценивал риски и общался с заказчиком.
• Арт-директор — управлял визуальным стилем проекта, контролировал работу UX/UI, обеспечивал соответствие дизайна бренду заказчика, генерировал креативные идеи и отвечал за общее визуальное восприятие продукта.
• UX/UI дизайнер — отвечал за качество пользовательского опыта, создавал прототипы, разрабатывал дизайн-макеты и тестировал интерфейсы.
• Фронтенд- и бэкенд-разработчики — отвечали за визуальную часть сайта и его взаимодействие с пользователем, обеспечивали работу серверной части и интеграцию с внешними сервисами.
• Контент-менеджер — отвечал за наполнение сайта текстами, изображениями, видео и т.д. Обеспечивал соответствие контента задачам проекта.
• QA-менеджер — тестировал функциональность сайта, проверял его работоспособность на разных устройствах и браузерах, фиксировал ошибки и контролировал их исправление, обеспечивал соблюдение стандартов качества.

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

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

Антон Д.

руководитель отдела разработки, borevich.agency°

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

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

Прототип

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

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

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

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

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

Концепция

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

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

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

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

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

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

Дизайн

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

• Яркие акценты в тексте — писали минимально, но броско.
• Видео — огромные склады, сотрудники за работой, магазины и другое. Все, чтобы наглядно проиллюстрировать глобальность бизнеса.
• 3D-рендеры — технологичный способ показать ассортимент и доказать, что компания не отстает от прогресса.
• Динамичные элементы — анимации и бегущие строки позволили показать больше информации и усилить ощущение масштабов компании.
• Плавный скролл — каждый раздел сайта бесшовно перетекает в новый. Это позволяет органично изучить все основные блоки.

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

Верстка и программирование

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

• Уточнили области кликабельных элементов.
• Сделали текст читабельным с любого экрана.
• Расположили блоки, чтобы их было удобно просматривать с разных экранов.
• Проследили, чтобы рендеры, видео и анимации быстро загружались и отображались корректно.

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

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

• развернула фреймворк,
• настроила шаблоны,
• создала модули для разделов сайта,
• настроила резервную копию сайта, подключила SSL-сертификат и прочее.

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

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

Тестирование

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

• Первый — front-end и back-end разработчики проверяют сайт по чек-листу от менеджера проекта.
• Второй — менеджер проходит по этому чек-листу еще раз самостоятельно.
• Третий — QA-менеджер еще раз проверяет проект целиком.

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

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

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

Екатерина

проджект-менеджер, borevich.agency°

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

Павел

арт-директор проекта, borevich.agency°

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

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

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

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

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

Василиса

Проджект-менеджер, borevich.agency°

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