Кейс о преображении: разработка нового сайта Rocket Business

Дизайн предыдущей версии сайта rbru.ru не менялся уже несколько лет.

К 2022 году в «Rocket Business» изменилось позиционирование. Компания уже не региональный подрядчик, а SEO-агентство №1 — партнер известных брендов, федеральных компаний, среднего и крупного бизнеса. На это есть свои основания.

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

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

Для того, чтобы новый дизайн соответствовал уровню агентства, нужно было выполнить ряд задач:

— распределить роли в команде и настроить работу;

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

— создать новую айдентику Rocket Business;

— разработать SEO-оптимизированный сайт на современном фреймворке.

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

— провели анализ сайтов конкурентов;

— составили технические чек-листы и подобрали референсы;

— разработали минималистичную и современную концепцию для сайта;

— совместили элементы графического дизайна и 3D-анимации;

— сверстали сайт на последней версии Next.js 13 и React;

— провели тестирование, аудит юзабилити и внесли правки.

Мы получили качественный, легко масштабируемый продукт. Сегодня продолжаем анализировать пользовательский опыт, проводим a/b тесты и дорабатываем элементы интерфейса.

Самый сложный этап — создание айдентики компании. Первым делом мы обновили логотип: убрали градиент, сделали лого более графичным и современным.

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

Дизайн сайта разработали по установленным правилам:

— чистота и минимализм;

— функциональные воздушные блоки;

— безрамочные анимационные баннеры;

— белый фон на всех страницах;

— корпоративные цвета — оранжевый и черный — для акцентов.

 На первый экран добавили лаконичную анимацию.

На основных страницах соблюдали баланс между противоположными трендами.

1. Яркие изображения и монохром;

2. Крупные элементы и пустые пространства;

3. Строгие линии и графические детали;

4. Статические и анимационные блоки.

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

Все размеры блоков, текстов, анимаций и фото заданы в vw/vh. Страницы отображаются верно при любом разрешении экрана. Планшет, смартфон, монитор или Smart-TV телевизор — сайт выглядит красиво на всех устройствах и во всех браузерах. 

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

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

Мы проанализировали записи из Вебвизора на старой версии сайта. Оказалось, что один из самых вовлекающих элементов интерфейса — карусель с яркими фото сотрудников.

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

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

2. Формирование HR-бренда. Красивое фото и заботливое индивидуальное описание всегда были фишками страницы «О нас». Более 60% наших сотрудников отмечали, что решили пойти на собеседование, заочно познакомившись с командой через сайт. 

3. Работа на поведенческие факторы. Пользователи частенько залипают на этом разделе. Глубина просмотра и среднее время посещения сайта растут — поисковики хорошо отмечают такие показатели.

Сайт собран на фреймворках Next.js 14 App Router + React и работает как реактивное приложение. 

Последняя версия Next.js вышла в мае 2023: она предлагает обновленный, более удобный инструментарий. В этом заключалась сложность разработки. IT-сообщество еще не успело сделать полноценные обзоры на маршрутизатор и написать короткие понятные мануалы. 

Ответов на возникающие вопросы на Stack Overflow не было: команда пользовалась только документацией от разработчиков. Порылись в приложениях с открытым кодом, разобрались в новом подходе к API — и собрали сайт. Верстка и перевод на JavaScript заняли 8 недель. 

На сайте использовали:

1. Формат обмена данными — JSON;

2. Библиотеку для создания анимаций — Framer Motion;

3. Библиотеку для работы с React — Redux Toolkit;

4. CSS Modules.

Наш профиль — продвижение сайтов в поисковых системах. Мы помним, как важно адаптировать сайт под требования Google и Яндекс на всех этапах работ. 

Поэтому на rbru.ru

1. Только полезные страницы. На сайте нет разделов с лишним контентом, страниц-дублей, необоснованно пустых областей. Из шапки или футера посетитель сайта может перейти на главные конверсионные страницы или другие площадки с блогами Rocket Business.

2. User friendly интерфейс. Стрелки подсказывают, где пользователю нужно опуститься ниже. Конверсионные кнопки расположены в нужных местах — пользователям не приходится их искать. 

3. Использован React Server Components. Контент легко распознается поисковыми роботами, страницы быстро попадают в индекс, сайт хорошо ранжируется в поисковиках. 

Выбор фреймворка позволил нам добиться быстрой загрузки сайта. Next.js отлично поддерживает image-компоненты. Изображения добавлены в формате сжатых webp-файлов. На сайте настроена отложенная загрузка элементов интерфейса. 

Чтобы переезд прошел максимально гладко, мы своевременно провели стандартную SEO-подготовку. Сопоставили карты старого и нового сайта, настроили редиректы, добавили мета- и alt-теги — дальше о банальностях SEO рассказывать не будем. 

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

Мы продумали структуру по правилам SEO-проектирования, использовали актуальный стек и написали понятный код: rbru.ru быстро загружается и работает без сбоев.

Сайт закрывает потребность агентства — позиционирование на рынке. Быстрый красивый сайт на современном фреймворке — наше лицо, гордость, главный кейс и заявка на высокий уровень работ. Он доносит ценности компании, презентует работы и делает главное: продает услуги.

Немного о результатах в цифрах:

— конверсии выросли на 17%;

— среднее время пребывания на сайте выросло на 112%;

— отказы упали на 14%;

— доля пользователей, вернувшихся на сайт, выросла на 27%.

После редизайна сайта мы получили заявки от крупных компаний — среди них Мегафон и Билайн. Из этого заключаем, что главной цели мы достигли.