GR2 - Designs

Scenario

It's Friday afternoon. David just finished class and is thinking about his plans for tonight. His friends were talking about going to a frat party. He's thinking that his past week was really busy, so he wants to wind down and have some fun tonight. He searches for the party on the website Remote Playlist. He recognizes several songs by Usher and decides to preview "DJ Got Us Fallin' In Love" as he texts his friends about his dinner plans. He sees a new remix by David Guetta "Sweat" and after listening to it, decides to download it. After browsing the website for several minutes, he realizes that the playlist doesn't contain any music from his favorite artist, Flo Rida. He really wants to hear some of Flo Rida's hit songs at the party tonight, so he uploads "Who Dat Girl", "Club Can't Handle Me", and "Right Round".

Designs

Design #1

David navigates to the website to check what songs are going to be played at the party he'll be attending that evening.

David clicks the login link and enters in his email and password. He then searches for his party.

David selects his party from the list

David double-checks that this is his party by referencing the name and location. He then scrolls down to view the playlist for the party

David views the songs that have been voted on for the party

Not seeing his favorite song on the list, David clicks the upload a song link and uses the dialog to upload it.

Unsure of one of the songs in the playlist, David clicks the song to expand its box and previews it using the play button. Liking what he hears he clicks the thumbs up button to indicate his approval and also clicks the download link to add the song to his collection.

Analysis of Design #1

Learnability - The interface is very simple which lends itself to being very easy to learn for first-time users. Furthermore, the different features and functionalities are highlighted by using layouts and schemes that users will be familiar with. For example, the splash page has a very similar structure to google's home page, which will help users familiar with google's search to easily adapt to searching for events on remote playlist.

Visibility - The interface focuses primarily on the songs by listing them under the description of the event landing page. This highlights the individual songs and specifically their popularity by clearing showing their thumbs up and down in the same column.

Efficiency - This design's efficiency is based primarily on its simplicity. Its design lends itself to being highly efficient in displaying the right information to the user at the right times. For example, each song is displayed in the playlist with the information necessary to identify it and its popularity, and if the user wants to see additional information and options it can be clicked to expand.

Error prevention - One of the errors that the user might make is to find the wrong party.  By providing comprehensive information about the party, including the exact map location, this user interface prevents the user from making that error.

Design #2

Our second design pursues a different way of finding parties and displaying the music that is popular on its playlist. Instead of searching for the party name, the user will search for a particular location and a map of local parties will be displayed. The user can then select a party and views its "playlist." The playlist is actually a info-graphic of the genre of music that will be played at the particular party, with a large font-size for a genre suggesting it is more popular. When a user clicks a genre to explore the music, they are "voting on that genre" and it makes the font grow relatively larger than the other genres. They can then vote on particular songs of a genre, which is displayed next to the genre, and also upload their own music for that genre. 

David arrives at the homepage of Remote Playlist. He enters his username and password and is greeted by a map centered about his location.

The map displays markers where there are parties in the local area. He moves the map around and explores a bit. He then click on "Fenway Party."

Fenway Party page shows up and the information for the party is loaded into the header space. David is now looking at a splash page with the 4 primary genres of music that will be played at the party. The different sizes of the genres tells him that the party will be primarily feature Electro and Hip-Hop. David really likes K-Pop so he "votes" on that genre by clicking it. The font size for K-Pop grows bigger.

David now see s a list of music on the K-Pop side. Big Bang's hit song Nocturnal automatically starts playing and David decides to download it by clicking the arrow on the floating song control bar at the bottom of the page.

Analysis of Design #2

Learnability - While the interface itself is very simple, it may not be clear to a first user what the purpose of the page is. One of the reasons this is true is because the name "Remote Playlist" does not tells that it is a music recommendation site for parties. One way we can mitigate this problem is by adding a 3 step instruction on the homepage to explain to the user how to use the website.

Visibility - The playlist for the party is visualized differently in this design. Instead of focusing on the particular songs, this interface focuses on the genre of the music, which may be a better indicator of what a party might sound like and give a partygoer an online preview of the party. In sacrificing the visual focus on the specific songs, we visualize the over party in a simpler way.

Efficiency - This design is efficient in that the user does not need to search for the party by name, because once the location of the user is determined, the map will show him where the parties are. This is a strong design decision that focus on usability because if the user does not remember the name of the party but knows where it's going to be hosted, he can still find the party on the map.

Error Prevention - One of the errors that a user might make is to click on a genre without knowing that the user is voting for that genre to be featured at the party. This may be rectified by showing the user a small balloon tool tip that explain the info-graphic.

Design #3

David arrives on the splash page of Remote Playlist and types in the name of the party he is going to this weekend.  He also has access to the

top parties in the area, and a list of favorite parties from number of user views.  

He is greeted with a short description about the party including a small map of where the party will be hosted. There are three tabs on the right that allow David to navigate the website. The Event tab, which is currently activated, displays the event information. The Music tab displays the playlist. The Upload tab allows the user to upload their own music. David, curious about the music available at the party, clicks the Music tab (note: the Playlist button also functions the same as the Music tab)

David goes through the song list, voting the songs on a rating of 1 to 5

As more and more users vote on a song's popularity, the icon changes color from a range of colors that diverge from red (a "hot song") to blue (a less popular song).  If a song is especially popular, the icon will start to flame.  

Now, the party information is displayed underneath the header. David sees several tags for different songs. Each tag has a "star" on the top right which is the way a user indicates his vote. To play a song, the user clicks an arrow on the bottom right which pulls down playback controls for that song. There's an extra tag that acts as a placeholder with the label "upload your song." The "upload your song" also functions at the Upload tab (not display on this sketch).

To get a final view of the most popular songs being played, David clicks the top 25 songs button, in which a list of the most popular songs are congregated, listing the title article, and overall rating. 

Analysis of Design #3

Learnability - This design should be fairly intuitive.  The user should be familiar with a simple search button , as well as the use of the 5 star rating system, playback, pause, fast forward and reverse buttons of a song.  Nonetheless the addition of certain features such as top parties, user favorites, and top 25 songs, as well as the use of color and texture does increase the learning curve in comparison to a simpler UI. 

Visibility -  This design utilizes a different approach.  Through its utilization of tabs, it separates the upload music page, the music, and the event description, simplifying the content for the user .   In addition, the use of flames as well as red and blue provides color and texture for a more sophisticated visual representation of a song's popularity. 

Efficiency -  This is efficient in the sense that a user can get quick access to a popular party or a user favorite with a click of a button instead of performing a user search.  

Error Prevention - When a user rates a particular song, it is possible that the user misclicks.  Thus, this design allows a user to rerate a song. 

Design #4

          For the following design, the title page will consist of a search box on the bottom, a dynamic view of search results,and a series of tabs on the left hand side for top party searches.  The purpose of the top party searches tab is to enhance user efficiency by gathering data on search history, and providing the top 5 searches as quick access options. An autocomplete functionality for the search box will help prevent user typos and errors.   In addition, an upload music button will be constantly present on the bottom of the page.  With its pop-up functionality, the idea is to enable the user to upload music to the site while still being able to download, vote, and listen to music.  As the user finds his playlist among the list of user searches, he will click on the link as soon as he or she finds a desired match.  The page will shift to the second window, in which the active playlist is now shown.  The playlist here can be organized by rank, title, and the artist, and provides a range of different functionalities.  The play button allows the user to play the particular song.  The yes/ no button is used to allow user feedback on a song's popularity, which will determine its relative ranking in the song list. In addition, a download button will be added to the rightmost section of each song. 

           Through this design, we provide a high degree of learnability, error detection, and efficiency in spite a slightly more visually complex interface.  What the search box gives up in visual simplicity, it enables the user to detect errors and to gain quick access to popular playlist options.  The play button, the yes/ no buttons, and the download button should be fairly self evident to the user.  In a few moments of time, the user should be able to quickly learn and adapt to this user interface.