...
Final Design | Description |
|---|---|
| This is an overview of the home page. Two main changes occurred from our initial concept to the final version. In our original design, we had the Director's Announcements at the top of the page above the feed. From heuristic evaluations and user testing, we learned that people were confused because they thought the home feed was meant to be a response to the Director's Announcements instead of as a general feed. Therefore, we decided to move the Director's Announcements to the left side of the page, grayed out with the Upcoming Events section, to indicate a section that cannot be edited and is not the main focus of the page. |
| Users can write comments that show up on the home feed. The name of the person who commented is clickable and takes you to his profile. |
| Users can select a song to practice. During paper prototyping and user testingheuristic evaluation, we originally just had the "Choose a Song!" header by itself. People told us that they were unsure what choosing a song did so we decided to add a subtitle "Listen, Comment, Record" to make it more obvious. |
| This is an overview of the Practice section. The Practice and Record options are on either side of the sheet music. In the paper prototype, the practice options and the record options were both on the left side under different tabs. We decided to separate them into two different columns from paper prototyping since users wanted to see comments and practice options at the same time. |
| These are the options available when practicing the song. The play options were originally just checkboxes but paper prototyping and heuristic evaluation found the checkboxes to be confusing. We decided to use slider bars instead. |
| Users can record songs on the right side of the Practice page. |
| Users can see their recordings on this tab and other people's recordings on the other tab. Originally, users would have a dropdown menu that had a list of all of the recordings a user can comment on. However, user testing found that it was really inefficient to go through all the recordings to find a specific one. We decided to separate your recordings from other people's recordings and also add a search functionality to find a specific recording. It was also pointed out that comments could become very long, so we made the comments collapsible by clicking on the recording like an accordion. |
| This is the Member Directory. In the paper prototype, we had a list of members on the left sidebar. During paper prototyping, some people thought that it was not necessary to have the left sidebar since it took up a lot of space. Therefore, we decided to have a main page that displays all of the users with their icons instead. |
| This is a user profile. In the computer prototype, the list of available times/days used to just be a box that showed weekday availability. From user testingheuristic evaluation, people mentioned that having an actual calendar with more than one week would be more useful, so we decided to incorporate Google calendars for users to easily integrate. |
| Originally, we planned to have an inbox that would allow users to message each other. Due to time constraints, we decided not to implement this feature in the final version of the site because we thought that the inbox was not as crucial as other features. |
...
We used an open-source library called Recording.js, which uses Javascript and Flash to enable recording and playback capabilities. We were unable to persist recordings due to time constraints, but we think that for the purpose of UI design, this is not a serious problem. The lack of persistence did impact the usability of our user interface because we had to make explicit that creating a new recording would overwrite the old recording to testers.
Comments
A set of comments exists for each recording for simple organization. These were implemented as collapsible elements using Bootstrap so long comment chains can be hidden for a recording that the user is not looking at. Each accordion heading displays information about the recording and allows it to be played, while the inner accordion sections held comments. Comments are not persisted because it was too difficult to persist recordings, and it only makes sense to persist comments if recordings can be persisted. We believe this is not a big issue because this class is focused on UI design rather than backend implementation.
...
- Practice singing the song "The Sign". For the play options on that page, please set the Volume to 85%, the Tempo to 130 beats/min, and include the Metronome. You may practice for as long as you would like.
- Now, make a recording of the song "The Sign". Feel free to change the play options and sing for however long you would like. After recording your singing, please save your recording as "Super Solo".
- Listen to Ben's recording of "The Sign" called "Tenor Recording". Make a comment on his recording. You can write whatever message you like.
- Check Ben's profile to see when he is available to practice.
...
Users
...
- The A Cappella Veteran (same person that we interviewed for GR1!)
- The A Cappella Beginner
- The Musical Theater Veteran
...