UX / ДИЗАЙН ПРОДУКТА
Продуктовый дизайн: обновление коммуникации
Как улучшить обратную связь между продуктом и пользователем
Интерфейсы частично изменены, чтобы соблюсти условия конфиденциальности.
Контекст
- Редизайн работающего продукта — всегда баланс между улучшением и риском потерять знакомое.
С одной стороны — необходимость пересмотра. С другой — опора на повседневные паттерны, к которым пользователь привык.
В этом проекте мы искали и устраняли локальные проблемы в взаимодействии, стараясь не ломать устоявшиеся сценарии.
Важно было не нарушить привычный ход: любые изменения могли вызвать раздражение или подорвать доверие. - Фокус был на двух направлениях:
- Работа с паролями: Мы исследовали, как сделать взаимодействие интуитивным: карточки, полноэкранные экраны, диалоговые окна или выезжающие панели.
- Системные сообщения: Мы выявили устаревшие компоненты, перешли на элементы новой дизайн-системы и переработали логику уведомлений — чтобы они были чёткими, заметными и не перегружали интерфейс.
- Моей задачей было привести все сообщения и подсказки к единой структуре, чтобы они появлялись в нужный момент и были легко читаемы.
Подход
- ИсследованиеСначала мы собрали все состояния и сценарии, в которых система общается с пользователем: успешные действия, ошибки, нейтральные уведомления. Это дало общую карту, на которую можно было опереться.01
- ПрототипированиеДальше пошли на перебор вариантов. Прототипировали быстро, обсуждали вслух, отбрасывали слабое. Каждый компонент проверяли в реальных кейсах — не на красивость, а на живучесть.02
- ПередачаКогда стало ясно, как должна работать система обратной связи, я собрал спецификации для разработчиков: логика позиционирования, поведение в крайних случаях, возможные конфликты. Всё задокументировал и встроил в базу знаний команды — чтобы это работало не только сейчас, но и через полгода.03
Уведомления
Сначала я классифицировал все системные сообщения — по назначению и типу взаимодействия. Получилось три группы:
- Частые событиянапример, сохранения, удаления или мелкие ошибки. Раньше они отображались в верхнем баннере.↺
- Информационные уведомлениякоторые не требуют немедленного ответа: например, сообщение о предстоящих техработах или о предоставленном доступе к паролю.ℹ
- Ключевые действия и подтвержденияоформлялись как всплывающие окна с выбором действия.✦
Предложил заменить постоянный баннер на компактное всплывающее уведомление — решение, которое уже применялось в других продуктах компании и не занимало лишнего места.
На тестах выяснилось, что компонент теряется: его не замечают, особенно на фоне выезжающих панелей, к которым интерфейс постепенно переходил.
Я пересобрал сам компонент — на основе аналогов из новой дизайн-системы. Обосновал, почему текущая реализация не работает: не считывается, нарушает визуальный ритм и выбивается из общей логики.
Обновлённая версия стала частью дизайн-системы и была принята как единый паттерн.
На тестах выяснилось, что компонент теряется: его не замечают, особенно на фоне выезжающих панелей, к которым интерфейс постепенно переходил.
Я пересобрал сам компонент — на основе аналогов из новой дизайн-системы. Обосновал, почему текущая реализация не работает: не считывается, нарушает визуальный ритм и выбивается из общей логики.
Обновлённая версия стала частью дизайн-системы и была принята как единый паттерн.
Диалоговые окна и иконки
При анализе модальных окон я заметил, что иконки в заголовках используются несистемно: где-то они сигнализируют о важности, где-то — просто для оформления. Кроме того, типы самих модалок применялись не по назначению: например, для сценария удаления объектов предназначался тип «предупреждение», хотя это скорее преднамеренное, потенциально опасное действие.
Я провёл исследование: предложил участникам сравнить варианты удаления объектов с разными типами модалок — Warning и Error, с различными иконками. Пользователи единогласно выбрали вариант с типом Error и иконкой корзины — как наиболее понятный для деструктивного действия.
Я провёл исследование: предложил участникам сравнить варианты удаления объектов с разными типами модалок — Warning и Error, с различными иконками. Пользователи единогласно выбрали вариант с типом Error и иконкой корзины — как наиболее понятный для деструктивного действия.
Дополнительно я проанализировал, как типы модальных окон и цветовые токены используются в крупных дизайн-системах. На основе этого предложил заменить тип Error на Danger — чтобы было понятнее, где речь об ошибке, а где о потенциальной потере данных. Это повысило гибкость в сценариях и согласовало визуальную семантику: красный цвет в системе уже обозначал опасность, а не просто ошибку.
Также я предложил использовать иконки только в случаях успеха, предупреждения и опасности — чтобы акцентировать внимание. Во всех остальных случаях — отказаться от них, чтобы не создавать визуального шума.
Все предложения были приняты и вошли в обновлённую версию дизайн-системы.
Также я предложил использовать иконки только в случаях успеха, предупреждения и опасности — чтобы акцентировать внимание. Во всех остальных случаях — отказаться от них, чтобы не создавать визуального шума.
Все предложения были приняты и вошли в обновлённую версию дизайн-системы.
Маркетинговые сообщения
Сначала я собрал и классифицировал все типы маркетинговых сообщений: напоминания о завершении пробного периода, предложения по апгрейду подписки, сезонные акции. В этом мне помогла команда QA — они выгрузили и промаркировали все доступные варианты. После категоризации я обновил устаревшие макеты сообщений и отправил их в маркетинг на согласование.
Дополнительно мне поручили добавить функциональность перехода на платную версию и возможность оставить отзыв. Обе опции должны были быть легко доступны: первая — для повышения конверсии, вторая — чтобы снизить долю негативных отзывов в сторах и соцсетях.
Дополнительно мне поручили добавить функциональность перехода на платную версию и возможность оставить отзыв. Обе опции должны были быть легко доступны: первая — для повышения конверсии, вторая — чтобы снизить долю негативных отзывов в сторах и соцсетях.
Я провёл анализ конкурентов и близких по модели сервисов: как они решают аналогичные задачи, какие паттерны используют. На основе этого предложил три варианта размещения — с разными уровнями видимости и разной степенью вмешательства в пользовательский сценарий. Каждый вариант сопровождался описанием плюсов и возможных рисков. Это помогло команде выбрать решение, которое работало на бизнес-задачи, но не раздражало пользователя.
Как это повлияло
Вместо отдельных правок мы выстроили системную логику общения продукта с пользователем.
Сообщения стали проще, заметнее и понятнее. Исчезли визуальные противоречия, снизилась нагрузка на восприятие. Пользователь стал быстрее считывать, что произошло и что от него требуется.
Маркетинговые сообщения перестали выпадать из общего тона интерфейса — теперь они встроены в продукт, не перебивая основной сценарий.
Компоненты получили чёткое назначение, а паттерны — опору на реальные сценарии. Всё стало частью дизайн-системы.
Каждое решение опиралось на реальные тесты и пользовательские отклики.
Всё, что было сделано — от исследований до макетов, обсуждений и обоснований — задокументировано и передано в базу знаний клиента.
Сообщения стали проще, заметнее и понятнее. Исчезли визуальные противоречия, снизилась нагрузка на восприятие. Пользователь стал быстрее считывать, что произошло и что от него требуется.
Маркетинговые сообщения перестали выпадать из общего тона интерфейса — теперь они встроены в продукт, не перебивая основной сценарий.
Компоненты получили чёткое назначение, а паттерны — опору на реальные сценарии. Всё стало частью дизайн-системы.
Каждое решение опиралось на реальные тесты и пользовательские отклики.
Всё, что было сделано — от исследований до макетов, обсуждений и обоснований — задокументировано и передано в базу знаний клиента.
И ещё кое-что
- Чтобы поддержать командный дух, я придумал и нарисовал набор анимированных эмодзи для внутренних чатов. Они стали неформальной наградой — их вручали на демо и за победу в мини-играх. Маленькая деталь, но она добавила жизни: стало больше улыбок, а команда — чуть ближе.
Ещё проекты
-
Верификация и доступ к банковским услугамОт идентификации до подписания договора — без лишних шагов -
Верификация и доступ к банковским услугам: Дизайн-процесс.Как проектировался сервис, упрощающий путь от идентификации до получения услуг -
От стальных ящиков к цифровому доступуПроектирование опыта аренды сейфа — с доверием, удобством и ясностью -
AR-мерчендайзинг для iPadИнструмент для просмотра коллекций и товаров с AR-примеркой