UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Мои друзья ненавидят SoundCloud iOS, поэтому я сделал для них его редизайн
Редакція
Редакція

Опубліковано • Оновлено

Мои друзья ненавидят SoundCloud iOS, поэтому я сделал для них его редизайн

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

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

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

Часть I — Начиная с нуля

Итерация I

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

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

Поэтому, я стал все более и более любопытным ... ?

Фрай из мультсериала “Футурама”

Фрай из мультсериала “Футурама”

Что сделало другие мобильные потоковые приложения сильнее или слабее, чем SoundCloud? Что конкретно нам не нравится? Что нужно изменить? Чтобы вникнуть в вопрос, я расширил свой потоковый опыт и начал использовать Spotify и Apple Music, сравнивая и сопоставляя их сильные и слабые стороны и их шаблоны. Какие элементы и термины были универсальными на этих потоковых платформах?

SoundCloud iOS мобильное приложение - 1

SoundCloud iOS мобильное приложение - 2

SoundCloud iOS мобильное приложение - 3

После мысленного составления списка предложений и улучшений для SoundCloud (из неофициальных разговоров и т.д.) Я осознал неизбежность.

Если бы я захотел сделать редизайн SoundCloud, мне бы пришлось начинать с нуля.

Я должен был начинать с нулевой отметки.

Ситуация

В 2016 году мировой рынок музыки вырос на 5,9% из-за потоковой передачи (IFPI Facts and Stats 2016). 59% цифровых доходов в том же году было получено от потоковой передачи. SoundCloud, как одна из самых популярных потоковых платформ, делает акцент на своем сообществе, регистрируя 847 миллионов электронных подключений, сделанных в 2015 году. Он может похвастаться одним из крупнейших массовых цифровых сообществ электронной музыки, оцениваемое в более чем 10 миллионов.

SoundCloud сообщество

https://soundcloud.com/for/electronic

Гипотезы

SoundCloud стал конкурентом в области потоковой передачи музыки в 2016 году после дебюта их службы подписки SoundCloud Go. Пресса выражала в основном не очень удовлетворительные отзывы с момента ее релиза. SoundCloud ответил выпуском в 2017 году нового уровеня SoundCloud Go +. Так как платформа борется за победу над пользователями Spotify Premium, я начал формировать гипотезы.

1. Поиск музыки и ее потоковое воспроизведение – это социальная активность

2. Создание плейлистов имеет решающее значение для прослушивания

3. Открытие новой музыки должно быть удобным

Анализ рынка I

В глобальном масштабе самые высокие доли электронной музыки приходятся на Европу и Азию, а самые высокие потоки электронной музыки – в Америке, Великобритании, Дании и Мексике. (IMS Summit Business Report 2017)

Музыкальное исследование

Кто слушает электронную музыку? (Nielsen)

“Поколение 2000-х на 40% чаще посещают клубные мероприятия в США и всего 2 миллиарда по всему миру” – Доклад Международного бизнес-саммита 2010 года

Исследование I

Заинтересованные стороны

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

Каждая заинтересованная сторона была в конечном счете слушателем.

По сути, я сосредоточил свои вопросы на привычках слушателей и стримеров. В этом раунде я собрал ответы от 23 участников, возраст которых был между 18 и 28 годами. 82% были мужчинами и 80% учились в колледже.

Заинтересованные лица

Заинтересованные лица

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

Появилось больше вопросов. Насколько важно подключение пользователя к онлайн-сообществу? Как часто слушатели слушают музыку своих друзей? Как они влияют на репост треков и число лайков?

Интервью

У меня было 5 интервью, каждое из которых длилось около 30 минут. Я задал более 20 вопросов, пытаясь раскрыть то, что каждый из них считал сильными и слабыми сторонами SoundCloud iOS. Мои интервью показали отсутствие доверия к рекомендациям SoundCloud в качестве платформы для нахождения новой музыки. SoundCloud не считался столь же безупречным, как Spotify и Apple Music. Скорее, он рассматривался как портфолио для начинающих артистов, а не профессиональная дискография. Все мои результаты собраны здесь.

SoundCloud iOS. Интервьюирование и выводы

Из собранных данных я мог бы нарисовать лучшую картину. Я проиллюстрировал тип поведения под который я буду разрабатывать персонажи и сценарии. Первый сценарий – это рассказ о подруге, чей опыт прослушивания побудил ее поделиться треком с другом. Второй рассказывает о молодом, работающем мужчине, который хочет получить новый опыт прослушивания за рулем по дороге на работу.

SoundCloud iOS. Основной персонаж

Основной персонаж

SoundCloud iOS. Сценарии - 1

SoundCloud iOS. Сценарии - 2

100% участников опроса и интервью слушали разные варианты электронной музыки. Это включало широкий охват поджанров, в том числе трэп, электронику и поп. 60% опрошенных заявили, что они слушали подкасты, наборы или миксы, которые могли длиться от 30 минут до 3 часов. Их отзывы поддержали мое понимание SoundCloud как платформы для электронной музыки, будь то в форме рэп-продукции или поджанров.

Пересмотр моих гипотез:

1. Мои интервью в конечном итоге показали, что потоковое воспроизведение и поиск новой музыки не являются значительными социальными действиями, но личными исследованиями. Индивидуальный вкус чрезвычайно уникален.

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

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

Самое главное, что сообщество электронной музыки Soundcloud и репозиторий должны находиться на самой поверхности. Это означало бы подбор контента (записанные наборы, рекомендации, живые миксы) и организацию музыкальных библиотек, чтобы использовать привычки сообщества электронной музыки. Чтобы удовлетворить потребности моих респондентов, я сделал следующие предложения:

Предложения

1. Новая страница, посвященная событиям и миксам

2. Организация и категоризация коллекции сохраненной музыки.

3. Новая страница, посвященная Рекомендациям

4. Отдельный модуль для популярных репостов композиций

5. Сосредоточится исключительно на сообществе электронной и танцевальной музыки

Прототипирование

Процессы пользователей

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

Низкая точность

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

SoundCloud iOS. Низко детализированные прототипы - 1

SoundCloud iOS. Низко детализированные прототипы - 2

Средняя точность

После низкой точности я принял во внимание важность и цель каждого элемента и страницы. Снова организация по следующим основным направлениям приложения: Профиль или Главная страница, Открыть для себя и Библиотека.

SoundCloud iOS. Наброски дизайна - 1

SoundCloud iOS. Наброски дизайна - 2

Мероприятия и миксы

SoundCloud iOS. Страница - Мероприятия и миксы

Открыть для себя - Миксы

  1. Избранное — рекомендуемые исполнители и т.д.
  2. Мероприятия — фестивали, концерты
  3. Локация — крупные города и концертные площадки
  4. Подкасты — резиденты, ежедневные миксы

Рекомендации

SoundCloud iOS. Рекомендации

Открыть для себя - Миксы

  1. Рекорд лейблы – профессиональные дистрибьюторы
  2. Добивающиеся успеха своими силами (Self-made ) — YouTube каналы
  3. Музыкальные коллективы — группы, сотрудничество музыкантов

Пресса — журналы и пиар новой музыки

SoundCloud iOS. Пресса — журналы и пиар новой музыки - 1

SoundCloud iOS. Пресса — журналы и пиар новой музыки - 2

Высокая точность

Онлайн прототип

Дайте знать, что вы думаете о том, как работает инфраструктура, что можно улучшить в интерфейсе и вашем общем опыте.

Часть I была моей первой работой в Adobe XD, и я впечатлен тем, насколько легко было использовать функцию прототипирования. Часть I также охватывает первоначальные результаты исследований и первый интерактивный макет. В части II я буду фокусироваться на визуальном дизайне и микровзаимодействиях, используя Sketch и Principle, сглаживая острые углы первой модели для лучшей второй итерации.

Часть II — Делая шаг назад

Итерация II

Спасибо, что дочитали до этого места! Последние кусочки этого проекта сделали меня более увлеченным дизайном взаимодействия в целом. Я нашел эти гифки, чтобы показать вам, ребята, как я отношусь к прогрессу ?

Сейлор Мун

Сейлор Мун

Финн из “Время приключений”

Финн из “Время приключений”

Прежде чем перейти к последней половине этого проекта, я посмотрел, как SoundCloud изменился за последние несколько месяцев. Я просмотрел данные, которые я собрал несколько месяцев назад, и перелопатил текущую активность SoundCloud. Такие исполнители как Lil Uzi Vert, Post Malone и Travis Scott, были на вершине чартов SoundCloud, делая хип-хоп таким же популярным, как (если не больше) электронная музыка. Ранее основывая этот проект на людях, которые в основном слушали электронную музыку, я подумал, что должен был повернуть в совершенно другом направлении.

Я сделал шаг назад.

Если база SoundCloud изменилась, я понял, что мне нужно больше доказательств. Я сосредоточился на небольшом размере выборки в своей собственной сети и нуждался в расширении. Почему бы не собрать больше данных о потоковом воспроизведении музыки?

Исследование рынка II

Собрав серию статей, пресс-релизов и исследований из NYTimes, Forbes, WMagazine и др., я понял, что тенденция к хип-хопу на SoundCloud появилась в последние пару лет. В топ-3 исполнителей SoundCloud в 2015 году были Drake, Major Lazer и G-Eazy (Forbes 2015). В 2016 году лучшим альбомом стал Coloring Book авторства Chance the Rapper, самой популярной композицией Panda от Desiigner, а больше всего подписчиков было у Lil Uzi Vert.

SoundCloud IOS. Исследование рынка

Обзор SoundCloud в 2016 году

Исследование II

Я провел еще одно исследование, которое было более кратким и было сосредоточено на количественных данных. Оно состояло из четырех вопросов с множественным выбором. Я собрал ответы от 167 участников.

SoundCloud IOS. Исследование рынка. Вопрос 1: Сколько вам лет?

Вопрос 1: Сколько вам лет?

SoundCloud IOS. Исследование рынка. Вопрос 1: Какие жанры вы в основном слушаете?

Вопрос 2: Какие жанры вы в основном слушаете?

SoundCloud IOS. Исследование рынка. Какое приложение(я) потоковой трансляции музыки вы используете на своем телефоне?

Вопрос 3: Какое приложение(я) потоковой трансляции музыки вы используете на своем телефоне?

SoundCloud IOS. Исследование рынка. Для чего вы используете ваше приложение(я) потоковой трансляции музыки?

Вопрос 4: Для чего вы используете ваше приложение(я) потоковой трансляции музыки?

Ниже приведены результаты: электронная музыка и хип-хоп относятся к наиболее слушаемым жанрам. Большинство музыкальных стримеров варьировались в возрасте от 16 до 27 лет. Средний возраст 21 год. Spotify лидирует в сравнении с SoundCloud, как наиболее предпочтительная, мобильная, потоковая платформа. Потоковое воспроизведение считалось самой важной деятельностью, затем функция Открыть для себя, а затем создание плейлистов.

Пересмотр моих предложений:

1. Организовать и классифицировать коллекцию сохраненной музыки

2. Отдельный модуль для популярных репостов композиций

3. Сосредоточится на электронных, танцевальных и хип-хоп сообществах

4. Структурировать страницу Открыть для себя по жанрам

Большинство результатов раунда 2 отразили данные, собранные мною несколько месяцев назад, но я узнал кое-что новое:

Одной из самых сильных сторон SoundCloud в качестве платформы является ее универсальность и способность развиваться со своей аудиторией.

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

Иконки

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

SoundCloud IOS. Цветные иконки

SoundCloud IOS. Черно-белые иконки

Визуальный дизайн и микровзаимодействия

Главная

Для SoundCloud iOS цель главной страницы (и только цель) – показать активность людей, на которых вы подписаны. Все сообщения отправляются в фид в хронологическом порядке. Самыми заметными элементами фида являются иллюстрации и число лайков, и репостов.

SoundCloud vs Итерация 2: Главная

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

SoundCloud IOS. Редизайн 2: Главная страница

SoundCloud IOS. Редизайн: Популярное в вашем фиде

Итерация 2: Популярное в вашем фиде

Предположим, что у поста меньше 10 лайков и непривлекательная обложка альбома. Вы бы послушали его? Если мы будем честными, маловероятно, что вы воспроизведете пост, который кажется менее профессиональным, а цифры всегда играют определенную роль во влиянии на ваши ожидания.

Я убрал число лайков и репостов, чтобы уменьшить суждение и предубеждение. Значки с правой стороны классифицируют посты по типам: станции, миксы, плейлисты, альбомы или композиции. Чтобы сосредоточиться на прослушивании вместо внешнего вида, Ваш фид делает акцент на названии, исполнителе и типе.

SoundCloud IOS. Редизайн: Ваш фид

Итерация 2: Ваш фид

Поиск

В SoundCloud iOS нажатие на вкладку Поиск приведет вас к их версии Открыть для себя. Нажатие на строку поиска вверху страницы изменяет ее на Поиск. Я разделил Поиск и Открыть для себя на две отдельные вкладки для навигации. Если слушатель захотел бы только выполнить поиск, он нажал бы кнопку “Поиск”. Вот пример моей первой итерации.

Итерация 1: поиск и описание альбома

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

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

SoundCloud 5.7.1 vs Итерация 2: Поиск

SoundCloud 5.7.1 vs Итерация 2: Поиск

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

SoundCloud IOS. Редизайн: описание альбома и хештеги, интерактивный прототип

Итерация 2: описание альбома и хештеги

Открыть для себя (Discover)

На странице “Открыть для себя” первой итерации основное внимание уделялось разделению SoundCloud по таким типам, как треки, плейлисты и альбомы. Я заметил, что перемещение по этим элементам стало повторяющимся (треки, плейлисты и альбомы будут иметь разделы для популярных, новых и предлагаемых композиций). За каждым пунктом меню не было темы.

Итерация 1 vs Итерация 2: Открыть для себя

Итерация 1 vs Итерация 2: Открыть для себя

Чтобы сделать пункты меню менее произвольными, я пересмотрел карту сайта раздела “Открыть для себя”, чтобы соответствовать возрастной демографии постоянных участников SoundCloud. Я также пытался поддерживать уровень гибкости для модулей, представленных на каждой странице. Из-за различных фокусов проекта я убрал пункт Чарты, во время работы функций “Открыть для себя” и сделал акцент на разделах Your Cloud, Во всем мире, Мини-альбом и Рекомендовано.

SoundCloud IOS. Редизайн: кнопки

Пересмотр карты сайта раздела “Открыть для себя”

SoundCloud vs Итерация 2: Открыть для себя

SoundCloud vs Итерация 2: Открыть для себя

_Открыть для себя - Избранное

_Новое дополнение SoundCloud к разделу “Открыть для себя” – это Загрузка. В качестве предварительного просмотра для популярных исполнителей или плейлистов, рекомендованных SoundCloud, я создал окно Избранное, которое позволяет пользователям просматривать свежую, новую музыку и талантливых исполнителей.

SoundCloud IOS. Редизайн: функция прокрутки для раздела Открыть для себя

Итерация 2: функция прокрутки для раздела Открыть для себя

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

Слева направо: Your Cloud, Во всем мире, Хиты и новинки, Мини-альбом, и Рекомендованное

Слева направо: Your Cloud, Во всем мире, Хиты и новинки, Мини-альбом, и Рекомендованное

_Открыть для себя - Во всем мире

_SoundCloud как глобальная платформа для независимых исполнителей в разных частях мира стала голосом для крупных городов и сцен. Раздел Во всем мире охватывает масштабные мероприятия и живые выступления. Эта страница призвана вывести глобальную активность на поверхность SoundCloud.

SoundCloud IOS. Художественное оформление для ‘Концерты’ и ‘Города’

Художественное оформление для ‘Концерты’ и ‘Города’

Открыть для себя - Хиты и новинки

Этот раздел уже существует в десктопной версии SoundCloud (но не в мобильной) в разделе “Чарты”. Раздел “Хиты и новинки” идентифицирует популярные и заметные релизы от начинающих исполнителей, которые идеально подходят для популярных хип-хоп-артистов и рэпперов.

SoundCloud IOS.

Открыть для себя - Мини-альбом

Электронная музыка известна сетами и длинными выступлениями. Раздел Мини-альбом компилирует закачки, которые классифицируются как миксы или станции, чтобы пользователи могли слушать музыку в течение нескольких часов.

Открыть для себя - Рекомендовано

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

Художественное оформление для ‘Плейлисты SoundCloud’ и ‘Предстоящие мероприятия’

Художественное оформление для ‘Плейлисты SoundCloud’ и ‘Предстоящие мероприятия’

Сейчас играет

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

SoundCloud описание композиции

Итерация 2: описание композиции и т.д.

Библиотека

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

SoundCloud vs Итерация 2: Библиотека

SoundCloud vs Итерация 2: Библиотека

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

SoundCloud. Редизайн: фильтр библиотеки по артисту

Итерация 2: фильтр библиотеки по артисту

В SoundCloud лайкая композицию вы добавляете ее в библиотеку, но нет обратной связи, чтобы показать, что “добавление в библиотеку” было выполнено. Подобно тому, как Apple Music или Spotify уведомляет пользователя о том, что трек добавлен в библиотеку, я проиллюстрировал действие для SoundCloud.

SoundCloud. Редизайн: добавление и удаление из библиотеки

Итерация 2: добавление и удаление из библиотеки

Профиль

И последнее, но не менее важное: профиль! Некоторые из предложений, озвученных опрашиваемыми, заключались в том, чтобы показать и получить доступ к описанию, ссылкам и подписчикам. Я отразил то, как сообщения отображаются в разделе “Открыть для себя” в профиле этого исполнителя.

SoundCloud. Редизайн: профиль исполнителя и другие опции

Итерация 2: профиль исполнителя и другие опции

Любое описание, связанное с этим, появляется сверху вниз. Для получения дополнительных параметров, таких как следующее, репост или доступ к трекам исполнителя, меню появляется снизу-вверх.

SoundCloud. Редизайн: описание исполнителя

Итерация 2: описание исполнителя

Размышляя о том, что было сделано

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

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

Итак, куда едем? Я не могу сказать вам это, потому что у меня нет твердого ответа. Но я могу сказать вам следующее: я собираюсь учиться всю жизнь, стать продакт дизайнером и ставить перед собой высокие цели!

Посетите мой веб-сайтe, если вы хотите узнать больше. Спасибо за внимание!! ?


Перевод статьи kelleytmnguyen

Найстарші коментарі (0)