Обзор
Product Design UX-исследования Информационная архитектура UI-система

Риса за Творчество · редизайн музыкальной платформы

Сделал «Кинопоиск для музыки» доступным для всех

Многие любители музыки в СНГ хотели бы платформу по типу Кинопоиска — чтобы оценивать релизы, писать рецензии и следить за экспертными рейтингами. Я рассказывал знакомым о «Риса за Творчество» (РЗТ), но заметил, что сами они в ней не могут разобраться: путаются в разделах и механиках, не понимают систему оценки и не знают, с чего начать. Поэтому я провёл UX/UI-аудит и исследования, пересобрал информационную архитектуру и переработал ключевой сценарий — оценку релиза. Продукт стал понятнее новичкам и сохранил глубину для опытной аудитории.

Роль
Продуктовый дизайнер
Формат
Инициативный редизайн-концепт
Что сделал
Аудит, интервью, информационная архитектура, UI-кит, переработка user flow оценки, редизайн экранов
Инструменты
Figma, Pathway, AI-инструменты
39,0%→60,1%
Средний успех навигационных заданий до и после редизайна архитектуры
10
глубинных интервью: 5 новичков и 5 пользователей из Топ-90
Страница релиза РЗТ · прокрутите внутри
Редизайн страницы релиза РЗТ

Проблема, задача, ограничения

Людям интересна идея, но продукт не объясняет себя сам

Проблема

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

Задача

Пересобрать опыт РЗТ так, чтобы новичок быстро понял ценность платформы, и при этом сохранить уникальность и глубину продукта для уже вовлечённой аудитории.

Ограничения и как я с ними работал

01

Простота для новичков без потери глубины для опытной аудитории

Рейтинги, глубина механик и взаимодействие комьюнити являются важной особенностью РЗТ. Нужно было снизить порог входа для нового пользователя, сохранив глубину продукта для тех, кто уже хорошо знаком с системой.

02

Большой масштаб продукта

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

03

Нет доступа к полноценной продуктовой аналитике

У меня не было данных о конверсии, удержании, времени выполнения сценария, количестве незавершённых сценариев и других продуктовых метриках. Поэтому проблемы и приоритеты определялись преимущественно на основе UX-аудита и пользовательских исследований.

04

Не учитывались технические ограничения разработки

Ограничения текущей кодовой базы, сроки и стоимость реализации отдельных решений не являлись решающим фактором. Я опирался на улучшение пользовательского опыта и сценариев.

Рабочий процесс

От аудита к проверенным решениям

Каждое решение опирается на данные предыдущего шага: аудит дал гипотезы, интервью и тесты их подтвердили или отсеяли, а дизайн проверялся повторным тестированием.

  1. 01

    UX/UI-аудит и конкурентный анализ

    Бенчмаркинг 6 платформ, аудит интерфейса по эвристикам, восстановление архитектуры AS IS.

    Проблем нашлось много, поэтому нужно было выбрать главные.

  2. 02

    Гипотезы и приоритизация

    Каждую проблему перевёл в гипотезу по HADI-структуре и приоритизировал по адаптированной ICE.

    Гипотезы нужно было проверить на реальных пользователях.

  3. 03

    Глубинные интервью

    Поговорил с новичками и опытными пользователями РЗТ.

    Интервью подтвердили, что есть проблемы с меню и навигацией. Поэтому навигацию нужно было проверить отдельно.

  4. 04

    Проверка навигации

    Tree test AS IS, затем открытая карточная сортировка, затем tree test TO BE.

    После всех исследований появилась опора для изменений в интерфейсе.

  5. 05

    UI-кит и редизайн

    Визуальная система, меню, главная и контентные блоки.

    Главное действие в РЗТ — оценка релиза, а систему оценки новички не понимали. Поэтому следующим шагом стал сценарий оценки.

  6. 06

    Ключевой сценарий — оценка релиза

    User flow AS IS и TO BE, страница релиза, онбординг, подсказки, авторизация.

UX/UI-аудит

Где продукт теряет новичка

Конкурентный анализ

Прямого аналога РЗТ в СНГ нет, поэтому я изучил музыкальные и контентные платформы со схожими сценариями и сравнил в таблице бенчмаркинга: структуру сервисов, работу с основной единицей контента, оценки и рецензии, поиск нового контента, рейтинги и социальные механики.

RYM, Letterboxd, IMDb, Metacritic, Кинопоиск, Rotten Tomatoes
Таблица бенчмаркинга
Таблица бенчмаркинга: 6 платформ × ключевые сценарии

Ключевые инсайты

01

Контент в центре

У всех конкурентов контент — центральная точка взаимодействия. В РЗТ порядок обратный: на первый план выходят внутренние механики.

02

Сложная информация имеет простой первый слой

Уникальную систему оценки должен легко считывать даже неопытный пользователь, например за счёт визуальной адаптации.

03

Быстрый просмотр и глубокое изучение — разные сценарии

Конкуренты позволяют понять ценность контента без глубокого погружения.

04

Источник мнения должен быть понятен

Пользовательское и профессиональное мнение разделяют разными типами оценок, бейджами и местом на странице.

05

Поиск — не только каталог

Рекомендации, подборки и расширенные фильтры — такие же важные способы найти контент.

Здесь могла быть ваша реклама

UI-аудит по эвристикам

Проанализировал основные экраны и зафиксировал проблемы прямо на скриншотах. Что проверял:

  • Визуальная иерархия
  • Консистентность компонентов и состояний
  • Сетка и группировка
  • Типографика и контраст
  • Понятность иконок и цветов
  • Обратная связь интерфейса
  • Отображение оценок
UI-аудит экранов РЗТ: карточки проблем и разметка основных страниц
Разметка проблем на экранах текущего сайта

Ключевые инсайты

01

Нет единой визуальной логики

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

02

Визуальный перегруз

Слабая иерархия, плотная вёрстка и много равнозначных блоков. Платформа состоит из карточек с хаотичным и неконсистентным содержимым.

03

Цвет и иконки не объясняют назначение

Один и тот же красный обозначает и активность авторов, и ошибку интерфейса.

04

Не хватает пояснений

Много механик и геймификации, но почти нет подсказок, в том числе для расшифровки оценок.

Архитектура AS IS

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

Информационная архитектура AS IS
Информационная архитектура AS IS

Ключевые инсайты

01

Слишком много разделов верхнего уровня

В меню их больше, чем удобно держать в голове (закон Миллера, 7±2). Новичку трудно понять, с чего начать.

02

Рейтинги конкурируют между собой

Рейтинги контента и пользователей, премии и достижения стоят рядом и спорят за внимание. Непонятно, что из этого главное.

03

Связанные сценарии разбросаны

Рейтинг всех релизов и рейтинг новичков лежат на разных страницах и никак не связаны.

Гипотезы и приоритизация

От проблем к проверяемым гипотезам

HADI-структура

Для каждой гипотезы по итогам аудита я описывал цепочку по адаптированному HADI-циклу:

проблемагипотезарешениеспособ проверкиметрика

Таблица гипотез по HADI
Гипотезы по HADI-структуре

Приоритизация по ICE

Приоритизировал гипотезы по адаптированной модели ICE: разделил сложность реализации на дизайн и разработку, чтобы не недооценивать проектирование и проверку.

ICE = Impact × Confidence / (Design Effort + Dev Effort)

Impact — влияние изменения на пользовательский опыт

Confidence — уверенность на основе аудита, бенчмаркинга и исследований

Design Effort — сложность проектирования и проверки решения

Dev Effort — ожидаемая сложность технической реализации

Цвет строки — приоритет:низкийвышевысокийсамый высокий
Таблица гипотез с приоритизацией
Приоритизация гипотез по ICE

Интервью

10 интервью с двумя сегментами

Чтобы проверить гипотезы, я разделил респондентов на две группы по 5 человек. Нужно было упростить вход для новичков, не отняв ценность у тех, кто уже пользуется платформой.

5 человек · новички

Интересуются музыкой, но не знакомы с РЗТ

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

5 человек · опытные

Пользователи из рейтинга Топ-90 РЗТ

Гайд строился вокруг реальных повторяющихся сценариев. Важно было отделить то, что человек действительно считает удобным, от того, к чему он просто привык.

Проведение интервью
Интервью с респондентами
Гайд и ответы респондентов: интервью с новичками

Главное из интервью

01

Систему оценки считают высокопороговой

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

02

Активность авторов делит аудиторию

Новички не понимали, что это за контент и зачем он. Опытные пользователи называли лайки и комментарии авторов одной из главных ценностей РЗТ.

03

Подсказки нужны даже опытным

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

Тестирование архитектуры

Три раунда проверки навигации

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

  1. Tree test AS IS14 респондентов, 11 заданий: где ломается текущая навигация
  2. Открытая карточная сортировка19 ответов: как пользователи сами группируют разделы
  3. Tree test TO BE18 респондентов: стало ли понятнее в новой структуре

Tree test AS IS: точка отсчёта

14
респондентов, 11 заданий
39,0%
средний успех: 60 из 154 ответов
0/14
нашли, где заказать разбор релиза: сценарий был спрятан в «Магазине»
7/14
назвали «Ценность альбомов» и «Сетки премий» непонятными
Проблемная зонаЧто происходило
МагазинНикто не связывал его с отправкой релиза на разбор. Искали в «Релизах», «Рецензиях», FAQ и «Авторах».
Топ-90Без уточнения воспринимался как рейтинг чего угодно: треков, альбомов, артистов, пользователей.
Ценность альбомовПутали с рейтингом альбомов, шкалой, методикой, калькулятором и справкой. 1 из 14 нашёл нужное.
Авторы / Авторские комментарииНе понимали, где искать артиста и участника индустрии. Путали с рецензиями и лайками.
Достижения, Сетки премийКонкурировали с премией, наградами и пользовательскими рейтингами.

Лучше всего работала простая рейтинговая модель: страницы людей из индустрии (71%) и рейтинг треков (64%).

Открытая карточная сортировка

Выбрал открытый формат, чтобы не навязывать пользователям существующую структуру. Собрал 20 ответов, 19 подошли для анализа.

ГруппаСовпадениеВывод
Все 4 карточки премии вместе16 / 19«Премия» — отдельный крупный раздел
«Лучшие треки» и «Лучшие альбомы» вместе16 / 19Треки и альбомы — рядом, в «Рейтинге»
Рецензии слушателей и медиа вместе15 / 19Рецензии — единый раздел с фильтрами
«Топ пользователей» и «Значки достижений» вместе13 / 19Пользовательские механики — в «Сообщество»
Релизы, артисты, новые имена, плейлистычастоНужен крупный раздел «Музыка»
Справка, FAQ, новости, обратная связьчастоНужен раздел «О проекте»

Ключевой инсайт

Нужны крупные логические разделы

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

Tree test TO BE: проверка новой структуры

По итогам двух тестов собрал архитектуру TO BE и проверил её на 18 респондентах: 16 из них не были знакомы с РЗТ или только слышали название.

18
респондентов, 14 заданий (11 — как в AS IS)
60,1%
средний успех по тем же 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 пользователей
  • Достижения пользователей
Рейтинг
  • Рейтинг релизов
  • Ценность альбомов
Премия
  • Результаты премии
  • Премия РЗТ
О проекте
  • О нас
  • Новости
  • Часто задаваемые вопросы
  • Заказать разбор релиза
  • Статистика сайта
  • Обратная связь
Архитектура TO BE

БылоМного плоских верхнеуровневых пунктов

СталоГлавная и 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 гипотез.

Итоговая таблица выводов по 14 гипотезам: что показали новички и опытные, итоговый статус и задача на редизайн
Подтвердились

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

Подтвердились с уточнением

Остальные гипотезы. Главное уточнение: нужен баланс между упрощением для новичков и ценностью для опытных.

Слабо подтвердились

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

Главная

Сначала музыка, потом механики

Главная — первая точка контакта новичка. На старой главной новички не понимали суть платформы: перед релизами шли сторис и два блока активности авторов, и было неясно, что здесь главное. Я пересобрал страницу, сделав акцент на релизы. Основание — гипотеза «структура вокруг творческого контента», она подтвердилась ↑

Главная РЗТ · прокрутите внутри
Новая главная РЗТ

Порядок блоков

Было · 12 блоков

  1. Баннерпоявляется периодически, на скрине его нет
  2. Топ-15 за сутки в формате сторис→ hero-блок
  3. Понравилось авторам→ список в хедере
  4. Авторские комментарии
  5. Добавленные релизы
  6. Новые имена→ фильтр в «Релизах»
  7. Рецензии медиа на релизы
  8. Новые рецензии на релизы
  9. Топ-90 по баллам сообщества
  10. Статистика→ «О проекте»
  11. Ценность альбомов
  12. Плейлисты

Стало · 9 блоков

  1. Баннерпоявляется периодически: например, анонс фестиваля
  2. Топ-15 релизов за суткиhero вместо сторис
  3. Релизыфильтры «Новые имена» и «Активность авторов»
  4. Комментарии авторов релизов
  5. Рецензии
  6. Рецензии медиа
  7. Топ-90 пользователейраньше «Топ-90 по баллам сообщества»
  8. Ценность альбомов
  9. Плейлисты

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

Главная целиком

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

Было
Главная — было
Стало
Главная — стало

Hero-блок вместо сторис

Сторис стояли первыми на сайте. Блок притягивал внимание, но не объяснял, что показывает: новички не считывали в нём тренды сообщества. Интервью ↑

Проблемы
  • Новички не замечали заголовок и принимали блок за сторис пользователей
  • Клик открывает релиз в карусели, перекрывающей весь контент
  • Красная обводка похожа на паттерн «просмотрено / не просмотрено» и не передаёт активность авторов
Решение
  • Hero-блок с акцентным заголовком «Топ-15 релизов за сутки»
  • Карусель, в которой сразу видна вся информация о выбранном релизе
  • Оценки скрыты по умолчанию. Из интервью выяснилось, что некоторые опытные пользователи не хотят видеть спойлеры оценок в трендах
Было
Сторис — былоКарусель сторис — было
Стало
Hero-блок «Топ-15 релизов за сутки» — стало

Активность авторов

По итогам интервью это один из самых спорных блоков. Новички не понимали, что это за контент и зачем он. А опытные пользователи называли лайки и комментарии авторов одной из главных ценностей РЗТ.

Проблемы
  • Новички не понимают, что это за раздел и какую информацию несут карточки
  • Сущности внутри карточки спорят между собой, нет чётких акцентов
Решение
  • Перенёс активность в ленту уведомлений в хедере — знакомый многим пользователям паттерн
  • Добавил активность отслеживаемых пользователей
  • Лайки и комментарии авторов по-прежнему видны на карточках релизов, а фильтр «Активность авторов» оставляет в ленте только такие релизы
  • Опытные сохраняют постоянную видимость событий, а новичков блок больше не сбивает
Было
Понравилось авторам — было
Стало
Хедер с лентой уведомленийОкно «Активность участников»

Карточки контента

У карточек релизов, рецензий, рецензий медиа и комментариев авторов были похожие проблемы: размер зависел от контента, элементы спорили между собой, иконки не объясняли действия. Я пересобрал их по одному принципу: сначала контент, потом автор и механики.

Проблемы
  • Размер карточки зависит от контента
  • Элементы размещены хаотично
  • Новички не понимают разницу между кругами оценок
Решение
  • Иконками развёл простую оценку и оценку с рецензией
  • Показал собственную оценку для сравнения и быстрого перехода к оцениванию
  • Управление вынес в ховер и добавил «Трейлер» для быстрого прослушивания — одну из ключевых функций по итогам конкурентного анализа и интервью
Было
Карточка релиза — было: с бейджами релизаКарточка релиза — было: с логотипом лейбла
Стало
Карточка релиза — сталоКарточка релиза в ховере — стало

User flow оценки

User flow: оценка релиза и рецензия

Оценка релиза — главное ценностное действие на платформе. Я разобрал текущий flow, чтобы понять, где пользователи могут отваливаться и как снизить порог входа для новичков.

Путь новичка до первой оценки

На схемах ниже два пути: новый и опытный пользователь. Они отличаются входом: новичку нужно зарегистрироваться и разобраться в системе оценки. Поэтому здесь путь новичка по этапам — где он выпадал из сценария и что я поменял.

Было
Стало
1Знакомство с релизом
уход

Данных о релизе мало — пользователь уходит слушать на сторонний сервис и может не вернуться

На странице релиза ↓ больше данных и текст релиза — уходить не нужно

2Вход и регистрация
тупик

Длинная регистрация с «причиной регистрации». После неё открывается главная, а не релиз — сценарий обрывается

Короткая регистрация ↓ в модальном окне, после неё пользователь возвращается на страницу релиза

3Система оценки
уход

Система оценки непонятна, а объяснение лежит на другой странице

Обучающий онбординг ↓ при первой оценке и подсказки ↓ у критериев

4Оценка и рецензия
сброс

Формат нужно выбрать заранее. Если передумал и решил писать рецензию, критерии сбрасываются

Оценка и рецензия в одном блоке на странице релиза ↓: сначала оценка, рецензию можно дописать в любой момент без потери критериев

5Отправка
задержка

Об ошибках в заголовке и тексте рецензии пользователь узнаёт только после «Отправить» и «Подтвердить»

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

Схемы целиком

Новый и опытный пользователь. Схема открывается крупно по клику.

User flow AS IS

Страница релиза

Страница с главным сценарием

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

Редизайн страницы

Проблемы страницы пришли из интервью с опытными пользователями и новичками.

Знакомство и прослушивание

  • Не хватает данных о релизе
  • Новички не могут быстро считать общую оценку
  • Больше метаданных. Плеер с текстом и трейлером релиза, меньше причин уходить на другие сервисы
  • Оценка всегда в подробном виде: видно, какой балл к какому виду оценивания относится

Оценка и рецензия

  • Система оценивания непонятна новичкам, а опытные осваивали её постепенно и до сих пор ищут подсказки

Чтение рецензий

  • Сложно понять, стоит ли читать конкретную рецензию
  • Рецензии свёрнуты по умолчанию
  • Сортировка: новые, популярные, сначала высокая или низкая оценка, сначала длинные или короткие. Фильтры: подписки и «понравились авторам релиза»
  • AI-саммари всех рецензий для быстрого знакомства с релизом
Было
Страница релиза — было
Стало
Страница релиза — стало

Вход и регистрация

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

Было
Вход — было: отдельная страница

Отдельная страница: чтобы войти, нужно уйти с релиза

Стало
Вход — стало: модальное окно

Модальное окно поверх страницы релиза

Ошибки

Раньше ошибки входа появлялись плашками под кнопками, далеко от полей, а под паролем при регистрации могло висеть сразу несколько строк. Теперь ошибка стоит под своим полем и проверяется при вводе: как только значение подходит, она снимается.

Было
Ошибки входа — было: плашки под кнопкамиОшибки регистрации автора — было
Стало
Ошибки входа — стало: под полямиОшибки регистрации — стало: под полями

Матрица ошибок — 12 ситуаций во входе и регистрации и текст, который видит пользователь

ФормаСитуацияОшибка
Вход, регистрацияЛогин пустой или не в формате почтыВведи логин в формате электронной почты
Вход, регистрацияНет сети или ошибка сервераНет связи. Проверь интернет и попробуй ещё раз
ВходПароль не введёнВведи пароль
ВходПочта и пароль не подходят друг к другуНе удалось войти. Проверь почту и пароль
ВходСлишком много неудачных попыток входаСлишком много попыток. Попробуй войти позже
РегистрацияОбязательное поле не заполненоЭто поле обязательное
РегистрацияПочта уже зарегистрированаАккаунт с этой почтой уже есть. Войди или восстанови пароль
РегистрацияНикнейм уже занятЭто имя уже занято
РегистрацияВ никнейме недопустимые символыИспользуй только буквы, цифры и допустимые символы
РегистрацияПароль не соответствует требованиямПароль не соответствует требованиям
РегистрацияПароли в двух полях не совпадаютПароли должны совпадать
РегистрацияНе отмечено согласие с условиямиЧекбокс подсвечивается красным, без текста

Обучающий онбординг

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

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

  • Когда появляется. Только у нового пользователя, который впервые открыл страницу релиза, — при первом нажатии «+» (добавить оценку) в карточке оценки.
  • Как открыть снова. Кнопкой «Как выставить оценку?» над блоком оценивания.
  • Где показывается. Зона экрана зафиксирована, и все подсказки появляются внутри неё, поэтому экран не прыгает между шагами.
  • Когда перестаёт появляться. После «Понятно» на последнем шаге или после закрытия крестиком онбординг сам больше не открывается — только по кнопке.
Шаг 1 из 5: «Оцени релиз по 5 критериям»
Шаг 2 из 5: «У каждого критерия свой смысл»
Шаг 3 из 5: «Атмосфера» влияет на итог иначе
Шаг 4 из 5: «Итог посчитается автоматически»
Шаг 5 из 5: «Хочешь узнать ещё подробнее?»

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 символов
Вся формаНет сети или ошибка сервера при публикацииНе удалось опубликовать. Проверь интернет и попробуй ещё раз

Состояния формы

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

Без входа: плашка «Оценивать работы могут только участники сообщества РЗТ» и кнопка «Войти»
Ошибки: не выставлен критерий, нет заголовка, рецензия короче 300 символов
Подтверждение отправки: чек-лист из пяти правил перед публикацией
Оценка опубликована: итог по критериям, поля рецензии и кнопки «Изменить оценку» и «Опубликовать рецензию»
Рецензия на модерации: итог по критериям, плашка «Рецензия отправлена на модерацию» и кнопка «Изменить оценку»
Оценка и рецензия опубликованы: итог по критериям, рецензия с кнопкой «Читать полностью» и кнопка «Изменить оценку»
Рецензия опубликована, оценку можно изменить: критерии и итог обнулены, под ними рецензия и кнопка «Опубликовать оценку»

1 / 7 · Без входа

UI-кит

UI-кит

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

Шрифт — Onest. Все отступы кратны 4. Тёмную тему оставил, она была у платформы изначально. Палитра держится на двух шкалах: серой и фирменной красной.

Цвет ошибки. Осторожно, информация для гиков

В аудите один и тот же красный обозначал и активность авторов, и ошибку интерфейса. Фирменный цвет РЗТ — красный, поэтому ошибке нужен был оттенок, который с ним не спутать. Я подбирал его по разнице цветов Delta E от ступени Primary-700: чтобы отличие было явным, она должна стремиться к 40. Но чем выше разница, тем сильнее цвет уходит в розовый и белый и перестаёт читаться как ошибка. Поэтому я остановился на ступени 400: около 30 единиц от Primary-700 — ошибка заметно светлее бренда, но всё ещё красная. Разницу считал в Huetone. Рядом появились зелёная и оранжевая шкалы для успеха и предупреждения.

Шкалы успеха, предупреждения и ошибки, под ними таблица Delta E каждой ступени от Primary-700
Шкалы для статусов и таблица Delta E из Huetone: у Primary-700 разница 0, у выбранной ступени 400 — 28,6

Фрагменты кита

Кит большой, поэтому здесь — отдельные фрагменты. Любой открывается в полном размере по клику.

Красная и серая шкалы, фоны, цвета текста, иконок, ссылок, обводок и состояний кнопок
Шкалы, фоны, цвета текста, ссылок, обводок и состояний

Весь кит одной картинкой:

Юзабилити-тест

Что показал тест прототипа

После первой итерации я провёл модерируемый юзабилити-тест на кликабельном прототипе с новичками. Формат простой: одна гипотеза — одно задание, затем наблюдение и вывод. Задания покрывают путь новичка целиком:

понять, что это за сервиснайти релизоценить егонаписать рецензиюразобраться в разделах сообщества

Всё, что подтвердилось с уточнением или не подтвердилось, я поправил во второй итерации.

ГипотезаСтатус
H1. Новичок понимает назначение РЗТПодтвердилась
H2. Пользователь сам находит релизПодтвердилась
H3. Страница релиза считывается без объясненийПодтвердилась
H4. Пользователь сам находит, где поставить оценкуПодтвердилась с уточнением
H5. Онбординг объясняет систему оценки и не мешаетПодтвердилась с уточнением
H6. Вход не ломает сценарий оценкиПодтвердилась с уточнением
H7. Понятны критерии и логика итоговой оценкиПодтвердилась с уточнением
H8. Понятно, что рецензия необязательнаПодтвердилась
H9. Пользователь сам находит, как написать рецензиюПодтвердилась
H10. Понятно, что будет с оценкой и рецензией после публикацииНе подтвердилась
H11. Оценку в рецензии можно прочитать без расшифровкиПодтвердилась с уточнением
H12. Пользователь находит активность авторовПодтвердилась с уточнением
H13. Пользователь находит активных участников сообществаПодтвердилась
H14. Пользователь находит «Новые имена»Подтвердилась

Навигация, которую я проверял tree test’ом, на живом прототипе тоже сработала: раздел сообщества и «Новые имена» нашлись через меню без подсказок.

Вторая итерация

Поправил и протестировал

Каждая правка закрывает гипотезу, которая подтвердилась с уточнением или не подтвердилась. Все правки я проверил повторным тестом на тех же заданиях. UI-кит не менялся: все правки собраны на тех же компонентах.

H4. Пользователь сам находит, где поставить оценку

Подтвердилась с уточнениемПодтвердилась
Проблема
Плюс в блоке оценки замечали, но не нажимали на него для перехода к оценке, хотя именно с него начинается обучающий онбординг. Они просто скролили до блока оценки.
Решение
При первом заходе плюс в блоке «моя оценка» мягко мерцает. Его замечают, нажимают и переходят в онбординг.
Результат
Участники сами нажимают на плюс и попадают в онбординг, а не скролят мимо него.
Итерация 1
Блок оценок на странице релиза, итерация 1: плюс «моя оценка» без акцента
Итерация 2
Блок оценок на странице релиза, итерация 2: плюс «моя оценка» подсвечен

Метрики успеха

Как измерять успех редизайна

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

Воронка оценки

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

  1. 01Открыл страницу релизаВход в воронку: с главной, из поиска или по ссылке
  2. 02Перешёл к оценкеМерцающий плюс «моя оценка» (H4)
  3. 03ВошёлЧерновик оценки и «Войти и продолжить» (H6)
  4. 04Начал выставлять оценкуИнтерактивный онбординг (H5)
  5. 05Заполнил формуПодсказки у критериев и абзац о сути системы (H7)
  6. 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-тест.
  • Остальные сценарии. В кейсе — навигация, главная, страница релиза и оценка. Дальше пройти тем же циклом «аудит → гипотезы → интервью → проверка» профили пользователей и авторов, рейтинги, премии и сообщество.
  • Постоянная обратная связь. Регулярно проводить юзабилити-тесты новых решений, собирать отзывы опытных пользователей и следить за обращениями в поддержку, чтобы изменения для новичков не отталкивали сообщество.

Спасибо, что дочитали

Буду рад обсудить кейс и ответить на вопросы — пишите.

↑ Наверх