VoiceComposer GR3 - Paper Prototyping

These photos are of the second version of our prototype.

Our app runs on an android phone. The phone was represented by a 5''x7'' index card.

If the user tried to use any Android functionality besides VoiceComposer, they got this screen.

This screen appears when VoiceComposer is first opened. (The a, d & d thing stands for our names.) We have a section that says "No saved songs", and below that a "+ Start new song,"

Click "+Start new song." The menu bar at the top reads, from left to right, "Record, Play, To start | Undo, Redo | Save, Exit."

Below that to the left we have "Track Properties," with an image of a speaker and an eye (for toggle sound and toggle visible). We used to have a piano here, which you could tap to change the instrument, but we took that out in the second iteration. (On playback, you don't hear your own voice, but a piano or whatever instrument you selected.)

To the right of that we have the track, with each of the lines representing and labeled with a note (a, b, c...), the timer across the top denoting how far into the song we are, and a red vertical line where you can set the point in the song you're at by dragging it around with the dragger on the bottom. 

Finally, the bottom is labeled "Tracks", and has four colors (here labeled red, green, yellow, blue). Red currently has a box selection around it.

Say the user clicks blue to begin recording on the blue track. The square selection moves to blue, and the color of the timer line becomes blue.

The first task is to record a melody. When record is hit, the blue line progresses across the track. The user hums or sings into the phone and a line of the appropriate color is drawn.

When recording begins, all other icons on the menu gray out, and the record button turns into a stop button.

After the user finishes singing (three notes here, the first two of the same pitch), he presses stop. The menu returns to the original menu, and now we have some notes on the track.

Our second task was to edit a note. Say the user taps on one of these notes to edit it. The note plays, the interface zooms into the note (the note stays the same color, and if there were other notes nearby, they would also be visible in this view) and a transparent overlay pops up with these options. You can manipulate the note by dragging it or extending and shortening it (dragging a note causes it to play all the notes it's dragged to.)

We actually tried two alternatives for this note-editing view; this zoomed-in interface, and a not zoomed-in interface where you edit the note straight on the track. The zoom, we hoped, would require less accuracy of users to get the exact note lengths they want, but it was difficult to tell which was more effective in the paper prototype, because our "playback" wasn't very accurate anyway.

X exits this mode without changes, OK saves changes, and the trash can deletes the note.

Say the user drags the note down, then exits the mode. The note now appears lower on the track. If the note were dragged below the track, the lines on the track would become more dense to accommodate the lower note.

Our third task was to have the users add a harmony line. Many users didn't realize what the different colored tracks were for until we got to this task. This was one of the tasks that changed a lot between our prototypes; you used to access a different screen and get whole new tracks to add harmonies on, but for this iteration, we wanted tracks to act like layers in Photoshop.

The user picks the green track (changing the color of the timer line to green and making the blue lines on the screen transparent) and clicks record. The line again progresses across the screen, scrolling the timer when it nears the edge of the screen, and you can now record green lines without disturbing the blue lines. The blue notes play as you're singing, so that you can harmonize with yourself. If you were still on the blue track, the new lines would record over the old lines, and the old lines would not play back to you.

If you don't want the blue track to play back to you, you can mute that track using the icon on the track properties. None of our users used this function.

The completed piece. I don't think the green lines are actually supposed to overlap, though.

The user presses save, then exit. The song is now visible on the main screen, with its title, time of last edit, and options to rename, export, save as, and delete.

These buttons weren't actually implemented in our paper prototype. Our fourth task, "Export," was considered done when users found the button.