Как я создала концепцию и визуал Dance AI: Сервис для хореографов с искусственным интеллектом.
Всем привет! Меня зовут Елизавета Павлова, я дизайнер UX/UI, WEB-дизайнер. Сегодня поделюсь одним из последних проектов.
О проекте
Когда ко мне обратились с запросом разработать концепт сервиса Dance AI, я поняла, что это будет уникальный и интересный проект.
Основная цель Dance AI - помочь хореографам составлять схемы танцев с помощью искусственного интеллекта. Моя задача как дизайнера была в том, чтобы определить основные функции сервиса и создать концепт интерфейса. В этой статье я расскажу, как я работала над этим проектом и справлялась с основными вызовами.
История создания проекта
Идея создания Dance AI появилась из необходимости упростить и улучшить процесс создания танцевальных схем для хореографов. Мы заметили, что большинство существующих инструментов либо слишком сложны, либо ограничены функционально. Поэтому возникла цель создать интуитивно понятный и функциональный сервис, который поможет хореографам быстро и эффективно разрабатывать танцевальные номера.
Исследование.
1. Анализ конкурентов
Первым шагом в работе над проектом стал анализ конкурентов. Я изучила мобильные приложения, такие как Choreographic, Move2Move, Dance Firmation, DanceApp.us, а также веб-сервис DanceFormationApp. Некоторые приложения были доступны только при покупке подписки. Кроме того, я проанализировала похожие сервисы, такие как Clideo.com, Online-Video-Cutter.com, Clipchamp.com, DanceForms, Figma и Capcut.
Одним из основных вызовов было то, что все основные конкуренты используют мобильные приложения, а не веб-версии. Это создало дополнительную сложность, поскольку многие хореографы предпочитают работать на компьютере. Мне нужно было продумать и создать удобный и функциональный интерфейс для веб-версии (адаптивный под любое устройство), что значительно расширило возможности сервиса и сделало его уникальным.
Я рассмотрела интерфейсы этих сервисов и выявила их плюсы и минусы. Основные выводы были следующие:
- Важно показать пользователю интерфейс и возможности сервиса до покупки подписки.
- Нужна веб-версия сервиса.
- Обязательно добавить музыкальную дорожку и её синхронизацию с танцевальной схемой.
2. Анализ аудитории
Чтобы лучше понять пользователей, я изучила отзывы на сервисах конкурентов и провела интервью с хореографом. На основании этого определила основные потребности и проблемы, с которыми сталкиваются пользователи:
Потребности:
- Возможность менять направление движения между расстановками.
- Использование сервиса как на мобильном устройстве, так и на компьютере.
Проблемы:
- Платная подписка до знакомства с сервисом.
- Невозможность изменить цвет фигуры или переименовать танцора.
- Невозможность отправить проект танцорам.
Интервью с хореографом помогло выявить еще несколько важных моментов:
- Нужно добавить возможность делиться схемой танца.
- Не хватает настроек для переходов между расстановками по паттернам (основные: круг, полукруг, квадрат, линия).
- Было бы удобно менять тип фигуры (кроме круга добавить треугольник, квадрат): так можно задавать пол, тип танцора и другие параментры на усмотрение хореографа.
3. Проработка сценариев
На основании полученных данных я разработала четыре основных сценария использования сервиса:
- Создание схемы до регистрации.
- Регистрация на сервисе.
- Отправка схемы танцору.
- Просмотр схемы танцором на мобильном устройстве.
Эти сценарии я оформила в пользовательскую историю: «Я хочу ознакомиться с сервисом, попробовать создать схему, посмотреть результат и отправить эту схему своему танцору». Для анализа сценариев использовалась карта пути пользователя (CJM), доступна по ссылке.
4. Проработка структуры сервиса
Основываясь на анализе конкурентов и запросах пользователей, я разработала структуру сервиса, включающую все необходимые разделы и функциональные элементы. Структура сервиса доступна по ссылке.
В структуре основной акцент делала на экране редактора. Необходимо было предусмотреть необходимые элементы и настройки, такие как добавление танцора, добавление паттерна (элемента движения танцоров), добавление реквизита, добавление музыкальной дорожки.
5. Определение визуального стиля
Визуальный стиль был основан на следующих ассоциациях:
- Гибкость (художественность).
- Динамичность (ассоциируется с танцем).
- Технологичность (введение помощника AI).
- Эстетичность (сфера танца).
Для создания мудборда я выбрала такие элементы:
- Цветовая палитра: глубокий синий (технологичность и воздушность), акцентные оранжевый (динамичность) и бирюзовый (легкость, плавность).
- Типографика: для заголовков был выбран шрифт Cambria (плавный, мягкий), а для основного текста - Inter (технологичный).
Визуал
1. Создание визуального стиля
Я продумала сочетания цветов и шрифтов и создала стили в Figma.
Для заголовков был выбран немного художественный шрифт, с плавными линиями. Для основного текста, который используется в редакторе, был выбран шрифт, близкий к печатному, машинному. Так были связаны два настроения этого проекта: художественность и технологичность.
2. Создание макетов сайта
Для утверждения структуры интерфейса я подготовила схематичные вайрфреймы (экраны будущего сервиса), что позволило сэкономить время и согласовать с заказчиком структуру сервиса быстро.
3. Создание UI-кита
Я создала основные компоненты, такие как кнопки, иконки, боковое меню, логотип, кнопка помощника AI и шапка сайта. Это необходимо для того, чтобы на всех страницах сервиса повторяющиеся элементы (кнопки, иконки и т.д.) были одинаковыми.
4. Создание дизайна экранов
С использованием компонентов UI-кита я собрала экраны сайта. Также был подготовлен один экран просмотра схемы танца с мобильного устройства.
На этом экране пользователь знакомится со структурой редактора, может оценить простоту и интуитивность в работе над схемой танца.
Технические детали
Отзыв заказчика
Планы на будущее
В ближайших планах мы планируем добавить новые функции, такие как улучшенные инструменты для создания переходов между танцевальными фигурами и интеграцию движений под музыкальную дорожку. Кроме того, в доработке нуждается интерфейс (визуал) помощника искусственного интеллекта.
Результаты
В итоге был определён и проработан базовый функционал сервиса. Разработаны экраны, предусмотрен помощник AI и создан первый прототип, в котором можно протестировать работу сервиса.
Dance AI готов помочь хореографам воплощать их идеи в жизнь и создавать потрясающие танцевальные номера.
Заключение
Работа над Dance AI стала для меня уникальным опытом. Я горжусь тем, что удалось создать концепцию сервиса, который действительно помогает хореографам в их творческом процессе. Кроме того, сервис может стать помощником не только для профессиональных хореографов, но и для всех любителей танцев. Надеюсь, в скором времени проект будет доработан, разработан и реализован для использования.