Как я переделала главную страницу VK Музыки в кастомизируемый дашборд
В финале конкурса ArtMasters 2024 я переосмыслила логику главной страницы VK Музыки на десктопе. Исследование показало, что пользователи редко исследуют длинную витрину контента, поэтому я предложила концепцию одноэкранного кастомизируемого дашборда с акцентным плеером и управляемыми рекомендациями. Проект занял 1 место.
Контекст
В 2024 году я заняла 1 место в направлении UI/UX-дизайна на национальном чемпионате творческих профессий ArtMasters. Участвовало около 1000 человек, а в финал прошли только 9.
Финал проходил 2 недели онлайн и 5 дней офлайн в офисе VK. Каждый участник самостоятельно работал над задачей и в конце защищался перед экспертами индустрии во главе с Артемием Лебедевым.
Задача
Переосмыслить главную страницу VK Музыки на десктопе. Цель — повысить вовлеченность пользователей и предложить новый формат взаимодействия с контентом платформы.
Дискавери
На этапе дискавери я изучила предпочтения пользователей и решения на рынке, чтобы понять проблемное поле. После этого сопоставила свои выводы с внутренними исследованиями VK Музыки.
Опрос пользователей
Чтобы не опираться только на личный опыт, я провела опрос на 43 человека. Мне было важно понять, в каких ситуациях пользователи включают музыку на десктопе, как взаимодействуют с главной страницей, что вызывает раздражение.
Слушают музыку с десктопа на работе или за учебой
60%
Пользователям важно быстро находить свою музыку и не тратить время на скролл главной
Рекомендации
на основе прослушенного
Любимая функция
Слушают музыку с десктопа на работе или за учебой
60%
Пользователям важно быстро находить свою музыку и не тратить время на скролл главной
Рекомендации
на основе прослушенного
Любимая функция
Слушают музыку с десктопа на работе или за учебой
60%
Пользователям важно быстро находить свою музыку и не тратить время на скролл главной
Рекомендации
на основе прослушенного
Любимая функция
В результате стало ясно: на десктопе музыка чаще всего работает как фон. Пользователи редко исследуют главную страницу и чаще запускают знакомый плейлист или алгоритмический микс. Это привело меня к вопросу: если главную почти не исследуют, должна ли она оставаться длинной?
Бенчмарки
Я проанализировала 5 популярных сервисов, в том числе те, которые чаще всего упоминались в опросе: Яндекс Музыку, VK Музыку, Spotify, Apple Music и YouTube Music.
В анализе я сфокусировалась на том, как устроена главная страница, какие блоки находятся в приоритете, как формируются рекомендации и каким образом сервис ведёт пользователя к прослушиванию. По итогам сравнения я выделила несколько повторяющихся паттернов:
01
Главная почти везде — длинная лента контента с подборками
02
Алгоритмические рекомендации — основа вовлечения
03
Навигация часто усложняется по мере роста функций
04
Плеер — ключевой элемент сервиса, но визуально не главный
05
Социальные функции либо вторичны, либо отсутствуют
06
Много блоков на экране конкурируют за внимание юзера
01
Главная почти везде — длинная лента контента с подборками
02
Алгоритмические рекомендации — основа вовлечения
03
Навигация часто усложняется по мере роста функций
04
Плеер — ключевой элемент сервиса, но визуально не главный
05
Социальные функции либо вторичны, либо отсутствуют
06
Много блоков на экране конкурируют за внимание юзера
01
Главная почти везде — длинная лента контента с подборками
02
Алгоритмические рекомендации — основа вовлечения
03
Навигация часто усложняется по мере роста функций
04
Плеер — ключевой элемент сервиса, но визуально не главный
05
Социальные функции либо вторичны, либо отсутствуют
06
Много блоков на экране конкурируют за внимание юзера
Рынок повторяет одну и ту же модель — длинная витрина контента с акцентом на алгоритмический микс как главный сценарий входа. Это усилило мой изначальный вопрос — а можно ли подойти к главной иначе?
Погружение в экосистему VK
Изучив рынок, я сфокусировалась на контексте самой VK Музыки. Сейчас на десктопе она встроена в социальную сеть и наследует её узкий центральный формат. Для соцсетей это оправдано, но для медиасервиса такая сетка сильно ограничивает пространство.
VK Видео уже пошёл по другому пути — сервис вынесли в отдельный широкоформатный интерфейс. Это сделало продукт более самостоятельным и адаптированным под медиа. А сейчас пользователи всё чаще выбирают сервисы с фокусом на одной задаче, а не супераппы.
Если видео уже вынесли в самостоятельный продукт, то музыка ведь тоже может развиваться как отдельный широкоформатный сервис? Тем более, что на мобилке она есть и в основной приле, и отдельно.
Исследования VK Музыки
Чтобы валидировать свои выводы, я проанализировала качественные исследования главной от VK.
Я выделила ключевые проблемы, которые напрямую влияют на вовлечённость и восприятие сервиса:
Главную редко скроллят
Пользователи чаще выбирают «Мою музыку», чем исследуют главную, из-за чего вовлечённость в другие сценарии снижается
Не доверяюют рекомендациям
Рекомендации вызывают недоверие, редакционные подборки воспринимаются как универсальные, а не персональные
Функции плеера не замечают
Часть функций плеера остаётся незамеченной — иконки и состояния не всегда считываются
Блоки визуально теряются
Некоторые блоки (например, сниппеты) теряются визуально, их ценность неочевидна
Главную редко скроллят
Пользователи чаще выбирают «Мою музыку», чем исследуют главную, из-за чего вовлечённость в другие сценарии снижается
Не доверяюют рекомендациям
Рекомендации вызывают недоверие, редакционные подборки воспринимаются как универсальные, а не персональные
Функции плеера не замечают
Часть функций плеера остаётся незамеченной — иконки и состояния не всегда считываются
Блоки визуально теряются
Некоторые блоки (например, сниппеты) теряются визуально, их ценность неочевидна
Главную редко скроллят
Пользователи чаще выбирают «Мою музыку», чем исследуют главную, из-за чего вовлечённость в другие сценарии снижается
Не доверяюют рекомендациям
Рекомендации вызывают недоверие, редакционные подборки воспринимаются как универсальные, а не персональные
Функции плеера не замечают
Часть функций плеера остаётся незамеченной — иконки и состояния не всегда считываются
Блоки визуально теряются
Некоторые блоки (например, сниппеты) теряются визуально, их ценность неочевидна
Генерация идей
На основе выявленных проблем я начала генерировать идеи — от изменений в структуре до новых механик взаимодействия. Чтобы не распыляться, я структурировала их по методу MoSCoW.
Из множества идей я выбрала направления, которые формируют основу нового концепта.
Гипотезы
01
Если сделать главную на одном экране без скролла, то вырастет кликабельность блоков, потому что контент перестанет теряться, а внимание пользователя будет сфокусировано
02
Если сделать кастомизируемый дашборд, то вырастет Retention, потому что пользователи получат чувство контроля и смогут создать комфортное личное пространство
03
Если закрепить крупный плеер в боковой панели, то увеличится глубина прослушивания, потому что юзеру будет гораздо удобнее управлять музыкой в фоновом режиме
04
Если показывать личную статистику, то повысится вовлеченность в продукт, потому что людям нравится изучать свои вкусовые предпочтения, и они смогут лучше настраивать рекомендации
01
Если сделать главную на одном экране без скролла, то вырастет кликабельность блоков, потому что контент перестанет теряться, а внимание пользователя будет сфокусировано
02
Если сделать кастомизируемый дашборд, то вырастет Retention, потому что пользователи получат чувство контроля и смогут создать комфортное личное пространство
03
Если закрепить крупный плеер в боковой панели, то увеличится глубина прослушивания, потому что юзеру будет гораздо удобнее управлять музыкой в фоновом режиме
04
Если показывать личную статистику, то повысится вовлеченность в продукт, потому что людям нравится изучать свои вкусовые предпочтения, и они смогут лучше настраивать рекомендации
01
Если сделать главную на одном экране без скролла, то вырастет кликабельность блоков, потому что контент перестанет теряться, а внимание пользователя будет сфокусировано
02
Если сделать кастомизируемый дашборд, то вырастет Retention, потому что пользователи получат чувство контроля и смогут создать комфортное личное пространство
03
Если закрепить крупный плеер в боковой панели, то увеличится глубина прослушивания, потому что юзеру будет гораздо удобнее управлять музыкой в фоновом режиме
04
Если показывать личную статистику, то повысится вовлеченность в продукт, потому что людям нравится изучать свои вкусовые предпочтения, и они смогут лучше настраивать рекомендации
Low-fi концепт
Опираясь на первые 3 гипотезы, я собрала интерактивный low-fi прототип дашборда. На этом этапе мне было важно протестировать чистую UX-логику и навигацию, не отвлекая респондентов на визуальный стиль. В фокусе — ощущение управляемости главной страницы.
UX-тестирование
Я провела 6 глубинных интервью с активными пользователями музыкальных сервисов на десктопе.
Респонденты выполняли сценарные задачи, делились впечатлениями от структуры главной и отвечали на уточняющие вопросы о востребованности функций. В итоге тестирование подтвердило гипотезы и интерес к кастомизации главной страницы.
4 из 6
Сначала сочли боковой плеер непривычным, но после тестов отметили удобство
6 из 6
Оценили настраиваемые блоки и удобство Избранных треков на виду
6 из 6
Все оказались заинтересованы в просмотре личной статистики
4 из 6
Сначала сочли боковой плеер непривычным, но после тестов отметили удобство
6 из 6
Оценили настраиваемые блоки и удобство Избранных треков на виду
6 из 6
Все оказались заинтересованы в просмотре личной статистики
4 из 6
Сначала сочли боковой плеер непривычным, но после тестов отметили удобство
6 из 6
Оценили настраиваемые блоки и удобство Избранных треков на виду
6 из 6
Все оказались заинтересованы в просмотре личной статистики
Дизайн под VK Музыку
После тестов я адаптировала low-fi концепцию под реальный контекст VK Музыки с учётом дизайн-системы и архитектуры продукта.
Доработала существующие блоки VK Музыки:
VK mix
Визуализировала рекомендации через динамические волны и добавила гибкую настройку микса (по настроению, контексту и языку)
Подборки
Объединила редакционные и алгоритмические плейлисты в единый блок с фильтрацией, чтобы юзер сам решал, что видеть на главной
Сниппеты
По клику открываются в интерфейсе плеера, это усиливает роль сниппетов для быстрого знакомства с новой музыкой
Избранное
Дала возможность закреплять конкретный личный плейлист на главной, максимально ускоряя вход в базовый сценарий прослушивания
VK mix
Визуализировала рекомендации через динамические волны и добавила гибкую настройку микса (по настроению, контексту и языку)
Подборки
Объединила редакционные и алгоритмические плейлисты в единый блок с фильтрацией, чтобы юзер сам решал, что видеть на главной
Сниппеты
По клику открываются в интерфейсе плеера, это усиливает роль сниппетов для быстрого знакомства с новой музыкой
Избранное
Дала возможность закреплять конкретный личный плейлист на главной, максимально ускоряя вход в базовый сценарий прослушивания
VK mix
Визуализировала рекомендации через динамические волны и добавила гибкую настройку микса (по настроению, контексту и языку)
Подборки
Объединила редакционные и алгоритмические плейлисты в единый блок с фильтрацией, чтобы юзер сам решал, что видеть на главной
Сниппеты
По клику открываются в интерфейсе плеера, это усиливает роль сниппетов для быстрого знакомства с новой музыкой
Избранное
Дала возможность закреплять конкретный личный плейлист на главной, максимально ускоряя вход в базовый сценарий прослушивания
Кастомизируемый дашборд
Блоки можно менять местами, скрывать и изменять им размер. Это снижает перегрузку контентом и увеличивает чувство контроля. Если бизнесу будет критично сохранять видимость отдельных блоков, можно предусмотреть блокировку скрытия (Lock).
Статистика как инструмент персонализации
Статистика встроена в главный сценарий и помогает пользователю понимать свой музыкальный профиль. По диаграммам можно увидеть распределение по настроениям и жанрам, активность, совместимость с друзьями, топ исполнителей.
Это превращает статистику из отчёта в инструмент управления рекомендациями.
Плеер как центр управления
Плеер становится центром управления, а не второстепенной панелью. При этом его можно свернуть в компактный режим или раскрыть на весь экран для полного погружения. Если у трека есть клип или видеопревью, оно воспроизведется в фулл режиме.
Визуальный язык
VK Mix и подборки объединила единым графическим приёмом — динамическими волнами. Они отражают ритм и настроение, а цвет помогает различать контекст и тип рекомендаций.
Неоновое свечение поддерживает визуальный стиль VK и усиливает ощущение самостоятельного медиа-продукта, а не раздела внутри соцсети.
Защита проекта
Концепцию я защищала перед жюри и экспертами индустрии (Артемий Лебедев, Николай Соболев, Михаил Наер, Екатерина Тюхай и многие другие). Обсуждение было живым и требовательным — с вопросами к логике, реализуемости и продуктовой ценности решений.
Итоги
В результате главная страница VK Музыки превратилась из длинной витрины контента в управляемое персональное пространство. Пользователь быстрее входит в привычный сценарий прослушивания, влияет на рекомендации и управляет структурой интерфейса без ощущения перегруженности.
В результате мой проект занял 1 место в конкурсе, а я получила награду 750к рублей!
Для меня это не только победа, но и подтверждение того, что продуманные решения и глубокая проработка действительно считываются и ценятся.
Что могло быть дальше?
Если бы концепция внедрялась в продукт, следующим шагом стала бы проверка через A/B-тест.
Я бы отслеживала:
использование кастомизации
изменение глубины прослушивания и CTR блоков при использовании кастомного дашборда
влияние на retention десктопной версии
Рефлексия
01
Дашборд — самая сложная часть концепции. В реальности требуется еще экономическая оценка фичи
02
Ключевым вызовом стала адаптация концепта под ограничения крупной экосистемы VK
03
Прошла путь от дискавери до защиты перед экспертами. Глубокая проработка всегда считывается жюри и рынком
01
Дашборд — самая сложная часть концепции. В реальности требуется еще экономическая оценка фичи
02
Ключевым вызовом стала адаптация концепта под ограничения крупной экосистемы VK
03
Прошла путь от дискавери до защиты перед экспертами. Глубокая проработка всегда считывается жюри и рынком
01
Дашборд — самая сложная часть концепции. В реальности требуется еще экономическая оценка фичи
02
Ключевым вызовом стала адаптация концепта под ограничения крупной экосистемы VK
03
Прошла путь от дискавери до защиты перед экспертами. Глубокая проработка всегда считывается жюри и рынком
