Maver MIDI Editor
Este projeto ainda está em execução e está sob cláusulas de sigilo industrial, impossibilitando o compartilhamento de alguns detalhes.
Maver é uma ferramenta de bolso projetada para músicos que precisam estudar e compor rapidamente. Maver permite ao usuário:
1. Crie música tocando e arrastando os dedos em um painel MIDI 2D
2. Reproduza o áudio gravado com instrumentos MIDI incorporados
3. Exporte o áudio gravado por e-mail para continuar trabalhando na estação de trabalho de áudio digital favorita do usuário em casa
Baixe o Maver MIDIEditor. Available on AppStore
CLIENTE
Ocarina Studios – Vancouver, BC, Canada
TIPO DE TRABALHO
Remoto
PERÍODO
Outubro de 2022 a Janeiro de 2023
PROGRAMAS
Figma, Illustrator, Miro, Jira,
Confluence, Slack
ENTREGÁVEIS
Pesquisa, guia de estilo, protótipo de alta fidelidade
Link do protótipo interativo no Figma disponível nas versões do site para desktop e tablet.
Link do protótipo interativo no Figma disponível nas versões do site para desktop e tablet.
O Desafio
O aplicativo estava quase pronto quando as melhorias da UI UX foram iniciadas. Os líderes do projeto decidiram incluir duas novas ferramentas na aplicação:
Piano virtual: além da possibilidade de gravar o som para criar a melodia, o usuário poderia compor utilizando o instrumento musical.
Metrônomo: como forma de ajudar os músicos a estudar e tocar melhor, seria desenvolvido um metrônomo para indicar o andamento musical.
Além disso, o aplicativo precisava de melhorias na interface das demais telas, para que houvesse maior consistência na experiência do usuário.
A Solução
Para o piano virtual foi criada uma interface que permite ao usuário ter mais ou menos teclas na tela utilizando o zoom e consequentemente reduzindo o tamanho de cada uma, ou manter o tamanho das teclas o maior possível e deslizar uma barra para que tinha acesso a mais oitavas.
Para o metrônomo foi criado um elemento visual que replica um metrônomo físico, mas mantendo a mesma identidade visual do aplicativo.
Em relação às demais telas já implementadas, foram propostas algumas melhorias pontuais no esquema de cores e posicionamento de elementos que não necessitavam de refatorações complexas no código.
O Processo
Benchmark: analise os concorrentes para obter insights e criar alternativas.
Interface: criação de protótipos lo-fi e mid-fi para validação com toda a equipe.
Protótipo: design de protótipo em alta fidelidade e testes de usuário antes da implementação pela equipe de desenvolvimento.
