Сапожники с сапогами: кейс о преображении сайта Rocket Business
О целях и задачах
В 2007 году «Rocket Business» начинал работу как региональный подрядчик. К 2022 году наше позиционирование претерпело значительные изменения, и теперь мы — SEO-агентство № 1 по индексу лояльности клиентов, компания с обширным опытом и богатым портфолио. Среди наших клиентов — известные бренды, компании федерального и даже международного масштаба.
Сегодня у нас есть обширное портфолио из интересных работ, каждой из которых мы гордимся. Есть и награды — агентство отмечено призовыми местами рейтингов Tagline, Workspace, Рейтинг Рунета. Верхние позиции рейтинга в категории «Создание и продвижение сайтов» обязывает нас иметь сайт, достойный лидеров рынка.
Основная цель редизайна — презентовать наши работы соответственно нашему уровню и актуальному позиционированию компании. Только достойный сайт сможет привлечь тот сегмент целевой аудитории, который нас интересует. Для достижения этой цели мы разбили процесс на ряд прикладных задач: Разработка сайта компании — сложный и долгосрочный процесс. Мы окунулись в него с головой — поиск и внедрение идей, запуск, тесты. Работу над новым воплощением нашего сайта мы начали с конкурентного анализа — внимательно изучили сайты конкурентов из нашей ниши, подобрали референсы. Не остались без внимания и общие тренды дизайна — свежие, актуальные и необычные. Изученные материалы помогли определиться с общей концепцией дизайна нашего сайта: Даже противоположные по смыслу тренды прекрасно смотрятся вместе, если найти между ними баланс. При этом мы не забыли и про юзабилити — отдельное внимание уделили комфорту пользователей. Продуманное размещение конверсионных кнопок помогает быстро найти контакты агентства или бриф. При этом они не назойливы и не отвлекают внимание от контента. За курсором посетителя сайта следует помощник — небольшой яркий шарик. Он служит дополнительным декоративным элементом, а также привлекает внимание пользователя к важным инфоблокам. Тесты показывают, что помощник — отличный вовлекающий фактор. Размеры блоков, текстов, анимаций и фото заданы в vw/vh. Страницы отображаются верно при любом разрешении экрана. Планшет, смартфон, монитор или Smart-TV телевизор — сайт выглядит красиво на всех устройствах и во всех браузерах. Вместе с сайтом изменилась и айдентика нашего бренда. Первым делом мы обновили свой логотип — убрали несколько устаревший градиент, сам логотип стал более графичным, стильным и современным. Затем выбрали шрифт — Coolvetica, подобрали корпоративные цвета и разработали единые правила визуального оформления. Кейсы — самый полезный и самый продающий контент в нашей нише. Следовательно, их необходимо правильно презентовать. Каждую страницу раздела Кейсы мы прорабатывали индивидуально. Для каждой отдельной работы мы выбрали свой способ расстановки акцентов. Впрочем, тексты мы создавали в соответствии с определенным шаблоном — так посетителю проще найти ту информацию, которая его интересует, без погружения в другие детали. Записи из Вебвизора поведали нам важную информацию: одним из самых вовлекающих элементов старого сайта оказалась карусель с фотографиями и описаниями наших сотрудников. Блок выполняет целый ряд важных функций: Конечно же, этот важный элемент переехал и на наш новый сайт — но мы сделали его еще лучше. Для подготовки этого блока была проведена профессиональная студийная фотосессия. Фотографии украсили карточки сотрудников, оформленные в едином стиле. Посетители сайта, наши потенциальные сотрудники или клиенты, частенько залипают в этом разделе. Он позволяет увидеть, что за вывеской компании стоят настоящие люди, которые будут работать с вами или с вашим проектом. Блок помогает заочно познакомиться с ними, а креативные описания придают знакомству уютную неформальность. Более 60% наших сотрудников отмечали, что решили пойти на собеседование, заочно познакомившись с командой через сайт. Сайт собран на фреймворках Next.js 14 App Router + React. Он работает как реактивное приложение. Последняя версия Next.js вышла в мае 2023. Нам она приглянулась обновленным списком инструментов, более обширным и удобным. Но у решения использовать именно эту версию есть и свои подводные камни — IT-сообщество еще не успело сделать полноценные обзоры на маршрутизатор и написать короткие понятные мануалы. Четких и ясных ответов на возникающие вопросы на Stack Overflow не было, в распоряжении нашей команды была лишь документация от разработчиков. Наши программисты изучили приложения с открытым кодом, разобрались в новом подходе к API — и собрали сайт. Верстка и перевод на JavaScript заняли 8 недель. На сайте использовали: В итоге мы получили качественный, легко масштабируемый продукт. Основной профиль нашей компании — продвижение сайтов в поисковых системах. Конечно же, мы не могли оставить без оптимизации собственный сайт. Уже в процессе его создания мы учитывали требования Google и Яндекс. Новый rbru.ru — это: Мы использовали React Server Components. Поисковые роботы отлично распознают контент сайта, благодаря чему страницы быстро попадают в индекс, а сайт хорошо ранжируется в поисковых системах. Выбор фреймворка позволил нам добиться быстрой загрузки сайта. Next.js отлично поддерживает image-компоненты. Изображения добавлены в формате сжатых webp-файлов. На сайте настроена отложенная загрузка элементов интерфейса. Чтобы переезд прошел максимально гладко, мы своевременно провели стандартную SEO-подготовку. Сопоставили карты старого и нового сайта, настроили редиректы, добавили мета- и alt-теги — дальше о банальностях SEO рассказывать не будем. Мы получили полностью готовый к работе сайт — стильный, современный и функциональный. Он не перегружен визуальными элементами, но при этом остается ярким, запоминающимся и узнаваемым. Структура сайта продумана и выполнена в полном соответствии с правилами SEO-проектирования. Мы использовали актуальный стек и написали понятный код — сайт быстро загружается и бесперебойно работает на любых устройствах. Новый сайт успешно выполняет свою основную цель — обеспечивает корректное позиционирование компании на рынке. Он — наше лицо, наша гордость и демонстрация нашего профессионализма. Он доносит ценности компании, презентует работы и главное — продает услуги. Результат в цифрах: После редизайна мы получили множество новых заявок — в том числе и от крупных компаний. Следовательно, наша главная цель была успешно достигнута. 
Дизайн: лид с первого взгляда
Айдентика
Кейсы
О нас: лицом к посетителю
Изнутри: техническая часть
Куда же без SEO? Оптимизация
Что в итоге?
