Maver MIDI Editor
This project is still running and is under NDA clauses, making it not possible to share some details.
Maver is a pocket tool designed for musicians who need to study and compose on the fly. Maver allows the user to:
1. Create music by touching and dragging fingers in a 2D MIDI panel
2. Replay the recorded audio with embedded MIDI instruments
3. Export the recorded audio via email to continue working on user’s favourite digital audio workstation at home
Download Maver MIDI Editor. Available on AppStore
CLIENT
Ocarina Studios – Vancouver, BC, Canada
LOCATION
Remote
PERIOD
October 2022 to January 2023
SOFTWARES
Figma, Illustrator, Miro, Jira,
Confluence, Slack
DELIVERABLES
Research, styleguide, high fidelity prototype
Interactive Figma prototype link available on desktop and tablet versions.
Interactive Figma prototype link available on desktop and tablet versions.
The challenge
The application was almost done when the UX UI improvements has started. The project leaders decided to include two new tools in the application:
Virtual piano: in addition to the possibility of recording the sound to create the melody, the user could compose using the musical instrument.
Metronome: as a way to help musicians study and play better, a metronome would be developed to indicate musical tempo.
Furthermore, the application needed improvements to the interface of other screens, so that there was greater consistency in the user experience.
The solution
For the virtual piano, an interface was created that allows the user to have more or fewer keys on the screen using zoom and consequently reducing the size of each one, or to keep the size of the keys as large as possible and slide a bar so that had access to more octaves.
For the metronome, a visual element was created that replicates a physical metronome, but maintaining the same visual identity of the application.
Regarding to the other screens that were already implemented, some specific improvements were proposed in the color scheme and positioning of elements that did not require complex refactoring on the code.
The process
Benchmark: analyze competitors to get insights and create alternatives.
Interface: lo-fi and mid-fi prototypes creation to validate with the entire team.
Prototype: hi-fi prototype design and user tests before implementation by the development team.
