✏️ Редизайн продукта

Хочу внести заметные обновления в дизайн и информационную архитектуру одного из продуктов, над которым мы работаем с командой. Сейчас изучаю чужой опыт, поэтому в ближайшую неделю, возможно, будет много публикаций с кейсами редизайна.

На видео — фрагмент презентации обновлённой экосистемы Яндекс 360, который подрезал у их Head of Product Design в LinkedIn. Уже вижу несколько интересных решений, которые возьму в тестирование.

Кстати, если знаете кейсы, статьи или видео о редизайне SaaS-продуктов (именно их веб часть), поделитесь, пожалуйста, ссылками в комментариях — буду очень признателен.

UPD: Если кому-то интересно посмотреть саму конференцию, то вот ссылка на неё.

✨ Как сделать дизайн-систему

Бесплатный, компактный и прикладной авторский курс от Михаила Шамина — продуктового дизайнера в ПСБ — по проектированию дизайн-систем. Как пишет сам автор, в курсе нет базовых вещей, связанных с дизайном компонентов: фокус — на закулисье — как устроены процессы, которые приводят к итоговому результату.

Внутри — принципы и роли команды, работа с бэклогом, приоритизация и регламенты. Документация и витрины, хранение компонентов, версии и контроль изменений. Стек инструментов, автоматизация и бэкапы, экономика дизайн-системы, метрики, фичреквесты и кастдев.

📎 Ссылка на курс

🎮 Разработка и внедрение единой дизайн-системы сразу для 13 сервисов

Кейс команды «Яндекс 360» о том, как они собрали и внедрили «Орбиту» — новую общую дизайн-систему для Почты, Диска, Календаря и других продуктов. В материале, к сожалению, мало деталей — авторы прошлись по верхам, но хочется верить, что позже выйдут отдельные статьи по затронутым темам.

Для себя отмечаю: команда решила жёстко зафиксировать лейаут для всех продуктов и разделить сайдбар на глобальную и локальную навигацию — чтобы, как хочется верить, сделать работу с множеством продуктов удобной и оптимальной.

Внутри статьи:
– Истоки: для чего нужна дизайн-система;
– Figma, Storybook и дизайн-токены: магия автоматизации;
– Стандарты и контроль: дисциплина во благо;
– Команда: как повысить вовлечённость;
– Фокус на доступности: создание продукта для всех;
– Метрики и будущее: как измерить эффект от внедрения;
– Советы тем, кто в начале пути.

📎 Ссылка на статью

💎 Редизайн информационной архитектуры Intercom

Интересная статья от Пранавы Тандры, бывшего продуктового дизайнера Intercom, о переосмыслении архитектуры сложного приложения: упрощении навигации, улучшении UX и создании пространства для AI.

Для себя отмечаю: в отличие, к примеру, от Яндекс 360, где навигация разделена на глобальный и локальный уровни, они решили показывать глобальную навигацию полностью при наведении. Пранава ссылается на серию тестов, проведённых командой. Возможно, это действительно неплохой вариант.

Внутри статьи:
– Предпосылки редизайна;
– С чего начали работу (аналитика, интервью и тесты);
– Принцип № 1: объединение похожих вещей;
– Принцип № 2: каркас для AI и автоматизации;
– Принцип № 3: уменьшение шума;
– Принцип № 4: оптимизация личных настроек;
– Переосмысление навигации;
– Результаты и чему научились.

📎 Ссылка на статью

⭐️ Редизайн Linear: перезагрузка дизайна

В 2024 году команда Linear полностью обновила дизайн приложения. Это первая из двух статей, где команда подробно объясняет причины и подход к редизайну, с фокусом на том, почему он важен.

Здесь почти нет про конкретные визуальные решения — это скорее личное видение Карри Сааринена, сооснователя Linear и бывшего ведущего дизайнера Airbnb: о причинах, которые приводят к обновлению дизайна продуктов, и о том, как такие изменения стоит проводить.

📎 Ссылка на статью

⭐️ Редизайн Linear: процесс и результат

В 2024 году команда Linear полностью обновила дизайн приложения. Это вторая часть материала, в которой представлен новый интерфейс и рассказано, как команда подошла к реализации проекта.

Интересный кейс: у команды кроссплатформенное приложение на Electron, и им нужно было готовить обновления с учётом разных сред (веб, macOS и Windows). Плюс хорошо, что они подсветили, как у них выровнены элементы в сайдбаре: раньше, когда я их собирал, не понимал, почему визуально получалось неудачно.

Многим может быть интересна дорожная карта редизайна: с чего начинали, какие решения принимали по пути, как расставляли приоритеты и как выкатывали финальный результат пользователям.

📎 Ссылка на статью

📈 Дашборды: между красотой и эффективностью

Статья от Владимира Фрадкова, продуктового дизайнера Ozon Tech. Про то, почему красивые панели часто бесполезны, и как собрать дашборд, который действительно помогает принимать решения.

Внутри статьи:
– Что такое дашборд и зачем он нужен;
– Почему дашборды часто не работают;
– Иерархия внимания от глобального к локальному;
– Инструменты визуализации;
– Единоначалие фильтров;
– Почему разрозненная фильтрация — это проблема;
– Упрощение разработки;
– Отказ от разработки с нуля.

📎 Ссылка на статью

🖥 Как измерить влияние исследований на разработку

Сложный, скорее лидерского уровня, материал от Анастасии Лестовой — UX-исследовательницы и Product Discovery Lead в Контур.Маркировке, о попытке создать набор метрик для оценки эффективности исследовательских процессов в команде Discovery.

Предложенные метрики:
– Успех исследования;
– Применение результатов;
– Появление новых гипотез;
– Добавление задачи;
– Изменение приоритетов;
– Отмена задачи;
– Релиз в продакшен.

📎 Ссылка на статью

⭐️ Для чего дизайнерам нейросети: сравниваем инструменты и создаём дизайн карт

Статья от коммуникационных дизайнеров ЮMoney, Наташи и Ксюши. Про рабочий пайплайн с нейросетями для иллюстраций и практический кейс по дизайну банковских карт.

Внутри статьи:
– Как выбрать подходящий AI-инструмент;
– Как создать серию изображений в одном стиле;
– Дизайн карт с помощью нейросетей: практический кейс;
– Как нейросети повлияли на наш креативный процесс;
– Итоги экспериментов и мысли.

📎 Ссылка на статью

☀️ Как по-настоящему понять пользователя, чтобы решить его проблему в реальной жизни с помощью дизайна?

Статья от Алексея, ведущего продуктового дизайнера. Это, скорее, теоретическое пособие о первом ромбе модели Double Diamond — для начинающих и для тех, кто хочет привести процесс в порядок. Тон местами учебниковый, но структура в целом понятная.

По сути, автор рисует картину того, как должно быть: интервью со стейкхолдерами, запрос в отдел аналитики, разговоры с пользователями, обзор рынка, формулировка проблемы и перечень артефактов на выходе. Использовать как черновик дорожной карты можно, но обязательно адаптировать под свой контекст.

📎 Ссылка на статью

🥸 Как измерить удовлетворенность пользователей, у которых нет выбора

Александр Попов, продуктовый дизайнер компании «Цифра», написал статью о том, как измерять удовлетворённость пользователей в суровом мире enterprise-продуктов, где, по сути, у рядовых пользователей нет свободы выбора инструмента для своей работы.

Внутри статьи:
– Проблема традиционных метрик;
– Специфика пользователей;
– Особенности измерения UX;
– CASTLE как альтернатива HEART;
– Как измерить CASTLE;
– Поведенческие метрики;
– Методы сбора данных;
– Связь с бизнес‑показателями;
– Истории успеха или немного кейсов.

📎 Ссылка на статью

🎮 Метрики лояльности

Три связанные статьи от UX Feedback — по сути, мегагайд по лояльности. В каждой части — отдельный блок показателей: опросные, поведенческие и бизнес-метрики. Катя Ранараджа, автор статей, даёт определения, объясняет назначение и способы измерения, а также приводит примеры и рыночные бенчмарки.

📎 Часть 1: Бизнес-метрики: LTV, CLV, Churn Rate, Customer retention, Redemption Rate, Repurchase Rate, Repeat Purchase Probability, Loyal Customer Rate.

📎 Часть 2: Метрики клиентского опыта (CX): NPS, CES, CSAT, CSI.

📎 Часть 3: Метрики и опросники юзабилити (UX): SEQ, SUS, UMUX, UMUX-Lite, SUPR-Q, UEQ, UEQ-S.

🌛 От проблемы к запуску: как превратить результаты исследований в реальные продукты

Это продолжение предыдущей публикации Алексея о первом ромбе Double Diamond (Discover и Define). Теперь фокус — на том, как перейти от инсайтов к рабочим решениям и довести их до релиза.

От инсайтов к идеям — через HMW-вопросы, идеацию и приоритизацию по матрице Impact × Effort. Затем — гипотезы с метриками, прототипы от lo-fi до hi-fi, тесты на успешность выполнения задач, время выполнения и число ошибок, итерации, фиксация правил в дизайн-системе, передача в разработку и проверка сборок. Итог — конспект фаз Develop и Deliver, который можно взять за основу и адаптировать под свой процесс.

📎 Ссылка на статью

✨ За кулисами: создание новой системы иконок Atlassian

Кейс команды Atlassian о том, как они пересобрали систему иконок, навели порядок в стилях и размерах, согласовали таксономию и правила, запустили модель контрибьюций и автоматизировали миграцию.

Интересно, что они осознанно выбрали контейнеры 16×16, чтобы не создавать лишние визуальные отступы в элементах и сохранить стилистическое единообразие с новым шрифтом. Обычно за основу берут 24×24 и не заморачиваются.

Ещё интересно, что в систему сразу заложили разделение на одно- и многоцелевые иконки. С учётом того, что UI-иконки могут содержать логотипы подпродуктов, это полезная практика, которая может не допустить размытия смысла иконки.

📎 Ссылка на статью

🥸 PoDPR или зачем нам ещё одна формула приоритизации

Первая публикация в цикле Павла Шерера про PoDPR — формулу приоритизации, которая учитывает не только важность задачи и сложность реализации, но и вероятность успеха, риски и обратимость решения.

Статья объясняет суть подхода, показывает как он дополняет привычные методики и как адаптировать его под свои процессы и ограничения.

📎 Ссылка на статью

🎮 7 практических советов по анимации

Супер-полезная статья от Эмиля Ковальски, дизайн-инженера Linear, про парочку простых приёмов UI-анимации, которые заметно улучшат отзывчивость интерфейса.

Жаль только, что хотя бы 50% этих советов более-менее недорого можно реализовать только если вы используете примитивы Radix UI или Base UI — то есть если ваша команда работает на React.

📎 Ссылка на статью

PS: Находку подрезал у Миши Наера

🎮 Какую шкалу использовать в опросах, чтобы получить лучшую конверсию

Интересный взгляд Полины Трапезниковой, Head of Customer Success в UX Feedback, на то, какие визуальные образы использовать в шкалах опросных форм для сбора обратной связи.

Внутри статьи:
– Проблема выбора образа;
– Шкала: числовой рейтинг;
– Шкала: звезды;
– Шкала: смайлы;
– Опыт западного рынка.

📎 Ссылка на статью

🔍 Как обучать пользователей сложным продуктам

Статья про практичный подход к обучению пользователей продукта. Как встроить обучение в UX, чтобы первое касание пользователя с продуктом стало точкой удержания.

Внутри статьи:
– Определение «первой ценности» (Aha-момент);
– Встраивание обучения в сам продукт;
– Создание многоуровневой системы обучения;
– Использование поведенческих триггеров;
– Измерение эффективности обучения;
– Вовлечение сообщества и социальное обучение;
– Создание живой документации.

📎 Ссылка на статью

🖥 Шесть этапов исследования, которые убедят любого продакта

Описание кейса комплексного исследования от Никиты Краснокутского, старшего дизайнера в Домклик. В нём он рассказывает, почему начал проводить исследование и какие шаги проходил, чтобы получить пул качественных гипотез, которые могут забустить продукт, над которым он работает.

Внутри статьи:
– Этап 1: Полевое исследование;
– Этап 2: Бенчмаркинг;
– Этап 3: Догфудинг;
– Этап 4: Глубинные интервью;
– Этап 5: Отработка фактов;
– Этап 6: Презентация бизнесу;
– Итоги исследования.

📎 Ссылка на статью

ℹ️ Мнемосхемы: искусство бесконечной эффективности

Кейс команды «Цифры» про единый гайдлайн для проектирования мнемосхем. Дизайнер «Цифры» Владимир Тихомиров рассказывает, как команда перешла от принципа «каждый проект живёт по своим правилам» к общей методике с иерархией экранов, темами, библиотекой элементов и понятной передачей в разработку.

Мне здесь было интересно не столько разбирать сам гайд, сколько смотреть, как обстоят дела у команд с необычными продуктами. Ребята делают промышленный софт, где пользователи, предполагаю, часто работают в неудобных условиях, поэтому для них важны немного другие аспекты эргономики, UX и accessibility.

📎 Ссылка на статью

👍 Зачем дизайн-командам телеграм-каналы

Для большинства это, наверное, проходная статья, а для меня — интересный кейс: зачем дизайн-команда Flowwow завела канал в телеге и что в итоге из этого получилось. Понятно, что чаще всего такие каналы — про развитие HR-бренда, но интересны и побочные эффекты: коллаборации с другими командами и просто нетворкинг.

Про канал Flowwow я узнал только из этой публикации. Полистал, подписался — интересные ребята, буду следить. По вайбу они чем-то напоминают дизайн-команду Dodo, которая умеет хорошо балансировать между профессиональным развлекательным контентом и прикладными материалами.

📎 Ссылка на статью