Риса за Творчество · редизайн музыкальной платформы
Сделал «Кинопоиск для музыки» доступным для всех
Многие любители музыки в СНГ хотели бы платформу по типу Кинопоиска — чтобы оценивать релизы, писать рецензии и следить за экспертными рейтингами. Я рассказывал знакомым о «Риса за Творчество» (РЗТ), но заметил, что сами они в ней не могут разобраться: путаются в разделах и механиках, не понимают систему оценки и не знают, с чего начать. Поэтому я провёл UX/UI-аудит и исследования, пересобрал информационную архитектуру и переработал ключевой сценарий — оценку релиза. Продукт стал понятнее новичкам и сохранил глубину для опытной аудитории.
Средний успех навигационных заданий до и после редизайна архитектуры
10
глубинных интервью: 5 новичков и 5 пользователей из Топ-90
Страница релиза РЗТ · прокрутите внутри
Проблема, задача, ограничения
Людям интересна идея, но продукт не объясняет себя сам
Проблема
Новым пользователям сложно быстро понять, что это за продукт, что здесь можно делать и с чего начать. Механики требуют изучения, а навигация и визуальная иерархия создают высокий порог входа.
Задача
Пересобрать опыт РЗТ так, чтобы новичок быстро понял ценность платформы, и при этом сохранить уникальность и глубину продукта для уже вовлечённой аудитории.
Ограничения и как я с ними работал
01
Простота для новичков без потери глубины для опытной аудитории
Рейтинги, глубина механик и взаимодействие комьюнити являются важной особенностью РЗТ. Нужно было снизить порог входа для нового пользователя, сохранив глубину продукта для тех, кто уже хорошо знаком с системой.
02
Большой масштаб продукта
Объём продукта значительно превышает возможности и ограниченные сроки для работы одного дизайнера. Поэтому важно было сфокусироваться на ключевых пользовательских сценариях и приоритизировать гипотезы, а не стараться изменить всё сразу.
03
Нет доступа к полноценной продуктовой аналитике
У меня не было данных о конверсии, удержании, времени выполнения сценария, количестве незавершённых сценариев и других продуктовых метриках. Поэтому проблемы и приоритеты определялись преимущественно на основе UX-аудита и пользовательских исследований.
04
Не учитывались технические ограничения разработки
Ограничения текущей кодовой базы, сроки и стоимость реализации отдельных решений не являлись решающим фактором. Я опирался на улучшение пользовательского опыта и сценариев.
Рабочий процесс
От аудита к проверенным решениям
Каждое решение опирается на данные предыдущего шага: аудит дал гипотезы, интервью и тесты их подтвердили или отсеяли, а дизайн проверялся повторным тестированием.
01
UX/UI-аудит и конкурентный анализ
Бенчмаркинг 6 платформ, аудит интерфейса по эвристикам, восстановление архитектуры AS IS.
Проблем нашлось много, поэтому нужно было выбрать главные.
02
Гипотезы и приоритизация
Каждую проблему перевёл в гипотезу по HADI-структуре и приоритизировал по адаптированной ICE.
Гипотезы нужно было проверить на реальных пользователях.
03
Глубинные интервью
Поговорил с новичками и опытными пользователями РЗТ.
Интервью подтвердили, что есть проблемы с меню и навигацией. Поэтому навигацию нужно было проверить отдельно.
04
Проверка навигации
Tree test AS IS, затем открытая карточная сортировка, затем tree test TO BE.
После всех исследований появилась опора для изменений в интерфейсе.
05
UI-кит и редизайн
Визуальная система, меню, главная и контентные блоки.
Главное действие в РЗТ — оценка релиза, а систему оценки новички не понимали. Поэтому следующим шагом стал сценарий оценки.
06
Ключевой сценарий — оценка релиза
User flow AS IS и TO BE, страница релиза, онбординг, подсказки, авторизация.
UX/UI-аудит
Где продукт теряет новичка
Конкурентный анализ
Прямого аналога РЗТ в СНГ нет, поэтому я изучил музыкальные и контентные платформы со схожими сценариями и сравнил в таблице бенчмаркинга: структуру сервисов, работу с основной единицей контента, оценки и рецензии, поиск нового контента, рейтинги и социальные механики.
У всех конкурентов контент — центральная точка взаимодействия. В РЗТ порядок обратный: на первый план выходят внутренние механики.
02
Сложная информация имеет простой первый слой
Уникальную систему оценки должен легко считывать даже неопытный пользователь, например за счёт визуальной адаптации.
03
Быстрый просмотр и глубокое изучение — разные сценарии
Конкуренты позволяют понять ценность контента без глубокого погружения.
04
Источник мнения должен быть понятен
Пользовательское и профессиональное мнение разделяют разными типами оценок, бейджами и местом на странице.
05
Поиск — не только каталог
Рекомендации, подборки и расширенные фильтры — такие же важные способы найти контент.
🙃
Здесь могла быть ваша реклама
UI-аудит по эвристикам
Проанализировал основные экраны и зафиксировал проблемы прямо на скриншотах. Что проверял:
Визуальная иерархия
Консистентность компонентов и состояний
Сетка и группировка
Типографика и контраст
Понятность иконок и цветов
Обратная связь интерфейса
Отображение оценок
Разметка проблем на экранах текущего сайта
Ключевые инсайты
01
Нет единой визуальной логики
Одинаковые по функции элементы оформлены по-разному, а похожие внешне выполняют разные действия: кнопки и плашки с текстом выглядят одинаково.
02
Визуальный перегруз
Слабая иерархия, плотная вёрстка и много равнозначных блоков. Платформа состоит из карточек с хаотичным и неконсистентным содержимым.
03
Цвет и иконки не объясняют назначение
Один и тот же красный обозначает и активность авторов, и ошибку интерфейса.
04
Не хватает пояснений
Много механик и геймификации, но почти нет подсказок, в том числе для расшифровки оценок.
Архитектура AS IS
Восстановил информационную архитектуру сайта: верхнеуровневые разделы, вложенные страницы, профили релизов, пользователей и артистов, связи между сущностями. Отдельно отметил дубли, неоднозначные названия и проблемные связи.
Информационная архитектура AS IS
Ключевые инсайты
01
Слишком много разделов верхнего уровня
В меню их больше, чем удобно держать в голове (закон Миллера, 7±2). Новичку трудно понять, с чего начать.
02
Рейтинги конкурируют между собой
Рейтинги контента и пользователей, премии и достижения стоят рядом и спорят за внимание. Непонятно, что из этого главное.
03
Связанные сценарии разбросаны
Рейтинг всех релизов и рейтинг новичков лежат на разных страницах и никак не связаны.
Гипотезы и приоритизация
От проблем к проверяемым гипотезам
HADI-структура
Для каждой гипотезы по итогам аудита я описывал цепочку по адаптированному HADI-циклу:
проблема→гипотеза→решение→способ проверки→метрика
Гипотезы по HADI-структуре
Приоритизация по ICE
Приоритизировал гипотезы по адаптированной модели ICE: разделил сложность реализации на дизайн и разработку, чтобы не недооценивать проектирование и проверку.
Impact — влияние изменения на пользовательский опыт
Confidence — уверенность на основе аудита, бенчмаркинга и исследований
Design Effort — сложность проектирования и проверки решения
Dev Effort — ожидаемая сложность технической реализации
Цвет строки — приоритет:низкийвышевысокийсамый высокий
Приоритизация гипотез по ICE
Интервью
10 интервью с двумя сегментами
Чтобы проверить гипотезы, я разделил респондентов на две группы по 5 человек. Нужно было упростить вход для новичков, не отняв ценность у тех, кто уже пользуется платформой.
5 человек · новички
Интересуются музыкой, но не знакомы с РЗТ
Исследовал первый контакт: понятно ли назначение платформы, видна ли её ценность, получается ли сориентироваться в навигации, прочитать оценку и разобраться в механиках без предварительного знания. Встроил тест первого впечатления и короткий навигационный тест.
5 человек · опытные
Пользователи из рейтинга Топ-90 РЗТ
Гайд строился вокруг реальных повторяющихся сценариев. Важно было отделить то, что человек действительно считает удобным, от того, к чему он просто привык.
Интервью с респондентами
Главное из интервью
01
Систему оценки считают высокопороговой
Почти все новички назвали её сложной: непонятна девяностобалльная логика, часть критериев остаётся расплывчатой, а пояснения спрятаны слишком глубоко.
02
Активность авторов делит аудиторию
Новички не понимали, что это за контент и зачем он. Опытные пользователи называли лайки и комментарии авторов одной из главных ценностей РЗТ.
03
Подсказки нужны даже опытным
Опытные пользователи тоже разобрались в системе не сразу — с помощью подсказок, стримов и привычки. И до сих пор иногда заглядывают в подсказки.
Тестирование архитектуры
Три раунда проверки навигации
Учитывал не только финальный выбор, но и весь путь: возвраты, блуждания и уход на Главную как запасной вариант.
средний успех по тем же 11 заданиям: 119 из 198 ответов (было 39,0%)
6/18
нашли, где заказать разбор релиза (было 0 из 14)
9/18
назвали «Сетки премий» непонятными, поэтому в меню их нет
Процент успешно выполненных заданий
Доля засчитанных ответов (данные Pathway)
AS IS · 14 чел.TO BE · 18 чел.
Что сработало
43%→83%
Найти самых активных участников
Через раздел Сообщество
29%→72%
Найти рейтинг начинающих артистов
64%→78%
Найти лучшие треки и альбомы
Через раздел Рейтинг
0%→33%
Найти, где заказать разбор релиза
Раньше не нашёл никто
Что ещё стоит доработать
50%→61%
Найти информацию о проекте
43%→50%
Найти страницу релиза
7%→33%
Найти значимые альбомы
Выросло, но «Ценность альбомов» всё ещё путают с обычными альбомами
Итоговая архитектура
Главным выводом стало то, что проблема навигации не только в количестве пунктов, но и во внутренней терминологии. Я не стал переименовывать всё подряд: многие термины — часть идентичности РЗТ, и знакомые пользователи легко их находят. Поэтому финальная структура сохраняет продуктовый язык, немного уточняя его и раскладывая в пять понятных разделов.
Главная
Баннер
Топ-15 релизов за сутки
Релизы
Комментарии авторов релизов
Рецензии
Рецензии медиа
Топ-90 пользователей
Ценность альбомов
Плейлисты
Музыка
Релизы
Новые имена
Рецензии
Комментарии авторов релизов
Авторы релизов
Плейлисты
Сообщество
Топ-90 пользователей
Достижения пользователей
Рейтинг
Рейтинг релизов
Ценность альбомов
Премия
Результаты премии
Премия РЗТ
О проекте
О нас
Новости
Часто задаваемые вопросы
Заказать разбор релиза
Статистика сайта
Обратная связь
БылоМного плоских верхнеуровневых пунктов
↓
СталоГлавная и 5 крупных разделов
Было«Магазин» не связывался с разбором релиза
↓
Стало«О проекте → Заказать разбор релиза»
Было«Топ-90» путали с рейтингом чего угодно
↓
Стало«Сообщество → Топ-90 пользователей»
Было«Новые имена» смешивали контент и рейтинг
↓
СталоКонтент — в «Музыке → Новые имена», рейтинг — внутри «Рейтинга»
Было«Ценность альбомов» путали с методикой и калькулятором
↓
СталоТермин сохранён, раздел стоит в «Рейтинге»
Было«Сетки премий» — непонятный пункт
↓
СталоУбраны из навигации, остаются форматом внутри «Результатов премии»
Подтверждение гипотез
Итоги исследований
Проверка подтвердила главное: РЗТ нужен более простой вход, но без потери глубины. Все 14 гипотез из таблицы ICE я проверял на интервью, а навигацию ещё и тестами архитектуры.
Гипотезы, которые повлияли на дизайн
Восемь из 14 гипотез, которые сильнее всего повлияли на решения. Выводы по всем — в итоговой таблице ниже.
ПодтвердиласьНавигация
Если объединить разделы меню в логические группы и сократить количество пунктов меню, то поиск тех или иных разделов станет быстрее и проще
Проверка
Интервью с новичками, карточная сортировка, tree test AS IS и TO BE
Результат
Новую структуру понимают лучше: в tree test TO BE задания в среднем решали успешнее, чем в AS IS
↑ средний успех по 11 одинаковым заданиям: с 39,0% до 60,1%, ↑ заказ разбора: с 0% до 33%
ПодтвердиласьСистема оценки
Система оценки должна быть проста в понимании и разъясняться по ходу выставления оценки. Так уменьшится порог входа для новичков, а старичкам придётся реже обновлять информацию в голове
Проверка
Интервью с новичками и опытными пользователями
Результат
Подсказки нужны не только новичкам: даже опытные не всегда сразу понимают критерии. Упрощать систему нельзя, сложность — часть ценности РЗТ, поэтому объясняем её в момент действия
Структура сайта должна строиться вокруг творческого контента, а не рейтингов и премий, чтобы для пользователя был меньше порог входа
Проверка
Интервью с новичками и опытными пользователями
Уточнение
Для опытных премии, рейтинги и статусы — тоже часть ценности. Первый слой делаем контентным, глубину сохраняем
В дизайне
Главная: релизы и рецензии сверху, механики РЗТ глубже. Меню: сразу после главной идёт «Музыка», рейтинги и премия — ниже
Метрика
↑ доля новичков, которые поняли, что это за сайт
Подтвердилась с уточнениемСистема оценки
Пользователь должен иметь возможность взаимодействовать со всей системой оценки и рейтингов. Это увеличит вовлечённость и повысит доверие пользователей
Проверка
Интервью с новичками и опытными пользователями
Уточнение
Для опытных это важно: многие уже считают ценность альбомов отдельно и пишут расчёт в рецензиях. Но потребность не у всех, части пользователей хватает пяти критериев, поэтому ценность альбома — доступная, но необязательная
В дизайне
Раздел «Ценность альбомов» в новой архитектуре: альбомы по ценности, методика и расчёт
Метрика
↑ доля пользователей, которые выставляют ценность альбома
Слабо подтвердиласьПоиск
Если добавить блок рекомендаций на основе контента, это удлинит сессию основного сценария — поиска и изучения контента
Проверка
Интервью с новичками и опытными пользователями
Результат
Потребность в открытии музыки есть, но лучше работают собственные входы РЗТ: новые релизы, обсуждаемое, авторы, премии
Решение
Отложил полноценные рекомендации и усилил существующие входы на главной. На странице релиза добавил только лёгкие блоки «Похожие релизы» и «Больше от автора»
Слабо подтвердиласьСообщество
Если добавить возможность создавать подборки и статьи от авторов, это увеличит создание контента на площадке и привлечёт новую аудиторию
Проверка
Интервью с новичками и опытными пользователями
Результат
Подборки интересны как дополнение, но не как ядро: релизы, оценки и рецензии важнее
Решение
Отложил до проверки конкретных форматов: подборки доверенных людей, итоги премий, новые имена
Итоговые выводы по всем гипотезам
По результатам всех исследований я составил итоговые выводы и задачи на редизайн по каждой из 14 гипотез.
Подтвердились
Гипотезы о снижении порога входа: систему оценки проще освоить новичкам, а глубина для опытных сохраняется.
Подтвердились с уточнением
Остальные гипотезы. Главное уточнение: нужен баланс между упрощением для новичков и ценностью для опытных.
Слабо подтвердились
Рекомендации и пользовательские списки не получили устойчивого подтверждения, поэтому полноценные рекомендации и списки не вошли в первую итерацию.
Главная — первая точка контакта новичка. На старой главной новички не понимали суть платформы: перед релизами шли сторис и два блока активности авторов, и было неясно, что здесь главное. Я пересобрал страницу, сделав акцент на релизы. Основание — гипотеза «структура вокруг творческого контента», она подтвердилась ↑
Главная РЗТ · прокрутите внутри
Порядок блоков
Было · 12 блоков
Баннерпоявляется периодически, на скрине его нет
Топ-15 за сутки в формате сторис→ hero-блок
Понравилось авторам→ список в хедере
Авторские комментарии
Добавленные релизы
Новые имена→ фильтр в «Релизах»
Рецензии медиа на релизы
Новые рецензии на релизы
Топ-90 по баллам сообщества
Статистика→ «О проекте»
Ценность альбомов
Плейлисты
Стало · 9 блоков
Баннерпоявляется периодически: например, анонс фестиваля
Топ-15 релизов за суткиhero вместо сторис
Релизыфильтры «Новые имена» и «Активность авторов»
Комментарии авторов релизов
Рецензии
Рецензии медиа
Топ-90 пользователейраньше «Топ-90 по баллам сообщества»
Ценность альбомов
Плейлисты
Концерты и рецензии на концерты появились на сайте после редизайна, поэтому в сравнение не входят.
Главная целиком
Новая главная собрана на новом UI-ките: единые отступы, палитра и типографика, упорядоченные бейджи и статусы, фильтры в ленте релизов.
Было
Стало
Hero-блок вместо сторис
Сторис стояли первыми на сайте. Блок притягивал внимание, но не объяснял, что показывает: новички не считывали в нём тренды сообщества. Интервью ↑
Проблемы
Новички не замечали заголовок и принимали блок за сторис пользователей
Клик открывает релиз в карусели, перекрывающей весь контент
Красная обводка похожа на паттерн «просмотрено / не просмотрено» и не передаёт активность авторов
Решение
Hero-блок с акцентным заголовком «Топ-15 релизов за сутки»
Карусель, в которой сразу видна вся информация о выбранном релизе
Оценки скрыты по умолчанию. Из интервью выяснилось, что некоторые опытные пользователи не хотят видеть спойлеры оценок в трендах
Было
Стало
Активность авторов
По итогам интервью это один из самых спорных блоков. Новички не понимали, что это за контент и зачем он. А опытные пользователи называли лайки и комментарии авторов одной из главных ценностей РЗТ.
Проблемы
Новички не понимают, что это за раздел и какую информацию несут карточки
Сущности внутри карточки спорят между собой, нет чётких акцентов
Решение
Перенёс активность в ленту уведомлений в хедере — знакомый многим пользователям паттерн
Добавил активность отслеживаемых пользователей
Лайки и комментарии авторов по-прежнему видны на карточках релизов, а фильтр «Активность авторов» оставляет в ленте только такие релизы
Опытные сохраняют постоянную видимость событий, а новичков блок больше не сбивает
Было
Стало
Карточки контента
У карточек релизов, рецензий, рецензий медиа и комментариев авторов были похожие проблемы: размер зависел от контента, элементы спорили между собой, иконки не объясняли действия. Я пересобрал их по одному принципу: сначала контент, потом автор и механики.
Проблемы
Размер карточки зависит от контента
Элементы размещены хаотично
Новички не понимают разницу между кругами оценок
Решение
Иконками развёл простую оценку и оценку с рецензией
Показал собственную оценку для сравнения и быстрого перехода к оцениванию
Управление вынес в ховер и добавил «Трейлер» для быстрого прослушивания — одну из ключевых функций по итогам конкурентного анализа и интервью
Было
Стало
Проблемы
Размер карточки зависит от контента
Акцент на пользователе, а не на рецензии
Иконки не передают смысл действия
Решение
Увеличил текстовый блок и сделал акцент на рецензии
Собрал все бейджи и статусы в один блок рядом с никнеймом
Убрал лишние иконки, перенеся их функции в ховер и саму карточку
Было
Стало
Проблемы
Кроме заголовка, о рецензии ничего не видно: чтобы понять, о чём она, нужно уйти по внешней ссылке
Превью маленькое, акцента на медиа нет: непонятно, что это сторонний контент с видео
Решение
Текст рецензии теперь всегда виден, а целиком открывается по кнопке прямо на сайте — уходить по внешней ссылке не нужно
Сделал акцент на медиаконтенте: большое превью, при наведении на него можно перейти к просмотру видео
Было
Стало
Проблемы
Размер карточки меняется в зависимости от контента
Акцент на пользователе, а не на комментарии
Иконки не передают смысл действия и путают
Решение
Оставил отдельным блоком на главной с новой иерархией: релиз → комментарий → подпись автора → выбор комментария
Для выбора комментария переиспользовал паттерн ленты уведомлений
Было
Стало
Меню
Пять разделов вместо плоского списка
Архитектуру TO BE перенёс в боковое меню: главная и пять разделов — «Музыка», «Сообщество», «Рейтинг», «Премия», «О проекте». Контент идёт первым, а новости, Q&A и заказ разбора собраны в «О проекте» в конце. Глобально ничего не убрал: пункты объединены или перенесены в другие разделы, а названия уточнены по итогам интервью и тестов — например, «Авторы» стали «Авторами релизов».
В tree test новая структура подняла средний успех по 11 заданиям с 39,0% до 60,1%. Тестирование архитектуры ↑
ПроблемаСлишком много верхнеуровневых пунктов одним списком
↓
РешениеГлавная и 5 разделов по итогам карточной сортировки
ПроблемаСверху новости, Q&A и магазин — порядок не объясняет, что это за платформа
↓
РешениеПервой идёт «Музыка», служебные пункты — в «О проекте» в конце
ПроблемаМеню нельзя зафиксировать открытым
↓
РешениеГамбургер переключает широкое и узкое меню, выбор запоминается
ПроблемаИконки разных стилей: контурные вперемешку с залитыми
↓
РешениеЕдиный набор: Phosphor и доработанные иконки с оригинального сайта
Было
«Концерты» появились на сайте уже после редизайна
Стало
Единый набор иконок на основе Phosphor: контур — обычный пункт, заливка — активный
Как работает меню
Узкое: подпункты по наведениюШирокое, разделы свёрнутыРаздел раскрыт по кликуРядом с контентом
Выбор запоминается
Гамбургер переключает широкое и узкое меню. Сайт помнит, какое состояние выбрал пользователь.
Открывается рядом или поверх
Если широкое меню помещается слева от контента, оно просто открывается. Если нет — ложится поверх и слегка затемняет страницу.
Клик и наведение
В широком меню разделы раскрываются и сворачиваются по клику. В узком подпункты появляются по наведению на иконку.
Поиск там, где его видно
Поиск всегда есть в хедере. В меню он появляется, только когда меню ложится поверх и закрывает хедер.
Хедер для гостя и для пользователя
User flow оценки
User flow: оценка релиза и рецензия
Оценка релиза — главное ценностное действие на платформе. Я разобрал текущий flow, чтобы понять, где пользователи могут отваливаться и как снизить порог входа для новичков.
Путь новичка до первой оценки
На схемах ниже два пути: новый и опытный пользователь. Они отличаются входом: новичку нужно зарегистрироваться и разобраться в системе оценки. Поэтому здесь путь новичка по этапам — где он выпадал из сценария и что я поменял.
Было
Стало
1Знакомство с релизом
уход
Данных о релизе мало — пользователь уходит слушать на сторонний сервис и может не вернуться
На странице релиза ↓ больше данных и текст релиза — уходить не нужно
2Вход и регистрация
тупик
Длинная регистрация с «причиной регистрации». После неё открывается главная, а не релиз — сценарий обрывается
Короткая регистрация ↓ в модальном окне, после неё пользователь возвращается на страницу релиза
3Система оценки
уход
Система оценки непонятна, а объяснение лежит на другой странице
Формат нужно выбрать заранее. Если передумал и решил писать рецензию, критерии сбрасываются
Оценка и рецензия в одном блоке на странице релиза ↓: сначала оценка, рецензию можно дописать в любой момент без потери критериев
5Отправка
задержка
Об ошибках в заголовке и тексте рецензии пользователь узнаёт только после «Отправить» и «Подтвердить»
Добавил подсказки к полям и улучшил валидацию ↓: счётчик символов виден во время ввода, а после отправки ошибка подсвечивает нужное поле и исчезает, как только его исправили
Схемы целиком
Новый и опытный пользователь. Схема открывается крупно по клику.
Страница релиза
Страница с главным сценарием
Пересобрал страницу релиза целиком: на ней сходятся три основных сценария — знакомство и прослушивание, оценка и рецензия, чтение чужих рецензий и общение с пользователями.
Редизайн страницы
Проблемы страницы пришли из интервью с опытными пользователями и новичками.
СценарийПроблемыРешения
Знакомство и прослушивание
Не хватает данных о релизе
Новички не могут быстро считать общую оценку
Больше метаданных. Плеер с текстом и трейлером релиза, меньше причин уходить на другие сервисы
Оценка всегда в подробном виде: видно, какой балл к какому виду оценивания относится
Оценка и рецензия
Система оценивания непонятна новичкам, а опытные осваивали её постепенно и до сих пор ищут подсказки
Сложно понять, стоит ли читать конкретную рецензию
Рецензии свёрнуты по умолчанию
Сортировка: новые, популярные, сначала высокая или низкая оценка, сначала длинные или короткие. Фильтры: подписки и «понравились авторам релиза»
AI-саммари всех рецензий для быстрого знакомства с релизом
Было
Стало
Вход и регистрация
Раньше вход и регистрация были отдельной страницей: чтобы оценить релиз, приходилось уходить с него и заполнять длинную форму. Теперь они открываются в модальном окне прямо на странице релиза, и пользователь не выпадает из сценария оценки. Убрал «причину регистрации» и обязательное подтверждение автора через соцсети: статус автора можно подтвердить позже в профиле.
Было
Отдельная страница: чтобы войти, нужно уйти с релиза
Стало
Модальное окно поверх страницы релиза
Было
Две ветки: у пользователя «причина регистрации», у автора подтверждение через соцсети и три чекбокса
Стало
Одна форма для всех: четыре поля и одно согласие
Ошибки
Раньше ошибки входа появлялись плашками под кнопками, далеко от полей, а под паролем при регистрации могло висеть сразу несколько строк. Теперь ошибка стоит под своим полем и проверяется при вводе: как только значение подходит, она снимается.
Было
Стало
Матрица ошибок — 12 ситуаций во входе и регистрации и текст, который видит пользователь
Форма
Ситуация
Ошибка
Вход, регистрация
Логин пустой или не в формате почты
Введи логин в формате электронной почты
Вход, регистрация
Нет сети или ошибка сервера
Нет связи. Проверь интернет и попробуй ещё раз
Вход
Пароль не введён
Введи пароль
Вход
Почта и пароль не подходят друг к другу
Не удалось войти. Проверь почту и пароль
Вход
Слишком много неудачных попыток входа
Слишком много попыток. Попробуй войти позже
Регистрация
Обязательное поле не заполнено
Это поле обязательное
Регистрация
Почта уже зарегистрирована
Аккаунт с этой почтой уже есть. Войди или восстанови пароль
Регистрация
Никнейм уже занят
Это имя уже занято
Регистрация
В никнейме недопустимые символы
Используй только буквы, цифры и допустимые символы
Регистрация
Пароль не соответствует требованиям
Пароль не соответствует требованиям
Регистрация
Пароли в двух полях не совпадают
Пароли должны совпадать
Регистрация
Не отмечено согласие с условиями
Чекбокс подсвечивается красным, без текста
Обучающий онбординг
Раньше на платформе не было никакого обучения: систему оценки каждый осваивал сам. В интервью почти все новички назвали её высокопороговой: непонятна девяностобалльная логика, часть критериев остаётся расплывчатой, а пояснения спрятаны слишком глубоко. Просьбы о подсказках и онбординге повторялись. Опытные пользователи тоже разобрались не сразу — с помощью подсказок, стримов и привычки (интервью).
Поэтому обучение встроено в момент, когда человек уже решил поставить оценку, а не показывается при входе на сайт:
Когда появляется. Только у нового пользователя, который впервые открыл страницу релиза, — при первом нажатии «+» (добавить оценку) в карточке оценки.
Как открыть снова. Кнопкой «Как выставить оценку?» над блоком оценивания.
Где показывается. Зона экрана зафиксирована, и все подсказки появляются внутри неё, поэтому экран не прыгает между шагами.
Когда перестаёт появляться. После «Понятно» на последнем шаге или после закрытия крестиком онбординг сам больше не открывается — только по кнопке.
1 / 5 · Критерии
Подсказки и валидация оценки
Опытные пользователи в интервью рассказывали, что осваивали систему постепенно и до сих пор иногда заглядывают в подсказки. Поэтому я выстроил трёхуровневую систему, которая обучает прямо в процессе оценивания:
Уровень 1
Короткая подсказка
Всегда видна под названием критерия: одна строка о том, что он оценивает.
Уровень 2
Тултип
Подробное пояснение к критерию. Открывается и закрывается по клику на ⓘ.
Уровень 3
Модальное окно
Полное описание системы: критерии, множитель «Атмосферы» и формула расчёта.
Блок оценки
Раньше у критериев были только названия вроде «Рифмы / Образы» или «Реализация стиля», а итог появлялся одной цифрой без расшифровки. Теперь под каждым критерием есть короткая подсказка, а под итогом — формула: из чего сложились баллы и как на них повлияла «Атмосфера».
Было
Названия критериев без пояснений, итог — одна цифра
Стало
Подсказка под каждым критерием, формула под итогом
Тултипы работают двумя способами. Пояснение к критерию открывается по клику и остаётся на экране, пока его не закроют: его читают, сверяясь с ползунком. Остальные подсказки короткие и появляются при наведении: «?» рядом с заголовком ведёт к полному описанию системы, а цифры в формуле подписаны названиями критериев.
Тултипы к пяти критериям и подсказки при наведении
Описание системы оценивания
Раньше короткая модалка показывала формулу и критерии в аккордеоне, а полное описание лежало на отдельной странице «Часто задаваемые вопросы». Теперь всё собрано в одном окне: что оценивает каждый критерий, таблица множителя «Атмосферы» от 1,0000 до 1,6072 и расчёт итога по шагам.
Было
Короткая модалка, полное описание — на странице FAQ
Стало
Всё описание в одном окне, прокрутите внутри
Валидация
Рецензия необязательна: оценку можно опубликовать и без неё. Поэтому валидация не мешает, пока человек пишет, и включается в нужный момент:
Когда появляется. Ошибки о пустом поле и минимальной длине — только после нажатия «Опубликовать оценку». Заголовок и текст рецензии проверяются, если хотя бы в одном из этих полей есть символ. Пробелы по краям не считаются, поэтому заголовок из одних пробелов — пустой. Превышение лимита подсвечивается сразу, пока человек печатает.
Где показывается. Под своим полем: текст ошибки встаёт на место подсказки, поле подсвечивается красным.
Когда снимается. После ошибки поле проверяется на каждый введённый символ. Как только условие выполнено, ошибка исчезает, а поле возвращается в обычное состояние.
Счётчики. У заголовка — до 120 символов, у рецензии — до 8 500. Когда рецензия набирает минимум, счётчик становится зелёным.
Если публикация не прошла. При сбое сети оценка и рецензия сохраняются, и после повтора их не нужно вводить заново.
Матрица ошибок — 9 ситуаций в блоке оценки и текст, который видит пользователь
Поле
Ситуация
Ошибка
Любой из пяти критериев
Критерий не выставлен (0/10)
Необходимо выставить данный критерий
Заголовок рецензии
Рецензия начата, заголовка нет
Обязательно нужно придумать заголовок
Заголовок рецензии
Заголовок из одних пробелов
Обязательно нужно придумать заголовок
Заголовок рецензии
Заголовок короче 5 символов
Заголовок не может быть меньше 5 символов
Заголовок рецензии
Заголовок длиннее 120 символов
Заголовок не может быть больше 120 символов
Текст рецензии
Заголовок есть, текста нет
Напиши текст рецензии
Текст рецензии
Текст короче 300 символов
Текст рецензии не может быть меньше 300 символов
Текст рецензии
Текст длиннее 8 500 символов
Текст рецензии не может быть больше 8 500 символов
Вся форма
Нет сети или ошибка сервера при публикации
Не удалось опубликовать. Проверь интернет и попробуй ещё раз
Состояния формы
Кроме ошибок, у формы есть ещё шесть состояний. Гостю она объясняет, что оценивать могут только участники сообщества, и предлагает войти. Перед публикацией просит сверить рецензию с правилами: после отправки её уже не изменить. Рецензия сначала уходит на модерацию, о результате придёт уведомление. После проверки вместо полей появляется сама рецензия, а изменить можно только оценку.
1 / 7 · Без входа
UI-кит
UI-кит
Все экраны выше собраны на новом UI-ките. Его я собрал с нуля: типографика, палитра, отступы, состояния и базовые компоненты, а на них — повторяющиеся сущности платформы: релизы, рецензии, активность авторов, рейтинги, плейлисты. Проблемы старого интерфейса, которые кит закрывает, разобраны в UI-аудите.
Шрифт — Onest. Все отступы кратны 4. Тёмную тему оставил, она была у платформы изначально. Палитра держится на двух шкалах: серой и фирменной красной.
🤓Цвет ошибки. Осторожно, информация для гиков
В аудите один и тот же красный обозначал и активность авторов, и ошибку интерфейса. Фирменный цвет РЗТ — красный, поэтому ошибке нужен был оттенок, который с ним не спутать. Я подбирал его по разнице цветов Delta E от ступени Primary-700: чтобы отличие было явным, она должна стремиться к 40. Но чем выше разница, тем сильнее цвет уходит в розовый и белый и перестаёт читаться как ошибка. Поэтому я остановился на ступени 400: около 30 единиц от Primary-700 — ошибка заметно светлее бренда, но всё ещё красная. Разницу считал в Huetone. Рядом появились зелёная и оранжевая шкалы для успеха и предупреждения.
Шкалы для статусов и таблица Delta E из Huetone: у Primary-700 разница 0, у выбранной ступени 400 — 28,6
Фрагменты кита
Кит большой, поэтому здесь — отдельные фрагменты. Любой открывается в полном размере по клику.
Шкалы, фоны, цвета текста, ссылок, обводок и состояний
Onest: тонкие и плотные заголовки, подзаголовки, размеры текста
Меню в узком и широком виде, состояния пунктов, шапка
Поля ввода с ошибками, окна входа и регистрации
Бейджи, награды, иконки, подписи авторов и оценки
Карточки главной и страницы релиза
Рецензия: карточка и развёрнутое окно
Рецензия медиа: окно с переходом к видео
Комментарий автора релиза
Весь кит одной картинкой:
Юзабилити-тест
Что показал тест прототипа
После первой итерации я провёл модерируемый юзабилити-тест на кликабельном прототипе с новичками. Формат простой: одна гипотеза — одно задание, затем наблюдение и вывод. Задания покрывают путь новичка целиком:
понять, что это за сервис→найти релиз→оценить его→написать рецензию→разобраться в разделах сообщества
Всё, что подтвердилось с уточнением или не подтвердилось, я поправил во второй итерации.
Гипотеза
Статус
H1. Новичок понимает назначение РЗТ
Подтвердилась
H2. Пользователь сам находит релиз
Подтвердилась
H3. Страница релиза считывается без объяснений
Подтвердилась
H4. Пользователь сам находит, где поставить оценку
Подтвердилась с уточнением
H5. Онбординг объясняет систему оценки и не мешает
Подтвердилась с уточнением
H6. Вход не ломает сценарий оценки
Подтвердилась с уточнением
H7. Понятны критерии и логика итоговой оценки
Подтвердилась с уточнением
H8. Понятно, что рецензия необязательна
Подтвердилась
H9. Пользователь сам находит, как написать рецензию
Подтвердилась
H10. Понятно, что будет с оценкой и рецензией после публикации
Не подтвердилась
H11. Оценку в рецензии можно прочитать без расшифровки
Подтвердилась с уточнением
H12. Пользователь находит активность авторов
Подтвердилась с уточнением
H13. Пользователь находит активных участников сообщества
Подтвердилась
H14. Пользователь находит «Новые имена»
Подтвердилась
Навигация, которую я проверял tree test’ом, на живом прототипе тоже сработала: раздел сообщества и «Новые имена» нашлись через меню без подсказок.
Вторая итерация
Поправил и протестировал
Каждая правка закрывает гипотезу, которая подтвердилась с уточнением или не подтвердилась. Все правки я проверил повторным тестом на тех же заданиях. UI-кит не менялся: все правки собраны на тех же компонентах.
H4. Пользователь сам находит, где поставить оценку
Подтвердилась с уточнением→Подтвердилась
Проблема
Плюс в блоке оценки замечали, но не нажимали на него для перехода к оценке, хотя именно с него начинается обучающий онбординг. Они просто скролили до блока оценки.
Решение
При первом заходе плюс в блоке «моя оценка» мягко мерцает. Его замечают, нажимают и переходят в онбординг.
Результат
Участники сами нажимают на плюс и попадают в онбординг, а не скролят мимо него.
Итерация 1
Итерация 2
H5. Онбординг объясняет систему оценки и не мешает
Подтвердилась с уточнением→Подтвердилась
Проблема
Пользователям не хватало интерактивного обучения, чтобы одновременно с подсказками «испытывать» интерфейс. Из-за этого они закрывали онбординг после 1–2 подсказок.
Решение
Все подсказки стоят в одном месте. Нужные элементы подсвечены и работают: ползунки двигаются, тултипы открываются. Подсказка не исчезнет, пока её не закроют.
Результат
Онбординг проходят до конца: по ходу подсказок двигают ползунки и открывают тултипы.
Итерация 1
Итерация 2
H6. Вход не ломает сценарий оценки
Подтвердилась с уточнением→Подтвердилась
Проблема
Сам вход проходил быстро и не выбивал из сценария. Но перед ним участники сомневались, не слетят ли уже выставленные баллы.
Решение
Появился экран для тех, кто ещё не вошёл, но уже выставил хотя бы один критерий: оценка сохранена как черновик, а кнопка «Войти» стала «Войти и продолжить».
Результат
Входят без сомнений: видят, что баллы сохранены, и продолжают с того же места.
Итерация 1
Итерация 2
H7. Понятны критерии и логика итоговой оценки
Подтвердилась с уточнением→Подтвердилась
Проблема
Каждый критерий и формулу участники понимали. Не понимали сути системы: откуда в формуле берутся коэффициенты и почему именно 90 баллов.
Решение
В начале окна появился абзац о сути системы: почему максимум 90 баллов, откуда коэффициенты и какую долю даёт субъективный множитель.
Результат
Участники своими словами объясняют, почему максимум 90 баллов и откуда берутся коэффициенты.
Итерация 1
Итерация 2
H10. Понятно, что будет с оценкой и рецензией после публикации
Не подтвердилась→Подтвердилась
Проблема
Участники понимали, что оценка опубликована, а рецензия ушла на модерацию. Но не понимали, где рецензия появится после проверки. И правда: в общем списке рецензий она не появлялась, только на месте блока оценки.
Решение
Плашка прямо говорит, где появится рецензия после проверки: в этом окне и в общем списке. Теперь она действительно появляется в обоих местах.
Результат
Участники сразу говорят, где искать рецензию после проверки, и находят её в общем списке.
Итерация 1
Итерация 2
H11. Оценку в рецензии можно прочитать без расшифровки
Подтвердилась с уточнением→Подтвердилась
Проблема
Мелкие сокращения только запутывали, а не помогали считывать оценку. А наводить на каждую цифру для просмотра тултипа оказалось энергозатратно.
Решение
Сокращений больше нет. Чтобы увидеть расшифровку, достаточно один раз навести на оценку: открывается окно со всеми критериями и баллами.
Результат
Оценку в рецензии считывают за одно наведение, не перебирая цифры.
Итерация 1
Итерация 2
H12. Пользователь находит активность авторов
Подтвердилась с уточнением→Подтвердилась
Проблема
Активность авторов участники нашли через меню. Колокольчик в шапке видели, но не связывали его с активностью авторов. А в самом окне думали, что там только действия участников.
Решение
Вместо колокольчика — кнопка «Активность» с иконкой, как у активности авторов. Окно называется «Активность авторов и участников». Теперь в него заходят, когда речь об активности авторов.
Результат
За активностью авторов участники идут в окно «Активность» из шапки.
Итерация 1
Итерация 2
Метрики успеха
Как измерять успех редизайна
Редизайн — инициативный концепт, поэтому доступа к продуктовой аналитике и данных «до» у меня не было. Два юзабилити-теста показали, что решения работают на прототипе, но это нельзя назвать статистикой. Поэтому ниже я описываю план: какие метрики можно было бы измерить и как их посчитать.
Воронка оценки
Главный сценарий — путь нового пользователя от страницы релиза до опубликованной оценки. На каждый шаг повлияло своё решение из редизайна, а метрики считаются на участках воронки, поэтому по ней видно, где искать отвалившихся и какое решение за это отвечает.
01Открыл страницу релизаВход в воронку: с главной, из поиска или по ссылке
02Перешёл к оценкеМерцающий плюс «моя оценка» (H4)
03ВошёлЧерновик оценки и «Войти и продолжить» (H6)
05Заполнил формуПодсказки у критериев и абзац о сути системы (H7)
06Опубликовал оценкуВалидация и понятная плашка модерации (H10)
Конверсия в первую оценкушаги 1–6
Завершённые оценки, время оценкишаги 4–6
Онбордингшаг 4
Ошибки публикациишаги 5–6
Схема без данных: высота столбцов условная, штриховка — пользователи, которые ушли на этом шаге. Под шагом — решение, которое на него повлияло. Удержание и обращения в поддержку считаются вне воронки.
Метрики и как их посчитать
Метрика
Что показывает
Как посчитать
Ожидание
Конверсия в первую оценку
Доля новых пользователей, совершивших первое ценностное действие
Опубликовали первую оценку / новые посетители страницы релиза. Шаги 1–6 воронки
↑
Прохождение онбординга
Доходят ли новички до конца обучения, а не закрывают его после первых подсказок
Дошли до последней подсказки / все, кому показали онбординг. Шаг 4. Отдельно — на какой подсказке закрывают
↑
Завершённые оценки
Доля начавших оценку, которые её опубликовали
Опубликованные оценки / начатые оценки. Шаги 4–6. Для незавершённых — на каком шаге ушли: онбординг, критерии, рецензия
↑
Время выставления оценки
Сколько времени занимает оценка релиза
Сколько времени прошло от первого выставленного критерия до публикации. Для новичков — без учёта онбординга: обучение увеличивает время
↓
Ошибки публикации
Сколько пользователей сталкиваются с ошибками и непонятной валидацией
Нажатия «Опубликовать оценку», остановленные валидацией / все нажатия. Шаги 5–6. Отдельно — какие ошибки появляются чаще
↓
Удержание
Возвращаются ли пользователи и совершают ли ценностные действия в течение недели и месяца
Доля пользователей с первой оценкой, которые снова совершили ценностное действие через 7 и 30 дней
↑
Обращения в поддержку
Защитная метрика: рост числа оценок ещё не успех, если растут жалобы опытных пользователей и технические ошибки
Обращения на 1000 активных пользователей в неделю. Отдельно считать жалобы опытных пользователей и обращения из-за технических ошибок
контроль
Итоги
Что получилось
01
Каждое решение можно проследить до исследования
Аудит → гипотезы → 10 интервью → 3 раунда проверки архитектуры. За каждым ключевым экраном стоит конкретный вывод из этой цепочки.
02
Гипотезы проверены до дизайна
Все 14 гипотез из таблицы ICE я проверил на интервью с новичками и опытными пользователями. Восемь из них сильнее всего повлияли на решения, а слабо подтвердившиеся — рекомендации и подборки — в первую итерацию не вошли.
03
Навигация стала понятнее
Средний успех по 11 одинаковым заданиям tree test вырос с 39,0% до 60,1%. Самые проблемные сценарии сдвинулись с нулевых значений.
04
Ключевой сценарий проверен на пользователях
Оценку релиза можно пройти от начала до конца, не покидая страницу. Это я проверил юзабилити-тестом на кликабельном прототипе: всё, что не подтвердилось или подтвердилось с уточнением, поправил во второй итерации и проверил повторным тестом. Например, вход теперь сохраняет выставленные баллы как черновик, а обучение встроено прямо в оценку.
05
Идентичность продукта сохранена
Я сознательно не избавился от терминологии РЗТ, а сделал её понятнее через структуру, пояснения и контекстные входы. Это важно для опытной аудитории.
06
Единая визуальная система
Вместо разнобоя, который нашёлся на аудите, все экраны собраны на одном UI-ките. Цвет ошибки я подобрал по разнице Delta E, чтобы его нельзя было спутать с фирменным красным.
Что дальше
Добить слабо подтвердившиеся гипотезы — рекомендации на основе контента и подборки от авторов. Потребность в открытии музыки есть, поэтому стоит проверить конкретные форматы: подборки доверенных людей, итоги премий, новые имена.
Провести количественный тест на большей выборке, новичках и опытных, и замерить время и долю завершённых оценок. Два качественных теста этих цифр не дают.
Если редизайн внедрят
Редизайн — концепт, проверенный на прототипе. Если бы я работал над РЗТ дальше и влиял на продукт, развивал бы его так:
Дизайн-система. Вырастить UI-кит в полноценную дизайн-систему: токены цвета, типографики и отступов, библиотека компонентов со всеми состояниями, правила использования и документация для разработки. Тогда новые экраны будут собираться быстрее и не будут разъезжаться по стилю, как это было до редизайна.
Реальные метрики. Вместе с разработкой настроить продуктовую аналитику и события на каждом шаге воронки оценки, снять базовые значения и следить за метриками из раздела «Метрики успеха» уже на живых данных. Новые функции запускать через A/B-тест.
Остальные сценарии. В кейсе — навигация, главная, страница релиза и оценка. Дальше пройти тем же циклом «аудит → гипотезы → интервью → проверка» профили пользователей и авторов, рейтинги, премии и сообщество.
Постоянная обратная связь. Регулярно проводить юзабилити-тесты новых решений, собирать отзывы опытных пользователей и следить за обращениями в поддержку, чтобы изменения для новичков не отталкивали сообщество.
Спасибо, что дочитали
Буду рад обсудить кейс и ответить на вопросы — пишите.