Из сплошного текста о проблемах сайта сделал кабинет с понятным продолжением: найти важное, разобраться в задаче, внести правки и проверить результат.
Моя роль
UX/UI-дизайнер
Что делал
Сценарии, интерфейс, UI Kit
Статус продукта
Запущен
01 / Обзор проектаАнонимизированные макеты · демонстрационные данные
О проекте
Началось с вопроса: «И что дальше?»
На старте был только неработающий прототип. Одна страница, длинный текст: вот это на сайте хорошо, а вот это плохо. Без рекомендаций, объяснений и следующего шага. Даже прочитать такой отчёт было непросто. Понять, что с ним делать, — ещё сложнее.
Я сам разбирался в логике продукта и собирал её заново: какие разделы нужны, как связать проблему с действием и где показать результат. На этой основе спроектировал пользовательский путь, экраны и UI Kit.
Кто будет этим пользоваться
Маркетологи и SEO-специалисты. Им нужно видеть проблемы сайта, следить за конкурентами и понимать, упоминают ли компанию нейросети. А ещё — решать, за что браться первым.
Не прочитать. Разобраться и сделать.
Отчёт должен стать началом работы, а не её тупиком. Поэтому для каждой проблемы важно показать, где она возникла, на что влияет и что можно сделать.
За что я отвечал
Проработал структуру и сценарии с нуля, затем собрал интерфейс и библиотеку компонентов. Отвечал не только за внешний вид, но и за то, как человек проходит задачу до конца.
За готовым макетом с задачей
Что происходит после обнаружения ошибки
Разберу на примере страницы, закрытой от индексации. Недостаточно сообщить об ошибке: нужно объяснить, где она находится, как её исправить и как проверить результат.
01
Выбрать задачу
На главном экране видны самые важные проблемы. Отсюда можно сразу открыть задачу.
02
Прочитать инструкцию
Внутри указаны адрес страницы, причина ошибки и порядок исправления.
03
Отметить исправление
После правок на сайте пользователь отмечает задачу. Она переходит в ожидание проверки.
04
Запустить проверку
Сервис проверяет страницу ещё раз. Если ошибка осталась, задача возвращается в работу.
Пример: запрет индексации
Открыл задачу — понял, что делать
Адрес страницы, ошибка и инструкция лежат рядом. Не нужно снова искать нужное место в большом отчёте, чтобы приступить к исправлению.
Почему два статуса
«Я исправил» и «всё работает» — не одно и то же. Интерфейс не должен обещать результат до проверки.
Другие экраны
Меньше поиска. Больше ясности.
В аудите человек ищет проблему, в аналитике — объяснение цифры. Поэтому разделы устроены по-разному: одному нужен приоритет, другому — контекст.
01 / Диагностика
Что исправлять первым?
Вместо длинного списка одинаково важных замечаний — приоритеты и фильтры. В строке видно проблему и страницу, а рядом есть переход к задаче.
Технический аудитПриоритет → страница → действие
02 / Аналитика
Процент без контекста — просто число
Показал рядом с процентом его основу: сколько ответов проверили, за какой период и в каких сервисах. Теперь показатель можно не только увидеть, но и понять.
Видимость в AIВыборка → сравнение → вывод
UI Kit
Не рисовать одну кнопку двадцать раз
Кнопки, поля и таблицы повторяются на десятках экранов. Собрал их в библиотеку Figma, чтобы не пересобирать каждый раз и не ловить различия вручную. Новые экраны строятся из тех же деталей.
Семейство компонентов
21
Семантических переменных
76
Текстовых стилей
7
Состояний кнопки
6
Шрифт и размерыВо всём кабинете использую Inter Tight. Для заголовков страниц выбрал 32 px с интерлиньяжем 40 px, для основного текста 14/20.
Состояния элементовПроработал, как выглядят наведение, нажатие, фокус, загрузка и недоступное действие. У статусов есть подписи, чтобы их можно было понять не только по цвету.
Компоненты в FigmaПовторяющиеся элементы связаны с библиотекой. Если нужно изменить кнопку или поле, правка применяется к их экземплярам в макетах.
UI Kit / Inter Tight
Кнопки и их состояния
Главное действие заметнее остальных, удаление выглядит иначе. Для кнопок подготовил два размера и состояния: от наведения до загрузки и фокуса.
Продукт запустили, и им стали активно пользоваться маркетологи. По опыту работы над проектом я видел, как интерес к сервису вырос: в итоге компания сосредоточилась на этом направлении.
Мой вклад — превратить отчёт в понятный рабочий инструмент. Но успех продукта не только заслуга интерфейса: за ним стоит работа всей команды.
Точные показатели не раскрываю. На этой странице показана версия макетов для портфолио, она отличается от текущего продукта.
Что ещё хочется проверить
Дал бы человеку первую задачу и посмотрел, как он проходит её без подсказок. Понятно ли, что делать? Почему нужно ждать проверки? Куда идти, если ошибка осталась? Эти наблюдения подсказали бы, что улучшать дальше.