Как показать ИТ-портфель через задачи бизнеса, а не каталог технологий
Лоция объединяет несколько ИТ-продуктов и сервисов для бизнеса. Я спроектировал сайт, который помогает увидеть в портфеле конкретные решения, а не потеряться в списке технологий.
Лоцияloodsen.ru
Контекст
В экосистеме есть мессенджер, корпоративный портал, система знаний и AI-платформа. У них разные задачи, но сайт должен помогать человеку быстро перейти от своего запроса к подходящему решению.
Задача
Большой B2B-портфель легко превращается в тяжёлый каталог. Нужно было сохранить глубину экспертизы, но говорить языком задач бизнеса и не заставлять пользователя разбираться в устройстве компании.
Моя роль
Спроектировал сайт ИТ-экосистемы: информационную архитектуру, визуальную систему, продуктовые и кейсовые страницы. Подготовил адаптивную frontend-сборку.
Результат
Навигация по экосистеме
Связал продуктовый портфель, кейсы и технологические блоки общей логикой навигации.
1. С чего начинал
- В экосистеме есть мессенджер, корпоративный портал, система знаний и AI-платформа. Задачи у них разные, а человек должен быстро перейти от своего запроса к подходящему решению.
- Большой B2B-портфель легко превращается в тяжёлый каталог технологий.
- Продукты, кейсы, цифры и технологические блоки нужно связать общей навигацией, иначе каждый раздел читается отдельно.
2. Навигация от задачи
Раздел услуг открывается сеткой карточек: разработка и внедрение ПО, искусственный интеллект, аутсорсинг разработки. В каждой одна формулировка задачи, значок и стрелка, без списка технологий внутри. Рядом стоит цветная карточка с цифрой «170+ партнёров» и персонажем, а переключатель «Продукты / Услуги» и кнопка связи закреплены внизу экрана.
3. Показал продукты через их интерфейс
Страницу корпоративного портала сделал из крупных фрагментов самого продукта. Это карточка сотрудника с должностью, блок «Общий объём занятости» по месяцам, дерево структуры от начальника к руководителю направления и теги навыков, увеличенные и обрезанные краем экрана. У мессенджера приём другой. Уведомления о новых сообщениях, карточка руководителя, голосовая комната с участниками и окно звонка с таймером висят поверх портрета человека, как то, что он видит в течение рабочего дня.
4. Визуальная система сайта
Основой стал знак из двух встречных стрелок и геометричный логотип на спокойном пейзаже с небом и зелёными холмами. Этот фон проходит через весь сайт и держит вместе страницы разных продуктов. Интерфейсные блоки сделал белыми и светло-серыми карточками с крупным скруглением, фиолетовый оставил для кнопок, логотипа и акцентов. Персонаж в фиолетовом худи появляется в меню и в карточке с цифрой — он снимает официальный тон, привычный для B2B.
5. Сложности и решения
Сложность
Услуг и продуктов много, и на первом уровне они превращаются в длинный список, где трудно найти свой запрос.
Решение
Развёл услуги и продукты переключателем и ограничил первый уровень короткими формулировками задач. Подробности, технологии и кейсы убрал на внутренние страницы.
6. Продуктовые метрики
Каждое решение привязано к показателю: что на него работает и по чему это видно в аналитике.
Переходы с главной на продуктовые страницы
- Что на это работает
- Главная ведёт от задачи бизнеса к продукту, а не от списка технологий.
- Что смотреть в аналитике
- Доля визитов с переходом на страницу продукта.
Конверсия продуктовой страницы в заявку
- Что на это работает
- Продуктовые страницы собраны по одной схеме: задача, решение, интерфейс, кейс.
- Что смотреть в аналитике
- Доля просмотров страницы продукта, закончившихся заявкой.
Глубина просмотра
- Что на это работает
- Кейсы и цифры встроены в страницы продуктов, а не вынесены отдельно.
- Что смотреть в аналитике
- Число страниц за визит и доля отказов на главной.
7. Что получилось
- У каждого продукта своя страница со своим маршрутом, а продукты, кейсы и технологические блоки связаны общей навигацией.
- Контентная система позволяет поддерживать продуктовые страницы и добавлять новые материалы без потери структуры.
- Сайт представляет компанию с 600+ ИТ-экспертами и 170+ партнёрами в 22+ городах.
