Авторизация
Сброс пароля
Разработка дизайна сайта для ISPsystem: от прототипа до финальной концепции за 4 месяца
Заказчик: ISPsystem
Страница кейса/результат: https://clck.ru/3KYrcu
Разработка нового дизайна сайта для ведущего разработчика IT-решений ISPsystem заняла 4 месяца и включала полный цикл: от глубокой аналитики и построения пользовательских путей до финального UI-дизайна с учетом трендов и поведения аудитории.
Агентство-исполнитель кейса
1. Вводная задача от заказчика, проблематика, цели
О клиенте
ISPsystem – ведущий российский разработчик платформ для комплексного управления ИТ-инфраструктурой.
С чем пришел клиент?
Потребность в создании дизайна сайта, соответствующего актуальным задачам бизнеса
Существовавший на момент обращения к Комплето сайт Клиента был разработан им самостоятельно, на нем было проверено немало гипотез и базировалось SEO-продвижение.
Но с развитием компании изменились и бизнес-задачи, и ожидания клиентов, поэтому было принято решение обновить и сайт.
Гипотеза, что разделение контента под разные ЦА ускорит процесс принятия ими решения
Клиент полагал, что разделение потока входящего трафика на 2 целевые аудитории (хостинг- и сервис-провайдеры и компании, кому интересно управление ИТ-инфраструктурой) прямо на главной странице сайта с помощью UX- и UI-дизайна поможет посетителю быстрее самоидентифицироваться, найти нужную информацию, познакомиться с продуктом и оставить заявку.
В случае, если посетитель самоидентифицироваться не сможет, то он покинет сайт, благодаря чему сократится время, которое отдел продаж тратит на обработку нецелевых обращений.
Понимание того, что «правильный дизайн» — не просто «красивая картинка», а результат проведенной аналитики
Перед специалистами Комплето была поставлена задача разработать правильный с точки зрения UX и UI дизайн, основываясь на результатах маркетингового аудита, анализа CJM и SEO-спроса, которые необходимо было провести.
Задачи
- Получить современное дизайн-решение сайта, которое позволит увеличить объем целевых обращений.
- Разделить входящий трафик на 2 потока за счет наглядного деления контента сайта (графического и текстового) под каждую ЦА, чтобы ускорить процесс выбора и принятия решения.
- Произвести переупаковку бренда для представления онлайн и получить дизайн страниц с паками иконок, руководством по анимации и UI-kit для верстки сайта своими силами.
2. Описание реализации кейса и творческого пути по поиску оптимального решения
После изучения потребностей и задач Клиента, мы разделили пул работ на несколько этапов.
1. Предпроектный этап: сбор необходимой аналитики
Начали с глубокой аналитики: провели аудит текущего сайта, изучили поведение ЦА, конкурентов, SEO-спрос и CJM. Выявили слабые стороны и на их основе построили стратегию: сайт должен вести два разных сегмента пользователей по разным маршрутам. В итоге разработали подробную карту сайта, в которой учли всё — от структуры до подвала.
2. Прототипирование с учетом разделения на две ЦА
На базе карты сайта и семантики создали прототипы в Figma. Главный экран сразу делит трафик на 2 потока — для провайдеров и для компаний с ИТ-инфраструктурой. Каждая ЦА получает свой путь, сценарии и блоки контента. Это решение позволило сократить нецелевые обращения и упростить навигацию по продуктам.
3. Сбор контента
Пока шла работа над UX, команда клиента собирала и адаптировала контент — под чёткое ТЗ, составленное на основе карты сайта. Мы подготовили карту контента, чтобы синхронизировать тексты и дизайн. Такой подход ускорил процесс: когда прототип был готов, у нас уже были все материалы для дизайна.
4. Разработка дизайна
Проект потребовал гибкости. Первая концепция строго следовала брендбуку, но не сработала онлайн: фирменные цвета оказались малоконтрастными. Мы адаптировали стиль: усилили читаемость, сделали тёмный фон и акцентный синий. Для оценки решений подключили ИИ — тепловые карты показали, где фокус внимания пользователя. На выходе — актуальный, интуитивный интерфейс, адаптированный под восприятие ИТ-аудитории. Мы интегрировали даже старые «стеклянные» 3D-иконки, дополнив их новыми в едином стиле.
Результат — 17 уникальных страниц, проработанный UI-kit, 4 месяца от аудита до финала и сайт, который теперь работает как воронка продаж. Клиент доволен: метрики выросли, опыт пользователя улучшился, а команда — гордится результатом.
5. Подготовка UI-kit
После утверждения финального дизайна команда подготовила UI-kit — набор всех элементов интерфейса для дальнейшей верстки.
В него вошли:
- Шрифты и цветовая палитра,
- Стили кнопок и форм,
- Иконки (в том числе переработанные 3D-иконки клиента),
- Руководство по использованию анимаций,
- Гайд по адаптивности.
UI-kit обеспечил заказчику возможность быстро и последовательно адаптировать или дорабатывать сайт в будущем — своими силами или с подрядчиком.
3. Результаты сотрудничества
17 уникальных готовых страниц
Полноценное руководство для разработки анимации
3 нейросети использовали для реализации проекта: плагин от Figma, Recraft, ChatGPT
4 месяца от предпроектного этапа до утверждения UI-kit
4. Заключение
Разработка сайта начинается с аналитики
Именно за счет понимания потребностей бизнеса, реалий конкурентной среды, болей и ожиданий аудитории можно создать сайт, который станет эффективным бизнес-инструментом, а не просто «красивой картинкой».
Инсайт: аналитика помогает ориентироваться не только на вкусы Заказчика, но и на факторы, которыми руководствуются его клиенты при принятии решения.
Экспертиза Заказчика + опыт исполнителей = качественный результат
Когда Клиент хорошо знает свой продукт, активно участвует в обсуждениях и может аргументированно обосновать видение определенных моментов — это то преимущество, которое можно и нужно использовать для получения по-настоящему качественного результата.
Да, аналитика и статистика не врут, но, все же, покупают люди, о которых Клиент-эксперт может многое рассказать. И такую возможность просто нельзя упускать.
Как в нашем случае.
Брендбук — это база, однако гибкость в цветовом решении помогает эффективнее продвигать услуги
Нужно учитывать, что разные ЦА различно воспринимают цвета, и в контексте Интернет-продвижения и сайта проверенная годами использования в офлайне палитра брендбука может не соответствовать их психологическим и эмоциональным предпочтениям.
Нет нужной ассоциации — нет продажи.
Поэтому важно проявлять гибкость в цветовом решении, но для понимания того, что изменить и на чем сделать акцент, понадобится аналитика и глубокое знание потребностей покупателей.
На этом этапе можно и нужно использовать активно развивающуюся ИИ-аналитику.
При подготовке дизайна важно учитывать возможные будущие изменения
Поэтому так важен UI-kit как завершающая стадия работы: включение в него готовых на текущий момент, но адаптируемых под будущие потребности элементов, позволит при дальнейшей верстке и обновлении сайта делать не нарушить общую стилистику проекта.
Агентство-исполнитель кейса