You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 12 Next »

GR3: Paper Prototyping

Project: Pitch Perfect

Prototype Photos

Prototype 1

Description

This is an overview of the home page.

The feed is on a transparency because it is supposed to be interactive and change if the user made a recording or comments. Recordings in the feed are links that will take the user directly to the recording.

The site is navigated by using the drop-down menu which would appear when pressing the arrow next to the user name. The "1" next to Inbox will appear if there are messages and will go away once the user visits the inbox.

This sheet is the backdrop for both "Sing" and "Members" pages. As you can see, most of the prototype involved transparencies and moving parts.

This is the "Sing" section. The Practice and Comments are tabs. Under Practice, the user can check off certain options for recording/playback.

This is still within the "Sing" section, but the user has selected the Comments tab. The user can respond to the comment by pressing the mail icon next.

This is the Member Directory. The bar on the left side indicates which user is currently selected. A user profile consists of links to that user's recordings.

This is the Inbox. New messages are marked in red on the side bar. There should be a tab on the side that will indicate which conversation is currently opened.

Briefing

Our project's name is Pitch Perfect and we are creating a website for a cappella singers. It can be hard for an cappella singer to perfect his individual parts when singing in a musical group. Pitch Perfect will allow users to practice a cappella songs online, with an emphasis on social interactions among the group. The site allows users to practice their parts with the other voice parts in the background to simulate singing with the whole a cappella group. Members can listen to other people's recordings and make comments.

For the purpose of this test, you will be an a cappella singer named Anna who wants to practice her solo for an upcoming performance. There will be 3 tasks total. Don't worry if you have no previous music experience- the tasks use very minimal music terminology. While you are doing your tasks, there is a possibility that a notification may come up. Feel free to address the notification first and go back to the task you were working on. Our prototype is very new, so any problems you encounter are the computer system's fault. 

Jackie will be observing you throughout the tasks. Your responses will be kept completely confidential and if you would like to stop at any point, just let me know. Any questions before we begin?

Scenario Tasks

Task 1
Make a recording of the song "Good Riddance". For the options on that page, please set the metronome to 110 and have additional voice parts in the background. You may sing for as long as you would like. After recording your singing, please save your recording as "Super Solo".

Task 2
Go listen to Ben Recording 1. Make a comment on his recording. You can write whatever message you like. (smile)

Task 3
Take a look to see if you have any comments on your recording "Super Solo" and take any extra actions needed.

Extra Task
Oh, you got a message! Read the message and respond if necessary.

Observations

Prototype Iteration

Prototype 2

Description

The drop-down menu was very confusing for the first group of testers, so we decided to replace it by placing the menu in the top bar instead. When users went to "My Songs", they would be taken to a page where they could select songs. However, the Practice sidebar would be present even if no song was selected. We removed the sidebar when the user first goes to their songs because users were confused by having the Metronome and other options when there was no sheet music yet.

Originally to leave a comment, the user would have to press the "Add a comment" button at top. We changed this so that users could just leave a comment at the bottom of the comment tab (makes it more like gchat). This seemed more efficient than using a pop-up to leave a comment.

In the first prototype, if the user pressed the mail button in the member directory, he would be taken to the inbox page.  However, we decided that approach had poor efficiency, since the user might not want to be on the inbox page, so instead, we made it so that a popup would appear if the user wanted to compose a message from the recipient's profile.

IMAGE ON ITS WAY!

The sidebar of the member directory appears even when a user is browsing the profile page of another member, but in reality, it's unlikely that someone will need a sidebar full of the links to other member's pages when they're already at a profile page.  Thus, our new member directory consists of an initial portal page full of clickable icons that link to each member's profile page, and once the user enters a page, the profile takes up the entire window, with a back button in the top left corner to allow the user to return to the portal page.

IMAGE ON ITS WAY!

The content pane of a member's profile page is hopelessly cluttered, causing the page's learnability to be low.  Furthermore, the recordings section of the profile page is emphasized to the user, since it was placed in a box, but that was not intended.  To fix this, we converted the member profile page into a page of four panes: Info, Pieces, Availability (expressed as a calendar), and Recordings.  We feel that the new layout does not emphasize any single part of the profile, and it is a lot more glance-able.

  • No labels