«Сделать приложение таким же эмоциональным, как сама музыка»

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

В начале октября VK Музыка представила крупнейшее за 17 лет обновление сервиса. Мы детально расскажем о процессе редизайна с самого начала — с момента сбора идей, в чём активно участвовали пользователи, до финального результата, который увидела аудитория. Сколько брейнштормов понадобилось, чтобы придумать анимацию VK Микс, почему мы полностью обновили раздел «Моя музыка» и какие фичи наши пользователи считают ключевыми в плеере.

В 2021 году команда маркетинга VK Музыки объединила под одним брендом VK Музыка музыкальный раздел ВКонтакте и бывшее приложение BOOM. В то время было сложно конкурировать с большими игроками. Мы понимали, что нужно создавать свой бренд музыкального сервиса, который объединит и музыкальный раздел ВКонтакте, и отдельное приложение.

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

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

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

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

Ранее мне уже приходилось заниматься редизайном в других компаниях. Я пришёл в VK Музыку с задачей собрать команду дизайна и сделать раздел музыки и приложение совершенно новыми. Музыка — это эмоциональный контент, и главный посыл редизайна состоял именно в этом. Хотелось, чтобы и приложение VK Музыка, и раздел «Музыка» в супераппе соцсети ВКонтакте вызывали яркие эмоции сразу при входе.

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

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

Вторая большая задача, функциональная, относилась к UX, то есть к улучшению пользовательского опыта. Мы совершенствовали основные механики взаимодействия пользователей с VK Музыкой. Перемены в основном касались главной страницы, VK Микс, плеера и раздела «Моя музыка» с личными коллекциями треков.

Третья задача: в интерфейс нужно было интегрировать бренд-элементы. До редизайна отдельное приложение VK Музыки, как и раздел в «большом» приложении ВКонтакте, поддерживали буквально пару визуалов из гайдбука. Предстояло перенести всю брендовую историю, заранее разработанную маркетологами, в продукт, ведь если бренд-элементы хорошо интегрированы в приложение, это повышает его узнаваемость.

Решая все три задачи, мы постоянно держали в фокусе самый важный момент. Необходимо было добиться консистентности музыкального раздела супераппа ВКонтакте и приложения VK Музыка, которые отличались друг от друга. Отличались также версии приложения, что особенно бросалось в глаза в плеере с разным набором функций на iOS и на Android.

Готовясь к UX/UI-части редизайна, провели сессии исследований по каждому из разделов: VK Микс, главная страница, «Моя музыка», плеер — и прибегли к рейтингу ожидаемых и существующих фич. По каждому из разделов, участвовавших в редизайне, респондентам задавали вопросы, например: как часто вы пользуетесь той или иной фичей на главной, какие функции в плеере считаете ключевыми, как часто вы создаёте плейлисты в своей коллекции и т. д. В исследованиях участвовали дизайнеры, чтобы во время интервью задавать дополнительные вопросы и корректировать подход в тесной связке с UX-исследователями.

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

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

Мы буквально «щупали» каждого пользователя и не пользователя, чтобы раскопать те инсайты, которые объективно важны для людей и на которые нам нужно делать упор. Сложность состоит в том, что человек с огромным трудом может конкретно сформулировать, что он ожидает от приложения. Тем более никто не опишет идеальное будущее приложение. Люди говорят о том, что уже есть на рынке.

Многие хотели видеть что-то «модное и современное». Но когда речь заходила о конкретике, дальше ярких цветов и тёмного интерфейса мы не продвигались. Некоторые говорили: «Да всё круто, ради бога ничего не меняйте!» Кто-то говорил, что дизайн морально устарел, кто-то хотел полную кастомизацию. Перед нами было море кусочков пазла, которые хотелось собрать в цельную картину, решив главные задачи.

Перед дизайнерами поставили амбициозную задачу, которую нужно было реализовать в конкретный срок. Структурно наша команда разделена на вертикали: это небольшие группы, каждая из которых отвечает за свою часть интерфейса. Но в данном случае все дизайнеры участвовали в процессе. Каждый имеет свой взгляд на продукт, и в этом наша сила. Я хотел, чтобы мы спорили, «челленджили» друг друга и делали море концептов.

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

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

В таком большом бренде, как ВКонтакте, естественно, есть свои гайды, общие паттерны и дизайн-система. Но чтобы создать что-то совершенно новое, хотелось дать дизайнерам свободу творчества. Поэтому на первом этапе все были «мечтателями», то есть были ограничены только своими возможностями и вдохновением. Мы обсуждали референсы, комментили хорошие решения и каждый уходил творить свой концепт.

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

Далее концепты представляли всей команде, и мы обсуждали, что нравится, а что нет. Одобренные макеты передавали обратно в команду конкретной вертикали, и она их доводила до ума. И примерно через месяц-полтора по этим вариантам проводилось количественное исследование и интервью с пользователями. С полученными данными мы шли в разработку и дальнейшие A/B-эксперименты.

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

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

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

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

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

Презентовали идею, и она всем понравились. Затем начали раскручивать тему с настроениями, которые можно включать в настройках VK Микс: «Любовь», «Радостно», «Грустно», «Активно», «Спокойно». Метафоры природы и стихий в настройках хорошо сочетались с общей концепцией и решали задачу ассоциации с настроениями. Для каждой настройки мы придумали уникальную анимацию и выбрали свой цвет:

Если говорить об улучшении пользовательского опыта, то система рекомендаций в приложениях была полностью пересобрана, она стала более реактивной и теперь быстрее подстраивается под вкусы слушателя. Более точно подстраивать рекомендации можно через VK Mикс — здесь появился раздел настройки. Поток рекомендованных треков можно настраивать по настроению, популярности и языку.

Как уже отмечалось, коллекция — один из ключевых разделов для пользователей, поэтому мы пошли по пути унификации раздела «Музыка» в соцсети и приложения VK Музыка, чтобы создать единый опыт взаимодействия.

Приложение ВКонтакте всегда было передовым с точки зрения управления плейлистами. Управление и кастомизация — наши преимущества по сравнению со многими другими музыкальными сервисами. В разделе «Музыка» в приложении ВКонтакте можно перетаскивать плейлисты и треки, менять их местами, массово удалять. Теперь аналогичные функции появились и в приложении VK Музыка.

Структура раздела полностью обновилась. Ключевую сущность раздела — «Мои треки» — мы подняли выше для быстрого доступа. Собранный контент категоризировали по папкам для более удобного управления разделом: «Альбомы», «Артисты», «Недавно слушали», «Радио», «Аудиокниги» и т. д.

Для многих пользователей очень важно скачивать и быстро находить скачанную музыку, поэтому мы сделали к ней лёгкий доступ из «Моей музыки» по нажатию на кнопку-фильтр.

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

Поэтому плеер был пересобран — практически создан с нуля. Мы руководствовались данными опросов пользователей и держали в голове задачу развивать систему рекомендаций. В итоге на главный экран плеера были вынесены самые востребованные функции. Это «Дизлайк», «Скачать», «В плейлист», «Поделиться». Также на главном экране есть фича «Микс по треку», которая подберёт к играющей песне похожие по стилю треки.

Кстати, почему есть дизлайк, но нет лайка? Дело в том, что мы не стали путать пользователей двумя разными кнопками «Добавить в „Мою музыку“» и «Лайк», а сделали единую кнопку, которая отвечает за формирование рекомендаций. Также мы добавили кастомные анимации и хаптик (тактильную отдачу): они работают как дополнительный акцент на добавлении и показывают, что рекомендации обновились. Во время разработки плеера наши дизайнеры стали гуру в настройке хаптиков: они буквально сами делали кастомный хаптик под каждую кнопку, чтобы получить вау-эффект.

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

Редизайн VK Музыки — это лишь начало большого пути. Мы не останавливаемся на достигнутом и уже готовим новые обновления. Впереди нас ждёт множество нововведений, которые позволят иначе взглянуть на музыкальный сервис и сделать прослушивание музыки ещё ярче и эмоциональнее.