Туттии: сложный интерфейс и MVP музыкального редактора для iOS за 8 месяцев

Мы помогли заказчикам формализовать задачу и составить ТЗ.

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

Пустое рабочее пространство заполняется фрагментами из библиотеки.

Клиент

стартап Туттии из Калифорнии

К нам обратились два основателя стартапа, которые раньше не занимались ИТ-продуктами. Оба увлекались электронной музыкой и пришли к нам с идеей мобильного музыкального редактора. По их задумке он позволил бы, например, взять голос Dua Lipa, положить на музыку Джастина Бибера и создать новый трек.

Задача

помочь превратить идею в ИТ-продукт и разработать приложение

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

Что такое ремикс

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

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

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

1. Исследование

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

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

Заказчики были готовы сразу начать разработку, но мы предложили разбить проект на части и сначала убедиться в технической реализуемости идеи.Описали ключевые пользовательские сценарии в формате user stories.Отобрали технологии и изучили, как устроена работа с аудиофайлами. Проанализировали существующие решения и поняли, что на первом этапе не потребуется создавать свои инструменты для изменения тональности и темпа песен. Для MVP приложения хватило возможностей AudioKit — это open-source библиотека для синтеза, обработки и анализа звука для iOS и macOS.

Сделали первый прототип интерфейса с опорой на референсы.

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

приветственные экраны (Onboarding);
рабочее пространство (Editor);
библиотека пользователя (My library);
поиск по исполнителям, трекам и ремиксам (Explore).

2. Выбор визуального стиля

Собрали мудборд с примерами разных приложений в Figma. В основном ориентировались на неоновые решения на тёмном фоне — заказчики одобрили.

Экран покупки песни че�рез NFT, от которого пришлось отказаться из-за изменений политики рецензии приложений, и элементы рабочего пространства — секции вокала и инструментала, колесо тональностей и управление громкостью.

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

3. Интерфейс, прототипирование и дизайн

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

Подготовили детализированный прототип с учётом выбранных цветовых решений и стали создавать образ интерфейса:

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

Три итерации рабочего пространства с разным расположением навигационных элементов.

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

Колесо выбора тональностей. Сверху и снизу в парах — параллельные мажор и минор, выбор октавы.

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

4. Разработка

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

Элементы сортировки и фильтров для сегментов и стемов.

Drag&drop аудио-фрагментов из библиотеки в рабочее пространство. Вокальные треки можно перемещать только в верхнюю дорожку, а музыку — в нижнюю. Когда пользователь перетаскивает музыкальный фрагмент из библиотеки в рабочее пространство, он должен заранее увидеть, как под фрагмент освободится место. Для этого нужно отрисовывать предварительный вид рабочего пространства с учётом длительности нового аудио.Собрали колесо выбора тональностей. Это интуитивный и удобный способ выбирать тональности: можно крутить колесо и делать фрагмент выше или ниже по звуку.

Приложение в сторе

App Store ↗

Итоги

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

Мы с нуля спроектировали интерфейс. Сначала работали с прототипами, затем собрали дизайн для всех экранов приложения. Придумали несколько инструментов, которые помогают интуитивно работать с аудио — создать свой ремикс в Туттии сможет любой человек без опыта в музыке.И в итоге разработали iOS-приложение — полностью реализовали свои задумки и создали полноценный музыкальный редактор для ремиксов на iPhone.

Команда

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

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

Backend-разработчик (1)

Дизайнер (1)

Тестировщик (1)

Менеджер (1)