The Set Builder is a crucial component of PsiLoops new "personal sets" project.
I started first with considering what is the best way to sort through a good quantity of files and select 6 of them for use. I decided that the users saved clips should be arranged in a list on the left hand side, with empty "buckets" on the right hand side. Incorporating drag and drop functionality, it's intuitive to "pick up" an audio clip from the list and drag it into an empty bucket. This has the added benefit of allowing the user to be able to choose in what order the loops are within their set.
The next concern was, if a customer wants to delete a clip how can they do that? There wasn't much room for a trash can icon, anywhere it could go seemed illogical. The best option was to incorporate deleting a file with the drag and drop functionality. Now, when a user picks up a clip, a trash can icon appear along with a half opacity strip across the bottom of the screen. This provides a "landing ground" for the user to drag and drop clips onto in order to delete them.
To indicate whether a bucket is full or not, an empty bucket has the same color fill as the background and says "empty" in light grey. A confirming green color plus the file name indicates that a bucket has been filled.
After all buckets have been filled, the Submit button is available to use. It's labeled "Build Set!" for added clarity and enthusiasm.
A crucial part of this Set Builder is the pop ups at the end that indicate the files are being processed. The final pop-up is also a call-to-action button, to start using your loops right away within the app!
This was the last step of a 3 part design process. The first was the menu update with buttons leading to the Loop Editor and Set Builder. The Loop Editor guides the user to the Set Builder, which in turn guides the user to using their loops right away within the app.
