У собственного сайта есть неудобное свойство: в него хочется поместить всё, что умеешь. CRM, 1С, интеграции, аналитику, разработку, маркетинг, ИИ, поддержку, обучение. За каждым направлением — настоящая работа. Каждое кажется необходимым объяснить прямо сейчас.
Мы прошли через это со strateg.bz. Собрали компетенции, разобрали примеры, сделали прототипы. Потом посмотрели на получившуюся главную и вернулись к вопросу: с чем сюда приходит руководитель компании?
Ему нужно наладить продажи. Разобраться, почему расходятся цифры. Связать склад с CRM. Освободить команду от ручного переноса данных. Вокруг этих задач и сложился обновлённый сайт. А по дороге у него появилась собственная Солнечная система.
Сначала пришлось собрать самих себя
«Стратег» работает с бизнесом с 2015 года. За это время рядом с внедрением CRM появились другие направления, собственные инструменты, сервисы и Академия. У этой работы уже были свои страницы, экраны, коммерческие предложения и истории клиентов.
Новый сайт требовал собрать их в понятную картину. Показать, как аналитика связана с качеством данных, разработка — с процессами, а внедрение — с обучением и дальнейшей поддержкой. При этом сохранить прямые входы для человека, которому нужна одна конкретная услуга.
Так появилась смысловая основа: объединяем людей и процессы бизнеса — от маркетинга и продаж до производства, оказания услуг и учёта.
Из неё вырос и заголовок первого экрана: «Внедряем IT, с которыми…». Продолжения называют понятные результаты: бизнес работает, заявки не теряются, цифры сходятся, ИИ берёт рутину, процессы связаны. По этим словам проще узнать свою задачу, чем по перечню программ и технологий.
Светлая витрина и «Центр управления»
В ранних прототипах мы проверяли разные способы показать компанию. Была светлая витрина — с открытым фоном, карточками и привычной логикой корпоративного сайта. Было направление «Центр управления»: графитовая среда, данные, интерфейсы, статусы и ощущение связанной системы.
Рабочей основой стал «Центр управления». Его характер подходил нашей работе: видеть общую картину и разбираться, что происходит на стыках между системами. Светлые поверхности сохранили для кейсов, объяснений и чтения. Позже у сайта появилась полноценная светлая тема.
Визуальную основу нашли и в собственных коммерческих предложениях: знак «Стратега», шрифт Geologica, фиолетово-бирюзовый градиент, реальные фотографии и экраны. Это помогло связать первое знакомство с компанией и документы, которые клиент получает уже в работе.
Референсы разбирали по отдельным вопросам. У Only Digital изучали сетку и иерархию, у Kleiner Perkins — подачу опыта через проекты и людей. У Navicon — язык бизнес-результата. У Timeweb — ритм и организацию большого объёма информации. Eduson помог посмотреть на карточки разного масштаба и последовательность аргументов.
Каждый такой разбор возвращал нас к своей аудитории. Руководителю небольшой компании важно быстро понять, можно ли прийти с его ситуацией и что произойдёт дальше. Поэтому эффектные приёмы проходили простую проверку: помогают ли они это выяснить?
Как двенадцать направлений оказались на орбите
Солнечная система появилась в процессе работы над общей картой компетенций. Первоначально она находилась под справочником услуг. Затем мы перенесли её на первый экран: метафора оказалась достаточно сильной, чтобы с неё начиналось знакомство.
В центре — бизнес. Вокруг — двенадцать направлений: продажи, учёт, ИИ, интеграции, аналитика, разработка, боты, маркетинг, инфраструктура, консалтинг, поддержка и обучение. Выбор планеты связан с описанием компетенции и переходом к услуге. Все направления доступны и обычным текстовым списком.
У такой карты есть вполне практический смысл. В компании заявка может пройти через сайт, телефонию, CRM, учётную систему и отчёт руководителя. На каждом стыке есть данные, правила и ответственные. Карта показывает масштаб нашей работы, а подробности раскрываются по выбору посетителя.
Саму сцену тоже меняли. Увеличивали планеты и пространство между ними, делали поверхности выразительнее, подбирали скорости орбит. Дальние планеты движутся медленнее ближних. На Солнце появился рельефный знак «С».
Когда позднее мы сокращали главную, одно условие уже было зафиксировано: первый экран и Солнечную систему сохранить целиком. У сайта появилась узнаваемая часть, которую хотелось развивать дальше.
Для одного меню — три макета
Для двенадцати направлений обычного короткого выпадающего списка было мало. Мы собрали три самостоятельных макета на одном и том же содержании.
- «Панорама» — широкая панель, где направления видны одновременно в трёх колонках.
- «Стеклянный остров» — отдельная панель с группами услуг, которая сохраняет связь с космической сценой.
- «Навигатор» — группы слева и подробности выбранной группы справа.
Выбрали «Стеклянный остров». Затем уточняли плотность фона, читаемость текста, поведение при наведении и открытие с клавиатуры. На телефоне меню превратилось в аккордеон: длинные группы раскрываются последовательно.
Важным решением стал и общий источник меню для всего сайта. Главная, CRM, услуги, кейсы и документы используют одну шапку и один подвал. Изменение навигации распространяется на все страницы. Для посетителя это означает простую вещь: переход между разделами остаётся предсказуемым.
Самая большая правка случилась после первой сборки
Подробная версия главной умела объяснять многое. В ней были справочник компетенций, ситуации клиентов, схема интеграций, кейсы, процесс, форматы работы, поддержка, продукты, сервисы, команда, Академия, журнал и Техосмотр.
Затем мы снова пересмотрели последовательность. Несколько блоков помогали выбирать услугу разными способами, и этот выбор затягивался. Возникла следующая задача: сохранить глубину сайта и сделать начало знакомства короче.
Основой новой композиции стал вопрос «Что хотите улучшить?» и шесть маршрутов:
- навести порядок в продажах;
- наладить учёт;
- связать системы;
- передать рутину ИИ;
- связать рекламу с продажами;
- создать сайт, кабинет или бота.
Внутри каждого маршрута появились этапы, инструменты и объяснение результата. Поддержка и обучение остались рядом. Подробный состав услуг получил свои страницы, а продукты, сервисы и Академия — компактные самостоятельные входы.
Изменился порядок разговора. Сначала посетитель узнаёт свою ситуацию, затем видит способ работы и только после этого знакомится с набором технологий. Так сохраняется выбор и для человека с готовым ТЗ, и для того, кто пока может описать только проблему.
29 октября обновлённый сайт заработал на основном домене. После следующих итераций, 3 ноября, мы выпустили пересобранную главную. Работа продолжилась уже на действующем сайте: уточнялись подписи, поведение мобильного меню, схемы и детали интерфейса.
У каждой красивой цифры должно быть объяснение
Кейсы проверяли с той же внимательностью, что и композицию. Крупное число привлекает внимание, поэтому особенно важно точно назвать, что оно означает.
В истории «Медиа ФМ» 1,01 млн рублей — это сумма счетов, обнаруженных при сверке данных. В кейсе «Инстафф» 23 307 — количество объектов CRM, переданных новым ответственным. У «Люмисферы» показано изменение очереди писем: с 228 до нуля после исправления почты.
У каждого результата есть своя работа, исходная ситуация и границы. Эти пояснения оставили рядом с цифрами. Демонстрационные экраны подписали как демо. На страницу добавили реальные интерфейсы, пример коммерческого предложения, сертификаты и видеоотзывы клиентов.
Раздел команды тоже прошёл несколько итераций: меняли композицию, размер портретов, кадрирование и раскрытие описаний. Теперь можно увидеть людей и понять, кто занимается аналитикой, разработкой, инфраструктурой и дизайном.
Для нас всё это части одного разговора о доверии. Посетитель может рассмотреть работу, познакомиться с людьми и сам решить, насколько ему подходит такой подход.
Работа, которую видно только при её отсутствии
У большой 3D-сцены есть цена: ей нужны время на загрузку и ресурсы устройства. Поэтому отдельно занимались производительностью. Облегчили шрифт и графическую библиотеку, настроили кеширование. Пока интерактивная сцена готовится, посетитель видит её первый кадр.
В контрольных замерах на основном сайте медианное время готовности 3D сократилось с 3,20 до 1,85 секунды. Это результаты лабораторной серии с заданными ограничениями сети и процессора; на устройствах посетителей время будет отличаться. Качество самой сцены сохранили.
За пределами первого экрана оставалось много обычной, необходимой работы: проверить длинные подписи на узком телефоне, обе темы, переходы, клавиатуру, формы, загрузку изображений. Связать новые страницы общими компонентами. Убедиться, что заявки принимает рабочий обработчик и у сайта есть единые документы и настройки аналитики.
Такие вещи редко становятся обложкой статьи. Из них складывается повседневное ощущение сайта: можно прочитать, разобраться, открыть нужное и обратиться.
Что из этой истории можно забрать себе
Если Вы тоже обновляете сайт, начните с нескольких вопросов. С какой ситуацией сюда приходит клиент? Что ему нужно понять до выбора услуги? Какую работу можно показать? Какие подробности нужны сразу, а какие лучше раскрыть по запросу?
Ответы полезно проверять на собранной странице. Нашу главную пришлось пересмотреть после того, как большая часть содержания уже появилась. Именно тогда стало видно, где объяснений достаточно, а где их несколько подряд.
Обновлённый strateg.bz показывает, как мы смотрим на работу интегратора: разобраться в задаче, связать системы, довести решение до использования и остаться рядом после запуска. Собственный сайт прошёл через тот же цикл уточнений.
Этой записью мы открываем Бортовой журнал. Здесь будем разбирать решения, делиться рабочими наблюдениями и показывать полезные инструменты. Первая история — о нашем сайте. Следующие вырастают из задач, которые мы решаем каждый день.
Посмотреть обновлённый strateg.bz →
БЖ-001 · Полевые заметки
Иллюстрации — макеты и экраны из истории разработки strateg.bz. Снимки промежуточных версий подписаны по этапам.