Новый кейс
AI-аналитик для морского грузоперевозчика
AI-аналитик для морского перевозчика: объединяет данные из систем и отвечает в Slack, ускоряя решения.
8 (800) 533–89–88hello@code9.studio
141100, Московская область, г. Щёлково,
1-й Советский пер, стр. 25Б, к. 11,
пом. 3, офис 443
Телеграм
тг: КОД9
тг: Эд Хорьков
Ютуб
Рутуб
ВК Видео
Яндекс Подкасты
ВК
VC.RU
Беханс

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

Мы помогли заказчикам формализовать задачу и составить техническое задание (ТЗ) для создания MVP (минимально жизнеспособной версии продукта).
Провели исследование и анализ конкурентов, предложили технологии для разработки, 
а затем реализовали 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)
Бэкенд-разработчик (1)
Дизайнер (1)
Тестировщик (1)
Менеджер (1)