От инструментов к цельному продукту
Разрозненные возможности сложились в единый цикл работы с контентом. Рабочий процесс, редактор, AI-сценарии, SEO-анализ и командное пространство стали частями одного целого.
Продуктовая задача
Outranking — AI-платформа для исследования, написания и оптимизации SEO-контента. Продукт появился до того, как AI-генерация текстов стала массовой категорией, и уже объединял исследование, генерацию текста, редактор и SEO-инструменты.
Широкий набор возможностей создавал высокий порог входа. Настройки, AI-инструменты, SEO-анализ, структура статьи и редактор существовали как отдельные части процесса. Пользователю приходилось разбираться во внутренней логике продукта, переходить между инструментами и удерживать контекст самостоятельно.
Задача состояла в том, чтобы связать эти возможности в единый последовательный рабочий процесс: сделать следующий шаг понятным, сохранять прогресс и контекст между этапами и превратить набор мощных инструментов в цельный продукт, пригодный как для индивидуальной, так и для командной работы.
О проекте
Клиент
Outranking
SaaS · ИИ-автоматизация контента
Формат
Продуктовый редизайн
AI-платформа для SEO-контента
Проект
Зона ответственности
- Продуктовый аудит
- Информационная архитектура
- UX/UI-дизайн
- Проектирование AI-сценариев
- Дизайн-система
- Командные сценарии и рабочее пространство
Работа над проектом
Анализ
Был проанализирован существующий пользовательский путь: точки входа, потеря контекста и прогресса, сложные переходы между инструментами и этапы, на которых пользователи прекращали работу.
Архитектура
SEO-бриф, структура статьи, AI-генерация текста, редактор и инструменты оптимизации были связаны в единый последовательный рабочий процесс с понятным прогрессом.
Проектирование
Были переработаны основной редактор, AI Wizard, SEO-инструменты и ключевые рабочие сценарии. Отдельно были спроектированы проекты, папки, роли, права доступа и командное рабочее пространство.
Дизайн-система
Была сформирована общая визуальная и компонентная система для редактора, AI-сценариев, SEO-аналитики и командной части продукта.
Система создания SEO-контента
Настройка структуры
Структура статьи стала управляемым этапом, а не набором решений, которые приходилось удерживать в памяти. Заголовки, секции, H2/H3-иерархию и план материала можно было выстроить визуально до начала написания — каркас статьи был виден сразу.
Единый рабочий процесс
SEO-бриф, AI-черновик, план материала, редактор и инструменты оптимизации были соединены в один сценарий. Процесс больше не требовалось собирать вручную из разных частей; прогресс сохранялся, и было понятно, на каком этапе остановлена работа.
Основной экран
Редактор превратился в полноценное рабочее место: боковая панель, навигация по документу, управление заголовками, ссылками, изображениями и таблицами, отмена и повтор действий, управление масштабом. Ручное HTML-форматирование было заменено интерфейсом, пригодным для ежедневной работы.
AI Wizard
AI-возможности продукта были оформлены как управляемые сценарии. Тип документа, способ генерации, глубина настройки и направление стиля задавались до запуска. Генерация была выстроена как набор специализированных сценариев под конкретные задачи.
SEO-оптимизация
SEO-анализ перестал быть чеклистом. Карта слов, сигналы релевантности, плотность ключевых слов, связанные термины, раскрывающиеся проверки и подсказки на уровне отдельных слов превратили оценку в визуальный процесс принятия решений. Было видно не только что нужно изменить, но и почему.
Рабочее пространство проекта
Рабочее пространство было спроектировано с нуля как командный слой продукта: проекты, папки, архивы, роли, участники, права доступа, языки, теги и совместный доступ. Персональный редактор стал инструментом для команд: понятно, кто за что отвечает, где хранятся материалы, как устроен процесс.
Визуальная система
Типографика и цвета решали конкретные интерфейсные задачи: читаемость, иерархия, рабочие состояния. Не обновление внешнего вида — визуальный язык, который поддерживает работу, а не отвлекает от неё.
Холодная сине-серо-белая палитрасохранила преемственность с визуальной базой Outranking и усилила профессиональный характер продукта. Ключевые цвета получили собственные названия — не для брендбука, а как рабочий инструмент интерфейсной системы: чтобы палитра последовательно применялась для состояний, акцентов, SEO-сигналов и навигации без потери согласованности между экранами.
Red Hat Displayвыбран за читаемость в длинных текстах, поддержку мультиязычного интерфейса и чёткую иерархию между заголовками, подсказками и навигацией. Одинаково убедителен в крупных заголовках и мелких функциональных подписях — что важно для продукта, в котором пользователь долго работает с текстом, настройками и аналитикой.
Финальный дизайн
Влияние на продукт
Короткий путь к ценности
Появился ясный вход и последовательный сценарий. Прогресс перестал теряться при переходах. Контекст начал сохраняться между этапами. Следующий шаг стал видимым.
Командная готовность
Проекты, роли, папки и права доступа сделали из персонального редактора инструмент для команд — с понятной структурой и разделением ответственности.
Бизнес-результат
Решения проверялись через обратную связь реальных пользователей, а не только через дизайн-гипотезы. Продукт стал активнее использоваться в ежедневной работе и помог клиенту привлекать больше платящих пользователей.
Outranking
