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

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

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

Клиент

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

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

Задача

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итоги

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

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