Lstnr+-+Final+Project+Report

We believe that the University of Maryland is home to many talented artists who struggle to get recognized simply because there is no effective way for them to gain exposure. We also believe that many students at the University of Maryland are interested in discovering new music by local artists but have no means to do so. With LSTNR students can learn about local talent and listen to music uploaded by the artists. LSTNR aims to address these problems by:
 * The Problem **
 * Exposing UMD artists to the campus community
 * Allowing UMD artists to track their popularity.
 * Helping UMD students discover new local artists.
 * Providing performance information to the UMD community.

**Credits ** Kevin:
 * Contributed to the proposal.
 * Contributed to user needs assignment.
 * Wrote the HTML structure and css for the fixed header on the first prototype.
 * Wrote the javascript functions for loading new pages on navigation click.
 * Added features to Eric’s improved prototype.
 * Browse Page, Media Icons, addressed usability issues.
 * wrote Javascript for various functions.
 * Did two user tests and provided Andrew with the test results.
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Contributed to the presentation slides.
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Contributed to the final report.

<span style="background-color: transparent; display: block; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;"> Andrew:
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Contributed to the proposal.
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Contributed to user needs assignment
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Produced the Home page of first prototype.
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Produced the Radio page of first prototype.
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Did 4 user tests.
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Completed the User Study assignment.
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Gathered artist data.

<span style="background-color: transparent; display: block; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;"> Eric:
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Contributed to the proposal
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Contributed significantly to user needs assignment
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Completed the music functionality of the first prototype
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Wrote the HTML and CSS for the redesigned prototype
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Wrote the JavaScript for the redesigned prototype
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Contributed to the presentation slides
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Contributed to the final report

**<span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Our Audience ** <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">LSTNR is targeted towards the entire UMD community. Specifically, UMD artists will be able to use LSTNR as a way to share their music and performance information. Other UMD students will have the opportunity to discover and rate campus talent. We believe there are several advantages to limiting our audience to the campus community.
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">By aiming for only UMD students, UMD artists will have a much better success rate at converting 'lstnrs' to fans
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Other competing websites are too broad, UMD artists will more than likely be lost among the thousands of other artists
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Our solution provides a way for UMD artists to connect directly with the people they play for at shows and concerts

**<span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Competing Solutions and Their Deficiencies **
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Facebook
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Often a user will have to “like” an artist before being able to listen to that artist’s music
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Myspace
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Considered past its prime
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Pandora
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Great for discovering new music, but lacking in user-artist interaction
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Youtube
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Forced video format, limited user-artist interaction
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Grooveshark
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">The service may be discontinued due to litigation
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Otherwise, limited user-artist interaction

**<span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Our Solution ** Home Page - Radio Page (empty) -     Browse Artists Page -      Specific Artist Page -      Radio Page (Song playing, non-empty playlist, after some songs already played / skipped) After logging in as Artist Nujabes. An artist's 'My Profile' page Users are greeted with the main page, presenting them with the featured artist (something that would change everyday). A random selection of artists are displayed below to encourage users to discover new music. When a user visits the radio page, it shows information on the current song, links to artists recently played, and finally the playlist for upcoming songs. In the beginning this is empty, but after browsing artists through the browse artist page, and selecting an artist, they are presented with information on the specific artist, with links to songs and descriptions of upcoming shows. A radio page after some listening is shown. After logging in, the My Profile navigation tab becomes visible. When the user clicks on that tab he or she will be presented with a slightly modified profile page that allows for profile editing. However we have not implemented profile editing yet. 3. The user can get to any of the 3 main pages (Home, Radio, and Browse Artists) from anywhere on the website. If logged in, the user can also access his/her 'My Profile' page from anywhere on the website. The user can get to any artist's profile page using the Search for an Artist feature from anywhere on the website. On the Home page the user can -> go to the featured artist's page by clicking on the link or image -> go to any of four randomly featured artists by clicking one of images or links at the bottom of the home page On the Browse Artist Page the user can -> go to any artist displayed in the list by clicking the corresponding image or link -> Change the genre and list of displayed artists by using the drop down menu On the Radio page the user can -> go to the profile page of the artist whose song is currently playing -> go to the profile page of the artist of any of the three most recently played songs -> delete songs currently on the playlist On an artist's profile page the user can -> become a fan of the artist by clicking the "Become a fan" link -> add music from the list of songs On the user's 'My profile page' the user can -> edit their own profile by clicking the 'Edit your profile' link 4. We did not give any assistance to our users hoping that the interface would be easy to navigate. Fortunately most users have experience with similar interfaces and users did not report problems navigating our website. **<span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Usability Study ** <span style="background-color: transparent; display: block; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;"> Our test subjects: 1. 22 year old, female UMD student who is always looking for new music. 2. 20 year old, female UMD student who primarily hears of new music from Youtube. 3. 23 year old, female UMD alumna who tries to stay connected with the university whenever she can. She hears of new music from friends. 4. 22 year old, male UMD student who uses many online resources to find new artists but does not know howto find UMD student artists. 5. 20 year old female college student. She goes to the University of Maryland but does not know any UMD artists. 6. 23 year old male. This person does not know any UMD artists and is not affiliated in any way with the university.

All of our test subjects were in their early 20’s. As a pretest we asked the test subjects to describe their musical taste and how they discover new artists. When asked if it was easy to find UMD artists all participants answered no.

We only briefly described the purpose of our web application before asking each user to complete a list of tasks which we believe to be representative of the tasks real users would perform on a regular basis.

<span style="background-color: #ffffff; display: block; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;"> 1. Log into Lstnr (pretend your username is testuser) 2. Find the featured artist’s profile page. 3. Find The Beatles’ next show 4. Listen to a song by any artist 5. Pause the song. 6. Vote for that song.

<span style="background-color: transparent; display: block; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;"> After the test users completed these set of tasks we asked how strongly they agreed with three different statements.

<span style="background-color: transparent; display: block; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;"> During the test, our users noted several problems:


 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">On the home page many users expected the featured artist image to be a link to the featured artist’s profile page.
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Many users complained that the links were not obviously differentiated from the text.
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Many users did not like the text radio player controls and instead wanted to see the standard media player icons.

<span style="background-color: transparent; display: block; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;"> We addressed all of these issues.
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">When users click the featured artists image they are redirected to the profile page.
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Links are now white and text remains grey.
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">We replaced text player controls with more standard media player icons that match our color scheme.

**<span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Open Issues **
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Log in feature is almost purely superficial, with no actual user security
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Becoming a fan and editing profiles were unimplemented
 * <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Navigation buttons did not function properly (i.e. back button will destroy the page’s state)

**<span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Continued Work ** <span style="background-color: transparent; font-family: Arial; font-size: 15px; text-decoration: none; vertical-align: baseline;">Given time to continue implementing the project, we feel we would focus on implementing a true log-in system with security. Furthermore, we would aim to have separate interfaces for users and artists, considering they both have different needs. Profile editing would also be a priority, as it is critical in allowing an artist to communicate information. Having the browser navigation buttons operate properly would also help users maintain a consistent mental model of how the site works.

The final goal for our project would be to have a per-genre radio similar to Pandora and other music discovery services. Users would be able to add the songs they wanted to listen to, and our web application would continuously add songs to their playlist based on their listening preferences. This would meet our ambition of helping listeners discover more local music.