Сапожники с сапогами: кейс о преображении сайта Rocket Business

О целях и задачах

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

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

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

Для достижения этой цели мы разбили процесс на ряд прикладных задач:

1. собрать команду для решения задачи;
2. распределить роли и зоны ответственности в команде;
3. создать SEO-оптимизированный сайт на современном фреймворке;
4. выработать единый визуальный стиль компании;
5. презентовать обновленную айдентику нашего бренда.

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

Дизайн: лид с первого взгляда

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

Изученные материалы помогли определиться с общей концепцией дизайна нашего сайта:

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

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

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

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

Айдентика

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

Кейсы

Кейсы — самый полезный и самый продающий контент в нашей нише. Следовательно, их необходимо правильно презентовать.

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

О нас: лицом к посетителю

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

• знакомит посетителя с командой компании и формирует доверие к нам;
• помогает формировать HR-бренд;
• работает на поведенческие факторы.

Конечно же, этот важный элемент переехал и на наш новый сайт — но мы сделали его еще лучше.

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

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

Изнутри: техническая часть

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

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

Верстка и перевод на JavaScript заняли 8 недель.

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

• Формат обмена данными — JSON;
• Библиотеку для создания анимаций — Framer Motion;
• Библиотеку для работы с React — Redux Toolkit;
• CSS Modules.

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

Куда же без SEO? Оптимизация

Основной профиль нашей компании — продвижение сайтов в поисковых системах. Конечно же, мы не могли оставить без оптимизации собственный сайт. Уже в процессе его создания мы учитывали требования Google и Яндекс.

Новый rbru.ru — это:

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

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

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

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

Что в итоге?

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

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

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

Результат в цифрах:

• конверсия выросла на 17%, среднее время на сайте — на 112%;
• отказы упали на 14%;
• приятно радует доля пользователей, посещающих сайт повторно — она выросла на 27%.

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