Туттии: сложный интерфейс
и MVP музыкального редактора
для iOS за 8 месяцев
Мы помогли заказчикам формализовать задачу и составить ТЗ.
Провели исследование и анализ конкурентов, предложили технологии для разработки, а затем реализовали 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.
Заказчики были готовы сразу начать разработку, но мы предложили разбить проект на части и сначала убедиться в технической реализуемости идеи.Описали ключевые пользовательские сценарии в формате user stories.Отобрали технологии и изучили, как устроена работа с аудиофайлами. Проанализировали существующие решения и поняли, что на первом этапе не потребуется создавать свои инструменты для изменения тональности и темпа песен. Для MVP приложения хватило возможностей AudioKit — это open-source библиотека для синтеза, обработки и анализа звука для iOS и macOS.
Продумали структуру приложения. Подготовили схему разделов, оттолкнувшись от описания пользовательских сценариев.Основных разделов было четыре:
Собрали раздел для поиска композиций других пользователей. Там можно искать чужие ремиксы по жанру или настроению.