I started with the waveform at the top of the page. In the app, this waveform changes from a timeline waveform to a spectrum analyzer waveform when you tap on it.
Beneath this I made the drum set section. It includes the BPM slider, the drum set menu button, left and right arrows for changing the loops, and a text box for displaying which loop is being played and from what drum set.
To the right of this I added the play/pause button and the record button. These are important features, nothing works without pressing play first. So it is at the top-right of the page and clearly visible. Beneath those buttons is a switch for turning on/off the microphone. It is clearly labeled and it's function is made clearer using red and green indicators.
Beneath the drumset is the (first) melody loop section. There are two rows of 6 buttons, with each button representing an audio loop. When the button is tapped, a progress indicator begins to circle around the switch. This progress indicator shows how far through the loop you are, which is useful information for timing the on/off of the melody loops.
Each row of 6 loops can be swapped out with another set of melody loops by swiping open the menu on the right side of the screen.
Beneath the melody loops section is the Sweeps/One Shots section. The sweeps are upwards or downwards sound effects that add momentum or build to a song. These are indicated by up and down arrows. Part of the aesthetic of this app is to use simple original icons, akin to apps from the early days of the iPhone.
The One Shots are square buttons that light up green when being used. They are simple yet functional. Similar to the melody loops section, they have a menu for swapping out sets of 4 one shot audio samples.
On the left side of the Melody Loop Section and the One Shots section are vertical bars with a button. These are volume sliders and they adjust the volume of the loops in each section.
Tapping the arrow icon will swap out the One Shots section with a second Melody Loops section. This allows for 24 loops to be accessed at a time and greatly enhances the functionality of the app!
Beneath that section and on the left is the Effects section. The challenge with this section was how to get a highly adjustable reverb out of such a small space. The solution was a button for turning reverb on or off, and a pop open column of numbers 1-10 representing the reverb 0-100%. This allows the user to either select a certain reverb level and turn it on so that the effect occurs right away, or they can first turn on the reverb and then use the 0-10 column to slowly increase the reverb from 0 to however much is desired. The combination of the on/off button and the level slider turned out to be a really nice method for keeping the reverb effect compact yet intuitive.
Above the reverb are up and down arrows indicating the high and low pass filters. The arrow icons have a green border when activated. This section, while functional, could use some work.
To the right of the effects box, you have 4 buttons. These are quick and easy to access buttons that activate the shuffle, access the Info page, and access recorded files. The lower button is for subscribing and maintaining your subscription.
One challenge in designing this main page was how to incorporate artistic elements. There are so many buttons and real estate is limited, so the design of the section-borders had to be precise. I chose a retro-modern aesthetic with strong orange foreground and black background elements.
