Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Images - Listener Interface

Description


When a user initially opens the application, they see this default home  
page. They are prompted to "submit a dj code." This screen was 
created after the entire app was completed. It's simply a less detailed 
version of the home screen that we previously developed (explained in
the next image).

Initially, this screen kept the rating buttons, but after the user testing
period, we decided to remove them. Also, to make it easier for users,
we made the DJ code case insensitive.


After submitting a valid "DJ code," information begins to populate the
app. The user can see the name of the song currently playing and "rate"
it either up or down. There is also a "tweet" button that would allow the 
listener to tweet about the event. There is also a navigation bar to let
the user move between the other screens.

The main goal for this page was to make it as simple as possible. After
the heuristic evaluations, we decided to change "rate this song" to 
"rate this party" in an attempt to give users a better understanding of
what exactly they were rating. After submitting the dj code, we initially
left it on the screen, but after doing the user tests, we decided to 
remove it.


In this screen, the user sees the list of songs that have been played.
When the user clicks on a song (i.e. after clicking on "Lights"), the
selection expands, showing the album cover, the artist, and the genre.

Initially, we planned on presenting as much information on the song 
as possible. However, after the heuristic evaluations, we decided to
remove most of the information (like year produced, record label, etc.).


This is the voting screen. When the DJ selects songs for the listeners
to vote from, they are shown here. Each voting option shows the name
of the song, the artist, and the current number of votes.

Implementation

...

For mackVibes, we used HTML/CSS/Jquery to design and implement the front end. Initially we chose to use twitter bootstrap to design the application, but this implementation decision caused problems, and we found that using the jquery mobile library instead, provided for an easier designing stage, as well as a consistency for mobile web applications that we could not achieve using twitter bootstrap. 

On the mobile application side we also used echonest, an api used to gather and display information about a song, artist, or track, and utilized this to present important information about songs played by the DJ.

For the backend we utilized node.js as well as bcrypt.js files to sure up the password encryption. 

Evaluation

...

Users:

 Because we had 2 interfaces for our project, we had to pull two different types of users. 

  • User type 1-DJ: A College DJ that often Dj's at parties whether for pay or free.
  • User Type 2:-Party-goer: A College student that frequents parties

Of these user types we had 3 Dj's

  • DJ 1: A Senior at MIT, with 4 years of experience Dj'ing fraternity parties.
  • DJ 2: A Junior at MIT, with only about 1 1/2 years of experience DJ'ing fraternity parties
  • DJ 3: A Freshman at MIT, who has only DJ'ed at about 2 parties thus far in his career  

Briefing:

tasks:

Description of User Test

...

...