I was tasked with designing a timeline based loop editor.
The editor needed to be able to import the users wav file, cut out 8 bar sections, and save them to a folder for display and use in the Set Builder.
I started with considering the simplest import method. I decided that when the user clicks on the Loop Editor button, the import screen will pop up right away. This allows for quick and easy access, and I believe the concept of Loop Editor is intuitive enough that a dedicated "Import" button is not necessary.
The first page is the import page. This allows users to select a file from their phone to use in the editor.
The next page is the main Editor page. At the mid-top of the screen is the timeline editor. It has a focus box in the center with 8 sections divided by dotted lines. This represents the 8 bar clip that will be saved. The users track imports and the waveform is analyzed and generate in the timeline editor. The user scrolls their file left and right to select 8 bar sections.
The Save Clip button is used to save an 8 bar clip from the users file. These clips are displayed underneath the editor. The user can rename the clips and preview them.
A play/pause button is crucial for the user to be able to preview their sample before clipping it out of the imported file. It is placed in the expected location, front and center beneath the editor.
The Submit button takes these clips and prepares them for the Set Builder.
Part of designing the Loop Editor was designing the pop-ups that occur during processing. I do not know if they will be necessary, but I provided mock-ups for processing pop-ups that could occur at different points while using the editor, such as import and export. These pop-ups needed to be informative, brief, and most importantly provide a cancel or exit button to stop the process if it's taking too long.
At the end of the loop editor, the user is prompted to continue the process by tapping the Build Set! button in the pop-up. This will direct them to the Set Builder where they can take their saved clips and turn them into sets of 6 loops to be used within the app.
