You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 50 Next »

Design

Images - DJ Interface

Description


Heuristic Evaluation:
  • Added a log-in and sign in form page to introduce the app (Consistency and Standards)


Heuristic Evaluation
  • Removed album title from previous winner (Recognition Over Recall)
  • Added DJ feedback graph to show user input (System and Real World)
  • Changed "Search" to "Search by song name"  (Consistency and Standards)
    User Test 
  •   Made bars show up on DJ feedback when vote count was 0

Heuristic Evaluation
  • Increased space between the top section and the voting pane (Flexibility and Minimal Design)

Heuristic Evaluation
  • Grayed out the "Begin Voting" button (Error Prevention)
  • Added "BPM" on the table (Skills)  
    User Test 
  • Added play button on the table

Heuristic Evaluation
  • Made text of the pie chart labels larger and bolder (Visibility, Consistency & Standards)

 Heuristic Evaluation
  • Added certain genre related information tabs to the graph charts that adapt to the DJ's interests (Skills)

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  

we also had 3 party goers however their background is less important since the focus group for MackVibes is the Dj community. 

Briefing:

DJ

You've just finished setting up your equipment to DJ for the party tonight, however, you don't quite know what kind of music the crowd is going to like THis is a new audience, and you don't want to perfom badly. You have decided to Use MackVibes, which is a software that allows you to interact with your audience, by giving them options for songs to vote on by the click of a button, or simply provide them with the name of songs currently playing. 

Audience

You've just shown up at this awesome party and heard of this cool application that allows you to rate the song currently playing, check information about songs that have already played during the night, or vote between a set of songs to see what they want to hear coming up. 

Tasks:

DJ
  1. Theoretically download our plugin and organize his music into a playlist for the party
  2. Select 3-5 songs for the audience to vote on, and begin the voting process
  3. End the voting process and analyze results, both
    1. Genre popularity, and
    2. The overall mood of the party
  4. Analyze feedback from the audience about the overall performance

Audience

  1. Vote for song to listen to in the next few minutes
  2. look at previously played songs from the audience and interact with that list
  3. Upvote and/or downvote DJ performance

...

Usability Issues

User

Issue

Severity

Possible Solutions

DJ #1

Samples for the music in the queue and when searching would be useful

Minor

We will have difficulty making sure that this does not interfere with other songs being played by the DJ on other devices, but if desired we could utilize any other aspects of the EchoNest API to play small samples when prompted.

 

Drag and Drop to add songs to the queue

Cosmetic

Add jQuery functionality on the page should it be used on a laptop

 

Confirmation before playing a new song (Error Prevention)

Major

Add a small pop-up window over the queued item that confirms the play

 

Search is very useful

Good

 

DJ #2

DJ Feedback on the homepage does not display correctly

Major

Make the DJ Feedback more minimal, remove other inhibiting features like pop-ups

 

Queuing genres rather than songs could be useful 

Minor

Have the genres as options to be queued and voted upon on the home screen

 

Set up Queue like Reddit, with upvoting/downvoting

Minor

To avoid popular songs becoming too overplayed, songs once played can be take off the queue.

 

Search lets user click an entire row

Good

 

DJ #3

Voting runs in the background for DJ  

Minor

Maintain the voting tally while on other pages.

 

Sortable song lists

Minor

Using a jQuery / Javascript tool, implement columns for the data, and sort the info in those columns

 

No graph about song votes shows up

Major

If added, the votes for songs would show up as an option on the Vibes page of the DJ interface.

 

Make sure the bottom menu stays fixed

Major

Code fix in CSS, adding a fixed position attribute to the bottom menu

 

Change 'Previous Winner' to 'Now Playing'

Cosmetic

 

 

DJ feedback last hour shows no information

Minor

After songs have been played, more information shows up. Until then, perhaps show text that says no data has been gathered

 

Auto-Login after registering

Major

Change destination page after registration to the DJ interface page

Client #1

Case Sensitive DJ code

Cosmetic

 

 

Submit DJ code button should disappear after submission

Major

Once the party client has submitted DJ code, remove the button until party ends or party client wants to leave.

 

Rate the party at the end, between 1-10

Minor

Add some feedback on the DJ interface that shows the party's votes from one to ten, add a voting feature on the client interface

 

Notification when voting starts

Major

Push Notification, color change, or device vibration are all viable options for alerting the party client that voting has started

 

Voting has a timeout so that the DJ doesn't have to go back and forth

Major

After a set amount of time, the voting poll closes without input from the DJ (although he can end voting as he pleases using our current UI).

 

Rate the Party feature is great

Good

 

Client #2

Tablet interface is weird - Text is too big, page is not scaled to phone

Major

Make sure text responds to change in viewport's size.

 

TEST ON THE PHONE

Major

Some features and UI elements (pictures, text, menus) need to adjust based on the width of the screen. Change the CSS properties that control those aspects and have them show up the same way regardless of screen size.

 

Send comments to DJ

Minor

Add a push notification-ready message tool on the client interface, perhaps on the home screen after the 'Submit DJ Code' button disappears.

Client #3

Vote on party and song.

Good

 

 

Change the voting style to that of 'Rate the Party', good for users used to one-click functionality 

Cosmetic

 

 

Add an Undo button after voting

Minor

Once voting happens, an undo button removes one from the DJ's vote tally and the party client has until the poll ends to change his vote.

Reflection

  • No labels