Как мы собрали сложный интерфейс музыкального редактора в приложении и запустили MVP

Всем привет, я Эд Хорьков из КОД9. Хочу рассказать о том, как мы создали для заказчика музыкальный редактор Туттии, который умещается на ладони. В приложении можно без опыта работы с музыкой делать ремиксы на популярные песни — сейчас оно в альфа-тесте и скоро появится в App Store.

Познакомились с заказчиками и изучили вводные

Провели R&D-фазу

Выбрали визуальный стиль

Проработали интерфейс и дизайн

Отказались от NFT-составляющей

Занялись разработкой

Что в итоге

Основателям Туттии нас посоветовали другие наши клиенты. Им объяснили, что к нам можно обратиться со сложными идеями, которые нужно формализовать и помочь довести до продукта. Основатели Туттии как раз искали такого подрядчика: они впервые занимались ИТ-проектом и не имели технического опыта.

Один из них давно интересовался электронной музыкой и загорелся идеей сделать приложение, где можно удобно создавать и продавать ремиксы на популярные песни. Концепт состоял из двух частей: музыкальный редактор и NFT-маркетплейс для ремиксов. То есть пользователи должны были иметь возможность покупать оригинальные треки в виде NFT, а потом так же продавать свои версии.

Основатели передали нам вводные в нескольких форматах:

Вайрфрейм. Они самостоятельно собрали простой прототип интерфейса, чтобы нам было, от чего оттолкнуться.

Текстовые описания. Заказчики подготовили несколько документов с примечаниями и требованиями. Они покрывали три главных направления работы на первое время:

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

👉🏻 А вот как мы обычно составляем ТЗ

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

Референсы. Заказчики попросили нас ориентироваться на приложения BeatSync и Medly, в плане фичей ссылались на GarageBand и iTunes Music.

Мы изучили вводные и решили не браться за полноценную разработку сразу, хотя основатели были готовы. Мы предложили разделить проект на части и сначала запустить R&D-фазу: исследовать задачу и понять, какие технологии для неё потребуются.

Определили пользовательские сценарии. Вот ключевые из них:

⚙ В приложении можно использовать оригинальные треки для создания мэшапов. В одном мэшапе можно задействовать неограниченное количество треков и дорожек двух видов — c аудио и вокалом.

⚙ В мэшапе можно менять темп, тональность и громкость звуковых дорожек, сохранять проект, экспортировать его и делиться готовым аудио.

⚙ Пользователь может выложить мэшап на продажу в маркетплейс в виде NFT и купить мэшапы других пользователей.

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

Нам хватило возможностей AudioKit — это open-source библиотека для синтеза, обработки и анализа звука для iOS и macOS, надстройка над системным AVFoundation.

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

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

После R&D мы приступили к дизайну приложения. Процесс был устроен так:

Собрали мудборд с референсами. Завели страницу в Figma с примерами разных приложений. Мы в основном ориентировались на неоновые решения на тёмном фоне, и заказчик был на 100% согласен. Всё-таки «NFT-мэшап» звучит как нечто современное и технологичное, поэтому приложение и должно было выглядеть немного футуристично.

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

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

Подготовили подробный прототип. Учли выбранные цветовые решения и стали создавать образ интерфейса:

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

⚙ Увеличили ползунок громкости, а кнопку Mute убрали. Чтобы заглушить звук, достаточно нажать на иконку динамика или опустить ползунок вниз до конца.

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

⚙ Отказались от отдельной кнопки Undo, а кнопку Save — добавили: решили, что её важнее иметь под рукой.

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

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

В западной музыке прилагательные major и minor могут описывать интервал, аккорд, гамму или тональность. Например, если построить мажорную гамму от ноты до, получится гамма до мажор.

🎵 Нот всего семь, — на самом деле 12, но давайте для упрощения считать, что семь — и они повторяются по циклу: до, ре, ми, фа, соль, ля, си и снова до. Так что мажоров и миноров ограниченное количество, причём поднявшись на полный цикл тональностей вверх, вы придёте в ту же точку, откуда вышли.

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

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

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

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

Мы не успели дойти до реализации покупок через NFT. Пока мы занимались дизайном и разработкой, в Apple обновили политику по рецензии приложений в App Store, и теперь там фактически запрещены покупки или продажи NFT внутри приложений.

Поэтому концепция изменилась: от NFT отказались и решили сделать MVP только с функциями музыкального редактора. Из-за этого мы существенно переработали дизайн.

Пришлось поменять экран библиотеки. Оттуда исчез раздел с NFT и остался только список оригинальных треков:

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

В Тутти было много нестандартных элементов интерфейса — вот что оказалось самым сложным для наших iOS-разработчиков:

Реализовать drag&drop музыкальных фрагментов из библиотеки в рабочее пространство. Вокальные треки можно перемещать только в верхнюю дорожку, а музыку — в нижнюю. На макетах все фрагменты были одинакового размера, но в реальности они могли отличаться по длительности — это вызвало проблемы.

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

Собрать колесо выбора тональностей. Контролер со скроллом в 360° и таким большим количеством сегментов оказался интересной технической задачей. К тому же в каждом сегменте круга живут сразу две тональности — между ними тоже можно выбрать.

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

Провели R&D-фазу. Заказчик был готов сразу стартовать разработку, но мы предложили разбить проект на части и сначала убедиться в технической реализуемости идеи. На этом этапе описали пользовательские сценарии, отобрали технологии и создали прототип.

Выбрали визуальный стиль. Собрали мудборд, а затем выбрали цветовую схему. В основном ориентировались на неоновые решения на тёмном фоне.

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

Занялись разработкой. Drag&drop музыкальных фрагментов в рабочее пространство и колесо выбора тональностей оказались нетривиальными техническими задачами.

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

Над проектом работали:

👤 Проджект-менеджер

👤 UI/UX-дизайнер

👤 3 iOS-разработчика

👤 QA-специалист

⏲ Проект занял 8 месяцев.

Если интересно узнать больше о мобильной разработке и о том, как мы помогаем клиентам превращать идеи в цифровые продукты, буду рад видеть вас у себя в телеграме ↓

Делимся другими кейсами:

❤ Важное про разработку дейтинговых приложений

⌚ Рассказываем, как делать приложения для носимых устройств

🎟 Как мы сделали билетный агрегатор в США