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
This is the splash page, it's left clean and simple
This is a detailed view of the login form that would pop up when the login link is clicked.
This is the search results page after the user searches for an event
This is the landing page of an event after being clicked from the search results page
This is a detailed view of the playlist at the bottom of the event landing page
This is a detailed view of the upload form that pops up when the "upload a song" link is clicked
This is a detailed view of one of the songs after it's clicked. The panel expands to show play buttons and a download link
Design #2
Splash Page. The user arrives at the homepage and is greeted with a simple search bar. The instructions for using the site are also enumerated to give new users a very simple idea of what this site is all about.
Search Function. As the user types the name of the party into the search bar, there are automatic fill-in suggestions.
Search Results. After the user types "Enter" or hits the search button, he is shown a list of parties sorted by date.
Playlist Window. After the user clicks on an events, the event information populates the top header. The main windows displays the current list of songs. There is a play button to the left of the song and a download link to the right. There is also a thumbs up icon which acts as a "vote" button. Underneath the vote button, there is a number that indicates how many people voted for it.
Upload Bar. This bar is not shown in the previous picture but is meant to be at the bottom of the page at all times. When a user clicks the input box, there is a popup that allows the user to select a file from the computer.
Upload Bar Status. After the user selects the music file and hits "Upload", the bar is replaced with a progress bar and a "Cancel" button. Finally, there will be a message "Upload Successful" at the finish.
Append to Playlist. The new song will be displayed at the end of the list with 1 vote to start.
Design #3
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.