ПодтвердиласьКонтент
Риса за Творчество · 2026 · Главная и UI-кит
Вывел контент на первый план
«Риса за Творчество» (РЗТ) — платформа по типу Кинопоиска для музыки: здесь оценивают релизы, пишут рецензии и следят за экспертными рейтингами. Заинтересованные знакомые, которым я её советовал, путались в разделах и механиках и не понимали, что на ней можно делать. Я решил провести UX/UI-аудит и выяснить, в чём может быть проблема.
10
глубинных интервью: 5 новичков и 5 пользователей из Топ-90
5
гипотез о главной проверено на интервью
Проблема, задача, ограничения
Людям интересна идея, но продукт не объясняет себя сам
Проблема
Главная — первая точка контакта новичка, но по ней сложно понять, что это за продукт и что здесь главное. Перед релизами стояли сторис трендов и два блока активности авторов. Карточки оформлены по-разному, а один и тот же красный обозначал и активность авторов, и ошибку интерфейса. Механики РЗТ выходили на первый план раньше самой музыки.
Задача
Пересобрать опыт РЗТ так, чтобы новичок быстро понял ценность платформы, и при этом сохранить уникальность и глубину продукта для уже вовлечённой аудитории.
Ограничения и как я с ними работал
01
Простота для новичков без потери глубины для опытной аудитории
Рейтинги, глубина механик и взаимодействие комьюнити являются важной особенностью РЗТ. Нужно было снизить порог входа для нового пользователя, сохранив глубину продукта для тех, кто уже хорошо знаком с системой.
02
Большой масштаб продукта
Объём продукта значительно превышает возможности и ограниченные сроки для работы одного дизайнера. Поэтому важно было сфокусироваться на ключевых пользовательских сценариях и приоритизировать гипотезы, а не стараться изменить всё сразу.
03
Нет доступа к полноценной продуктовой аналитике
У меня не было данных о конверсии, удержании, времени выполнения сценария, количестве незавершённых сценариев и других продуктовых метриках. Поэтому проблемы и приоритеты определялись преимущественно на основе UX-аудита и пользовательских исследований.
04
Не учитывались технические ограничения разработки
Ограничения текущей кодовой базы, сроки и стоимость реализации отдельных решений не являлись решающим фактором. Я опирался на улучшение пользовательского опыта и сценариев.
Рабочий процесс
От аудита к проверенным решениям
Каждое решение опирается на данные предыдущего шага: аудит дал гипотезы, интервью их подтвердили или отсеяли, а дизайн я проверил юзабилити-тестом.
-
01
UX/UI-аудит и конкурентный анализ
Бенчмаркинг 6 платформ и аудит интерфейса по эвристикам.
Проблем нашлось много, поэтому нужно было выбрать главные.
-
02
Гипотезы и приоритизация
Каждую проблему перевёл в гипотезу по HADI-структуре и приоритизировал по адаптированной ICE.
Гипотезы нужно было проверить на реальных пользователях.
-
03
Глубинные интервью
Поговорил с новичками и опытными пользователями РЗТ.
Новичкам нужен контент на первом экране, а опытным важно не потерять механики РЗТ.
-
04
UI-кит и редизайн главной
Визуальная система, главная и контентные блоки.
Решения нужно было проверить на пользователях.
-
05
Юзабилити-тест
Модерируемый тест кликабельного прототипа с новичками.
Активность авторов участники искали не там, где я её разместил.
-
06
Вторая итерация
Поправил то, что подтвердилось с уточнением.
UX/UI-аудит
Где продукт теряет новичка
Конкурентный анализ
Прямого аналога РЗТ в СНГ нет, поэтому я изучил музыкальные и контентные платформы со схожими сценариями и сравнил в таблице бенчмаркинга: структуру сервисов, работу с основной единицей контента, оценки и рецензии, поиск нового контента, рейтинги и социальные механики.
Ключевые инсайты
01
Контент в центре
У всех конкурентов контент — центральная точка взаимодействия. В РЗТ порядок обратный: на первый план выходят внутренние механики.
02
Быстрый просмотр и глубокое изучение — разные сценарии
Конкуренты позволяют понять ценность контента без глубокого погружения.
03
Источник мнения должен быть понятен
Пользовательское и профессиональное мнение разделяют разными типами оценок, бейджами и местом на странице.
04
Поиск — не только каталог
Рекомендации, подборки и расширенные фильтры — такие же важные способы найти контент.
Здесь могла быть ваша реклама
UI-аудит по эвристикам
Проанализировал основные экраны и зафиксировал проблемы прямо на скриншотах. Что проверял:
- Визуальная иерархия
- Консистентность компонентов и состояний
- Сетка и группировка
- Типографика и контраст
- Понятность иконок и цветов
- Обратная связь интерфейса
- Отображение оценок
Ключевые инсайты
01
Нет единой визуальной логики
Одинаковые по функции элементы оформлены по-разному, а похожие внешне выполняют разные действия: кнопки и плашки с текстом выглядят одинаково.
02
Визуальный перегруз
Слабая иерархия, плотная вёрстка и много равнозначных блоков. Платформа состоит из карточек с хаотичным и неконсистентным содержимым.
03
Цвет и иконки не объясняют назначение
Один и тот же красный обозначает и активность авторов, и ошибку интерфейса.
04
Не хватает пояснений
Много механик и геймификации, но почти нет подсказок, в том числе для расшифровки оценок.
Гипотезы и приоритизация
От проблем к проверяемым гипотезам
HADI-структура
Каждую проблему из аудита я описал цепочкой по адаптированному HADI-циклу:
проблемагипотезарешениеспособ проверкиметрика
К главной относились пять гипотез: строить первый экран вокруг контента, сделать блок трендов информативнее, добавить рекомендации, вовлекать в сообщество через контент и дать авторам создавать подборки.
Приоритизация по ICE
Приоритизировал гипотезы по адаптированной модели ICE: разделил сложность реализации на дизайн и разработку, чтобы не недооценивать проектирование и проверку.
ICE = Impact × Confidence / (Design Effort + Dev Effort)
Impact — влияние изменения на пользовательский опыт
Confidence — уверенность на основе аудита, бенчмаркинга и исследований
Design Effort — сложность проектирования и проверки решения
Dev Effort — ожидаемая сложность технической реализации
Цвет строки — приоритет:низкийвышевысокийсамый высокий
Интервью
10 интервью с двумя сегментами
Чтобы проверить гипотезы, я разделил респондентов на две группы по 5 человек. Нужно было упростить вход для новичков, не отняв ценность у тех, кто уже пользуется платформой.
5 человек · новички
Интересуются музыкой, но не знакомы с РЗТ
Исследовал первый контакт: понятно ли назначение платформы, видна ли её ценность, получается ли сориентироваться в навигации, прочитать оценку и разобраться в механиках без предварительного знания. Встроил тест первого впечатления и короткий навигационный тест.
5 человек · опытные
Пользователи из рейтинга Топ-90 РЗТ
Гайд строился вокруг реальных повторяющихся сценариев. Важно было отделить то, что человек действительно считает удобным, от того, к чему он просто привык.
Ниже — блоки гайда, которые относятся к главной.
Главное из интервью
01
Новички приходят за контентом
Их логика — «что это за релиз, стоит ли слушать, что о нём думают», а не внутренние механики РЗТ. Для опытных ядро тоже в релизах и рецензиях, а премии и рейтинги важны после вовлечения.
02
Активность авторов делит аудиторию
Новички не понимали, что это за контент и зачем он. Опытные пользователи называли лайки и комментарии авторов одной из главных ценностей РЗТ.
03
Новое ищут через входы РЗТ
Рекомендации и подборки интересны как дополнение. Опытные чаще находят музыку через топ-15, новые релизы, новые имена, премии и рецензии.
Подтверждение гипотез
Итоги исследований
Все пять гипотез я проверил на интервью с новичками и опытными пользователями. Главный вывод: первый слой главной должен быть про контент, а механики РЗТ — вторым слоем. Тренды, рекомендации и подборки подтвердились слабо, поэтому я усилил существующие входы, а не добавлял новые блоки.
Что показала проверка
Подтвердилась с уточнениемСообщество
Пользователь приходит за творческим контентом, а через понятные оценки и рецензии погружается в сообщество — так вовлечение растёт
Слабо подтвердиласьТренды
Блок трендов на главной должен быть информативнее, чем формат историй
Слабо подтвердиласьПоиск
Если добавить блок рекомендаций на основе контента, это удлинит сессию основного сценария — поиска и изучения контента
Слабо подтвердиласьСообщество
Если добавить возможность создавать подборки и статьи от авторов, это увеличит создание контента на площадке и привлечёт новую аудиторию
Итоговые выводы
По результатам интервью я составил выводы и задачу на редизайн по каждой гипотезе.
Подтвердилась
Структура вокруг контента: первый слой главной ведёт от релиза, механики РЗТ — вторым слоем.
Подтвердилась с уточнением
Сообщество: приходят за контентом, а удерживают люди. Социальные механики нужно развивать аккуратно.
Слабо подтвердились
Тренды, рекомендации и подборки. Топ-15 остался быстрым входом, а рекомендации и подборки я не стал делать центральными блоками главной.
Главная
Сначала музыка, потом механики
Главная — первая точка контакта новичка. На старой главной новички не понимали суть платформы: перед релизами шли сторис и два блока активности авторов, и было неясно, что здесь главное. Я пересобрал страницу, сделав акцент на релизы. Основание — гипотеза «структура вокруг творческого контента», она подтвердилась ↑
Порядок блоков
Было · 12 блоков
- Баннерпоявляется периодически, на скрине его нет
- Топ-15 за сутки в формате сторис→ hero-блок
- Понравилось авторам→ список в хедере
- Авторские комментарии
- Добавленные релизы
- Новые имена→ фильтр в «Релизах»
- Рецензии медиа на релизы
- Новые рецензии на релизы
- Топ-90 по баллам сообщества
- Статистика→ «О проекте»
- Ценность альбомов
- Плейлисты
Стало · 9 блоков
- Баннерпоявляется периодически: например, анонс фестиваля
- Топ-15 релизов за суткиhero вместо сторис
- Релизыфильтры «Новые имена» и «Активность авторов»
- Комментарии авторов релизов
- Рецензии
- Рецензии медиа
- Топ-90 пользователейраньше «Топ-90 по баллам сообщества»
- Ценность альбомов
- Плейлисты
Концерты и рецензии на концерты появились на сайте после редизайна, поэтому в сравнение не входят.
Главная целиком
Новая главная собрана на новом UI-ките: единые отступы, палитра и типографика, упорядоченные бейджи и статусы, фильтры в ленте релизов.
Было
Стало
Hero-блок вместо сторис
Сторис стояли первыми на сайте. Блок притягивал внимание, но не объяснял, что показывает: новички не считывали в нём тренды сообщества. Интервью ↑
Проблемы
- Новички не замечали заголовок и принимали блок за сторис пользователей
- Клик открывает релиз в карусели, перекрывающей весь контент
- Красная обводка похожа на паттерн «просмотрено / не просмотрено» и не передаёт активность авторов
Решение
- Hero-блок с акцентным заголовком «Топ-15 релизов за сутки»
- Карусель, в которой сразу видна вся информация о выбранном релизе
- Оценки скрыты по умолчанию. Из интервью выяснилось, что некоторые опытные пользователи не хотят видеть спойлеры оценок в трендах
Было
Стало
Активность авторов
По итогам интервью это один из самых спорных блоков. Новички не понимали, что это за контент и зачем он. А опытные пользователи называли лайки и комментарии авторов одной из главных ценностей РЗТ.
Проблемы
- Новички не понимают, что это за раздел и какую информацию несут карточки
- Сущности внутри карточки спорят между собой, нет чётких акцентов
Решение
- Перенёс активность в ленту уведомлений в хедере — знакомый многим пользователям паттерн
- Добавил активность отслеживаемых пользователей
- Лайки и комментарии авторов по-прежнему видны на карточках релизов, а фильтр «Активность авторов» оставляет в ленте только такие релизы
- Опытные сохраняют постоянную видимость событий, а новичков блок больше не сбивает
Было
Стало
Карточки контента
У карточек релизов, рецензий, рецензий медиа и комментариев авторов были похожие проблемы: размер зависел от контента, элементы спорили между собой, иконки не объясняли действия. Я пересобрал их по одному принципу: сначала контент, потом автор и механики.
Проблемы
- Размер карточки зависит от контента
- Элементы размещены хаотично
- Новички не понимают разницу между кругами оценок
Решение
- Иконками развёл простую оценку и оценку с рецензией
- Показал собственную оценку для сравнения и быстрого перехода к оцениванию
- Управление вынес в ховер и добавил «Трейлер» для быстрого прослушивания — одну из ключевых функций по итогам конкурентного анализа и интервью
Было
Стало
Проблемы
- Размер карточки зависит от контента
- Акцент на пользователе, а не на рецензии
- Иконки не передают смысл действия
Решение
- Увеличил текстовый блок и сделал акцент на рецензии
- Собрал все бейджи и статусы в один блок рядом с никнеймом
- Убрал лишние иконки, перенеся их функции в ховер и саму карточку
Было
Стало
Проблемы
- Кроме заголовка, о рецензии ничего не видно: чтобы понять, о чём она, нужно уйти по внешней ссылке
- Превью маленькое, акцента на медиа нет: непонятно, что это сторонний контент с видео
Решение
- Текст рецензии теперь всегда виден, а целиком открывается по кнопке прямо на сайте — уходить по внешней ссылке не нужно
- Сделал акцент на медиаконтенте: большое превью, при наведении на него можно перейти к просмотру видео
Было
Стало
Проблемы
- Размер карточки меняется в зависимости от контента
- Акцент на пользователе, а не на комментарии
- Иконки не передают смысл действия и путают
Решение
- Оставил отдельным блоком на главной с новой иерархией: релиз → комментарий → подпись автора → выбор комментария
- Для выбора комментария переиспользовал паттерн ленты уведомлений
Было
Стало
UI-кит
UI-кит
Все экраны выше собраны на новом UI-ките. Его я собрал с нуля: типографика, палитра, отступы, состояния и базовые компоненты, а на них — повторяющиеся сущности платформы: релизы, рецензии, активность авторов, рейтинги, плейлисты. Проблемы старого интерфейса, которые кит закрывает, разобраны в UI-аудите.
Шрифт — Onest. Все отступы кратны 4. Тёмную тему оставил, она была у платформы изначально. Палитра держится на двух шкалах: серой и фирменной красной.
Цвет ошибки. Осторожно, информация для гиков
В аудите один и тот же красный обозначал и активность авторов, и ошибку интерфейса. Фирменный цвет РЗТ — красный, поэтому ошибке нужен был оттенок, который с ним не спутать. Я подбирал его по разнице цветов Delta E от ступени Primary-700: чтобы отличие было явным, она должна стремиться к 40. Но чем выше разница, тем сильнее цвет уходит в розовый и белый и перестаёт читаться как ошибка. Поэтому я остановился на ступени 400: около 30 единиц от Primary-700 — ошибка заметно светлее бренда, но всё ещё красная. Разницу считал в Huetone. Рядом появились зелёная и оранжевая шкалы для успеха и предупреждения.
Фрагменты кита
Кит большой, поэтому здесь — отдельные фрагменты. Любой открывается в полном размере по клику.
Весь кит одной картинкой:
Юзабилити-тест
Что показал тест прототипа
После первой итерации я провёл модерируемый юзабилити-тест на кликабельном прототипе с новичками. Формат простой: одна гипотеза — одно задание, затем наблюдение и вывод. Задания покрывают путь новичка целиком:
понять, что это за сервиснайти релизразобраться в разделах сообщества
Всё, что подтвердилось с уточнением или не подтвердилось, я поправил во второй итерации.
| Гипотеза | Статус |
|---|---|
| H1. Новичок понимает назначение РЗТ | Подтвердилась |
| H2. Пользователь сам находит релиз | Подтвердилась |
| H12. Пользователь находит активность авторов | Подтвердилась с уточнением |
| H13. Пользователь находит активных участников сообщества | Подтвердилась |
| H14. Пользователь находит «Новые имена» | Подтвердилась |
Вторая итерация
Поправил и протестировал
Каждая правка закрывает гипотезу, которая подтвердилась с уточнением или не подтвердилась. Все правки я проверил повторным тестом на тех же заданиях. UI-кит не менялся: все правки собраны на тех же компонентах.
H12. Пользователь находит активность авторов
Подтвердилась с уточнениемПодтвердилась
- Проблема
- Активность авторов участники нашли через меню. Колокольчик в шапке видели, но не связывали его с активностью авторов. А в самом окне думали, что там только действия участников.
- Решение
- Вместо колокольчика — кнопка «Активность» с иконкой, как у активности авторов. Окно называется «Активность авторов и участников». Теперь в него заходят, когда речь об активности авторов.
- Результат
- За активностью авторов участники идут в окно «Активность» из шапки.
Итерация 1
Итерация 2
Итоги
Что получилось
01
Каждое решение можно проследить до исследования
Аудит → гипотезы → 10 интервью → юзабилити-тест прототипа → вторая итерация. За каждым ключевым экраном стоит конкретный вывод из этой цепочки.
02
Идентичность продукта сохранена
Я не убирал механики РЗТ, а сделал их вторым слоем после музыки: Топ-90, «Ценность альбомов» и комментарии авторов остались на главной, а лайки и комментарии авторов видны на карточках релизов и в окне «Активность». Это важно для опытной аудитории.
03
Единая визуальная система
Вместо разнобоя, который нашёлся на аудите, все экраны собраны на одном UI-ките. Цвет ошибки я подобрал по разнице Delta E, чтобы его нельзя было спутать с фирменным красным.
Что дальше
- Рекомендации и подборки. Добить слабо подтвердившиеся гипотезы — рекомендации на основе контента и подборки от авторов. Потребность в открытии музыки есть, поэтому стоит проверить конкретные форматы: подборки доверенных людей, итоги премий, новые имена.
- Дизайн-система. Вырастить UI-кит в полноценную дизайн-систему: токены цвета, типографики и отступов, библиотека компонентов со всеми состояниями, правила использования и документация для разработки. Тогда новые экраны будут собираться быстрее и не будут разъезжаться по стилю, как это было до редизайна.
Другие кейсы проекта
Пересобрал навигацию в 5 крупных разделов
Навигация
Открыть кейс →Собрал релиз, оценку и рецензии на одной странице
Страница релиза
Открыть кейс →Сделал сложную систему оценки доступной
Система оценки
Открыть кейс →Весь проект
Сделал «Кинопоиск для музыки» доступным для всех
Все четыре кейса одним лонгридом: исследование, решения и результаты целиком.
Открыть общий кейс →