Сложный продукт. Понятная причина выбрать.
У CRM/ERP много возможностей. Но будущему клиенту сначала нужно понять, как она поможет его компании. Для сайта Twayli я спроектировала путь от знакомства с продуктом до оценки условий, запроса демо и получения помощи.
Сначалаобъяснитьценность.Затемраскрытьвозможности.
У сайта и самой системы разные задачи. В рабочем интерфейсе человек уже знает, зачем пришел. На сайте ему еще предстоит связать возможности продукта со своей работой.
Я построила знакомство в несколько уровней: назначение и польза, конкретные сценарии, условия подключения и обращение. Так сложная система раскрывается постепенно, без попытки уместить все в первый экран.
На этапе UX я разобрала аудитории, составила портреты пользователей, CJM и карту страниц. В этих материалах выделились важные барьеры выбора: сложность внедрения, стоимость, интеграции и поддержка.
Я связала их с содержанием сайта: каждый раздел должен давать человеку основания двигаться дальше.
Подходит ли это моей компании?
Главная, продукт и отраслевые страницы помогают соотнести систему с задачами управляющих и сервисных организаций.
Как оценить решение до подключения?
Описание возможностей, примеры применения, тарифы и запрос демо дают несколько уровней знакомства с продуктом.
Что будет после выбора?
База знаний, обучающие материалы и поддержка показывают, где искать ответы при дальнейшей работе.
Первый экран связывает позиционирование с реальным интерфейсом системы: посетитель сразу видит, о каком продукте идёт речь. Крупная типографика задает иерархию, а отдельная зона действия помогает перейти к обращению.
Ниже главная меняет масштаб: от общего впечатления к преимуществам, функциям и подробностям. Я задала этот ритм композицией, контрастом и последовательностью блоков.
Возможности CRM/ERP легко превратить в длинный список. Я разделила объяснение на три уровня: пользу для компании, основные направления работы и подробности продукта. Снимки интерфейса связывают обещания сайта с тем, что человек увидит в системе.
Сначала - зачем
Преимущества собраны в отдельные карточки. Один раскрытый пункт получает больше места: можно изучать аргументы последовательно, сохраняя обзор остальных.
Затем - где это применяется
Задачи, диспетчерская служба, финансы, планирование и документы выделены в самостоятельные входы. Посетителю не нужно вычитывать все возможности подряд.
После - существенные подробности
На странице продукта ключевые особенности собраны рядом с интерфейсом. Эта композиция удерживает связь между объяснением и самим инструментом.
Для тарифов я использовала общую структуру карточек: условия и состав предложения можно сопоставлять по одним и тем же ориентирам. Контрастная карточка выделяет один вариант, сохраняя остальные доступными для сравнения.
Переключение периода оплаты и отдельное обращение за индивидуальными условиями учитывают два разных сценария выбора.
Однойплатформенужныразныеобъяснения.
Управляющая и сервисная компания оценивают продукт через собственные процессы. Я выделила отраслевое содержание в отдельный раздел: он позволяет объяснять применимость системы, не перегружая главную.
Общий каркас сохраняется, а изображения, заголовки и содержание меняются под контекст. Это дает сайту место для разных направлений продукта.
Новости, события и кейсы читают по-разному. Я развела форматы внутри раздела ресурсов: для обзора предусмотрела карточки и рубрики, для подробного знакомства - отдельную страницу, для короткого события - компактное раскрытие.
Так посетитель может быстро просмотреть обновления или углубиться в материал, сохраняя знакомые ориентиры.
Я связала обзор помощи, обучающие материалы и подробные инструкции. Боковая навигация помогает выбирать тему, а последовательная структура статьи - читать и возвращаться к нужному месту.
Форма обращения остается отдельным продолжением сценария. Самостоятельный поиск ответа и контакт с поддержкой дополняют друг друга.
Для знакомства с возможностями предусмотрен отдельный сценарий демо. Я разделила окно на ввод данных и объяснение предложения: человек видит, что заполняет и ради чего оставляет контакты.
У обращения есть собственный фокус: затемненная страница сохраняет контекст, а форма собирает внимание на следующем действии.
Понятная зона ввода
Связанные поля собраны в одну колонку. Завершающее действие находится сразу под ними.
Объяснение рядом с действием
Соседняя область раскрывает предложение. Пользователю не приходится закрывать форму, чтобы вспомнить цель обращения.
Раздел ресурсов должен пополняться после запуска. Поэтому я проработала админку блога: обзор материалов и отдельные действия для добавления новости, события и другого контента.
Редактор текста, рубрика, дата и загрузка изображений собраны под задачи публикации. Дизайн охватывает не только чтение материалов, но и работу людей, которые будут их создавать.
Обзор материалов
Списки новостей, событий и других публикаций собраны в общем рабочем разделе.
Редактор новости
Дата, категория и форматирование текста расположены в отдельной форме публикации.
Добавление события
Для короткого события предусмотрен компактный диалог поверх списка материалов.
Для телефона я перестроила крупные композиции в последовательность: заголовок, объяснение, продукт и действие. Навигация раскрывается отдельно, карточки меняют расположение, а текст получает место по ширине экрана.
Я сохранила характер сайта и порядок смыслов, адаптировав их под чтение и взаимодействие одной рукой.
Контрастные поверхности, типографика и сине-зеленый акцент задают общий язык сайта. Я собрала повторяемые карточки, кнопки, переключатели и поля в компоненты с состояниями.
Это помогает согласовать длинные продуктовые страницы, короткие формы и админку, не рисуя знакомые элементы заново для каждого экрана.
Общие принципы для преимуществ, материалов и информационных блоков.
В Figma я проработала варианты раскрытия и смены состояний. Движение связано со смыслом: выделить активный аргумент, показать продолжение блока или направить внимание к следующему действию.
Такие состояния дают разработчику ориентиры по поведению элементов, дополняя статичные макеты.
В проекте я согласовала презентационные, информационные и служебные страницы. Общая типографика, акценты и навигация связывают их в систему, а композиция отвечает содержанию каждого раздела.
Я собрала многостраничный сайт: от UX-основы и структуры до адаптивных экранов, компонентов и админки контента. Коммерческие страницы помогают оценить платформу, а ресурсы и поддержка продолжают взаимодействие после первого интереса.
Этот проект показывает мой подход к сложным B2B-продуктам: выстроить объяснение, проработать разные сценарии и связать выразительный дизайн с практической задачей каждого экрана.
