О проекте
Заказчиком являлась компания, использующая технологию искусственного интеллекта для определения и расширения целевой аудитории основных игроков рынка.
Цель проекта заключалась в том, чтобы найти оптимальный вариант визуализации данных, который отражал бы сегментацию основных ключевых слов по релевантным категориям. Это был один из этапов формирования и анализа целевой аудитории перед активацией маркетинговой кампании.
Цель проекта заключалась в том, чтобы найти оптимальный вариант визуализации данных, который отражал бы сегментацию основных ключевых слов по релевантным категориям. Это был один из этапов формирования и анализа целевой аудитории перед активацией маркетинговой кампании.
Моя роль
UX/UI Дизайнер,
Основное контактное лицо
Основное контактное лицо
Сроки проекта
Июль 2023 - Сентябрь 2023
First screen
Первый этап
После первого обсуждения с клиентом я сформировала список требований: вводные ключевые слова, изменение их веса, результаты поиска по ключевым словам, сгруппированные
по категориям, а также небольшое резюме для будущей активации маркетинговой кампании через внешние платформы.
по категориям, а также небольшое резюме для будущей активации маркетинговой кампании через внешние платформы.
Я пыталась найти такой способ визуализации кружков
с ключевыми словами, чтобы учесть их вес, силу взаимосвязи с вводными данными, принадлежности к категории и доступные взаимодействия.
с ключевыми словами, чтобы учесть их вес, силу взаимосвязи с вводными данными, принадлежности к категории и доступные взаимодействия.
Вот, что мы решили сделать
Размер = вес
Цвет = сила взаимосвязи
"Пузырь"= принадлежность
Цвет = сила взаимосвязи
"Пузырь"= принадлежность
Доступные взаимодействия
Ручное изменение веса
Удаление существующего слова
Добавление рекомендуемого (серого) слова
Удаление существующего слова
Добавление рекомендуемого (серого) слова
Zoom in
Zero state
After scaling
Focused keyword
Первые выводы
Пока я работала над этой версией, клиент обнаружил некоторые технические ограничения. Поэтому, после представления этого варианта визуализации, я прибегла к масштабным изменениям
в данном разделе, основанным на новых требованиях.
в данном разделе, основанным на новых требованиях.
1
Больше не было output ключевых слов и "пузырей" категорий. Появилось до 3-х уровней подкатегорий внутри каждой категории.
2
Отказались от ограничительных (negative) вводных слов,
но предоставили возможность менять вес вводных ключевых слов.
но предоставили возможность менять вес вводных ключевых слов.
3
Решили отказаться от такой яркой цветовой палитры, в особенности от красного, так как он выглядел очень негативно, настораживал.
4
Категории больше нельзя было удалять, но можно было исключить их из будущей активации маркетинговой кампании.
Второй этап
Раздел с резюме
Отражение результатов изменений
Основная информация о кампании
Примеры для лучшего понимания видов кружков
Основная информация о кампании
Примеры для лучшего понимания видов кружков
Было важно...
Сделать четкую структуру подкатегорий Сделать визуал вовлекающим
Учитывать ограничения будущей разработки
Учитывать ограничения будущей разработки
Было важно...
Оставаться в рамках дизайн системы
Сделать цветовые различия очевидными
Придерживаться простоты и чистоты в дизайне
Сделать цветовые различия очевидными
Придерживаться простоты и чистоты в дизайне
Раздел с ключевыми словами
Управление весом вводных слов
Нет разделение на positive и negative
Возможность удалить вводное слово
Нет разделение на positive и negative
Возможность удалить вводное слово
Я начала с переосмысления структуры экрана, чтобы учесть все новые требования и ограничения, которые возникли после обсуждения с клиентом.
После я начала искать вариант визуализации кружков, принимая во внимание дизайн систему и необходимый функционал.
Также я представила несколько вариантов взаимодействия
с кружками и основу доступного функционала.
с кружками и основу доступного функционала.
Вторые выводы
После я обсудила с клиентом варианты и дальнейшие шаги.
Я предложила оставить пока простой UI и сосредоточиться
в основном на UX части, так как было важно упростить процесс взаимодействия для пользователя. Кроме того, мы планировали переработать дизайн систему, что в любом случае повлияло
на пользовательский интерфейс в будущем.
Я предложила оставить пока простой UI и сосредоточиться
в основном на UX части, так как было важно упростить процесс взаимодействия для пользователя. Кроме того, мы планировали переработать дизайн систему, что в любом случае повлияло
на пользовательский интерфейс в будущем.
Результат
В результате я представила клиенту два варианта дизайна: основной (слева)
и дополнительный (справа).
Основной вариант состоял из 3-х колонок: первая колонка предназначена для вводных данных, центральная - интерактивная часть с категориями и настройками кампании, а третья содержит резюме основной информации о кампании.
В дополнительной версии была добавлена иерархическая структура, это был запасной вариант, который мы планировали протестировать с пользователями,
так как некоторые могут отдать предпочтение скорости и эффективности,
а не вовлекающему опыту, делая упор на оперативный анализ информации.
и дополнительный (справа).
Основной вариант состоял из 3-х колонок: первая колонка предназначена для вводных данных, центральная - интерактивная часть с категориями и настройками кампании, а третья содержит резюме основной информации о кампании.
В дополнительной версии была добавлена иерархическая структура, это был запасной вариант, который мы планировали протестировать с пользователями,
так как некоторые могут отдать предпочтение скорости и эффективности,
а не вовлекающему опыту, делая упор на оперативный анализ информации.
Взаимодействие
Ниже представлены основные варианты взаимодействия с элементами на экране. Данное видео отражает скорее общую концепцию, разработанная же версия, конечно, обеспечивает более плавное взаимодействие пользователя с приложением.
